Technical Marketing - Esri España
Presentación adaptada de la charla original en el DevSummit de Esri 2014 por @patrickarlt - http://bit.ly/1qmxndx
// create a map in the "map" div, set the view to a given lat/lng and zoom
var map = L.map('map').setView([40.4193, -3.6931], 16);
// add tiles from OpenStreetMap
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(map);
// create a marker and add it to the map
var marker = new L.Marker([ 40.411440, -3.676203]).addTo(map2);
// create a polygon and add it to the map
var polygon = new L.Polygon([[40.421438, -3.680194], [40.411440, -3.676203], [40.408270, -3.678478], [40.408956, -3.685816], [40.407322, -3.686632], [40.407486, -3.688348], [40.419510, -3.688563]]).addTo(map2);
// bind a popup to our marker
marker.bindPopup("<p>Hola Mundo!<p>");
// listen for click events on the polygon
polygon.on("click", function(e){
alert("Has hecho clic en el polígono en " + e.latlng);
});
So many plugins...
Leaflet plugins for ArcGIS
// create a map
var map = new L.Map("map").setView([ 40.453020, -3.688328], 16);
// add an ArcGIS Basemap
var tiles = L.esri.basemapLayer("Imagery").addTo(map);
// create a map
var map = L.map('map').setView([46.3, -60.7], 9);
// add a tile layer from ArcGIS Online or ArcGIS Server
var charts = new L.esri.TiledMapLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/World_Navigation_Charts/MapServer").addTo(map);
var map = L.map('map').setView([36.272228, -116.817001], 7);
L.esri.basemapLayer("Gray").addTo(map);
var parks = new L.esri.DynamicMapLayer("http://mapservices.nps.gov/arcgis/rest/services/LandResourcesDivisionTractAndBoundaryService/MapServer"
).addTo(map);
L.esri.featureLayer("http://services3.arcgis.com/gzPLi0vbk0c1QVGb/ArcGIS/rest/services/Gasolinerasshape/FeatureServer/0", {
style: function (feature) {
return { color: "#70ca49", weight: 2 };
},
onEachFeature: function (feature, layer) {
layer.bindPopup("" + feature.properties.Rotulo + "
" +
feature.properties.Municipio + "
" +
feature.properties.Provincia + "
" +
feature.properties.Precio95 + " €/litro
"
);
}}).addTo(map);
L.esri.clusteredFeatureLayer("http://services3.arcgis.com/gzPLi0vbk0c1QVGb/arcgis/rest/services/Gasolinerasshape/FeatureServer/0", {
onEachMarker: function(feature, marker) {
marker.bindPopup("" + feature.properties.Rotulo + "
" +
feature.properties.Municipio + "
" +
feature.properties.Provincia + "
" +
feature.properties.Precio95 + " €/litro
"
);
}
}).addTo(map);
var heat = new L.esri.HeatMapFeatureLayer("http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Graffiti_Locations3/FeatureServer/0", {
radius: 12
}).addTo(map);
var searchControl = new L.esri.Controls.Geosearch().addTo(map);
// listen for the results event and add every result to the map
searchControl.on("results", function(e){
console.log(e.results);
});
https://github.com/esri/esri-leaflet
https://github.com/Esri/esri-leaflet-geocoder
Twitter : @javierabadia & @hhkaos
Slides : http://bit.ly/1okOvOu