Leaflet plugin for Esri ArcGIS Online Services. Currently only supports loading Esri basemaps and feature services, as well as map services.
The goal of Esri Leaflet is not to replace the ArcGIS API for JavaScript, but rather to provide small components to allow developers to build simple lightweight mapping applications. It pairs well with Terraformer for converting data and geoservices-js for making advanced request to ArcGIS REST services, for example place finding and reverse geocoding.
Currently Esri Leaflet is in development but is open to contributions. It should be thought of as a beta or preview.
There are loads of demos showing the features of Esri Leaflet as well as how it might integrate with geoservices-js and Terraformer libraries. Check out the demos.
Here is a quick example to get you started. Just change the paths to point to the proper libraries and go.
<!DOCTYPE html>
<html>
<head>
<title>Esri Leaflet</title>
<link rel="stylesheet" href="/the/path/to/leaflet.css" />
<style>
html, body, #map {
width : 100%;
height : 100%;
}
</style>
<script src="/the/path/to.leaflet.js"></script>
<script src="/the/path/to/esri-leaflet.min.js"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="/the/path/to/leaflet.ie.css" /><![endif]-->
<script src="/the/path/to.leaflet.js"></script>
<script src="/the/path/to/esri-leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map');
// ArcGIS Online Basemaps - Streets, Topographic, Gray, GrayLabels, Oceans, NationalGeographic, Imagery, ImageryLabels
L.esri.basemapLayer("Streets").addTo(map);
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map).bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16});
</script>
</body>
</html>You can quickly access ArcGIS base maps with the L.esri.BasemapLayer(key, options) layer. The key parameter should be one of the following keys.
StreetsTopographicOceansNationalGeographicGrayGrayLabelsImageryImageryLabels
The options parameter can accept the same options as L.TileLayer.
var map = L.map('map').setView([37.75,-122.45], 12);
L.esri.basemapLayer("Topographic").addTo(map);Esri Leaflet has support for FeatureLayers via L.esri.FeatureLayer(url, options). The url parameter is the url to the FeatureLayer you should like to display.
var map = L.map('map').setView([45.52963623111275,-122.67389774322508], 12);
L.esri.basemapLayer("Topographic").addTo(map);
L.esri.featureLayer('http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0/');The options parameter can accept anything that L.GeoJSON can accept. This means you can apply popups, custom styles and filters. See Leaflet GeoJSON for more information.
If you have a MapService you and use L.esri.DynamicMapLayer(url, options) to render it over a map. It takes a url to a MapService and options.
var map = L.map('map').setView([ 38.24788726821097,-85.71807861328125], 13 );
L.esri.basemapLayer("Gray").addTo(map);
L.esri.dynamicMapLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyHazardsandRisks/MapServer", {
opacity : 0.25
}).addTo(map);
L.esri.basemapLayer("GrayLabels").addTo(map);It is possible to show/hide specific layers and set layer definitions within options like so...
L.esri.dynamicMapLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", {
opacity : 0.5,
layers:[5,4,3],
layerDefs: {
5: "STATE_NAME='Kansas'",
4: "STATE_NAME='Kansas' and POP2007>25000",
3: "STATE_NAME='Kansas' and POP2007>25000"
}
}).addTo(map);You can identify features from MapService using L.esri.DynamicMapLayer.identify(latLng, options, callback).
dynLayer.identify(e.latlng, {
sr: '4265', //default is '4326'
tolerance: 5, //default is 3
imageDisplay: '801,601,97', // default is '800,600,96' (height by width in pixels and DPI)
} , callback)Take a look at this sample for a demonstration.
Esri Leaflet can work with tiled map services as well. You can use L.esri.TiledMapLayer(url, options) to use tiled map services. The url parameter is the url to the MapServer and options is identical to the options you can pass to L.TileLayer.
var map = L.map('map').setView([ 37.761487048570935, -122.39112854003905], 12 );
L.esri.basemapLayer("Gray", {
zIndex:1
}).addTo(map);
L.esri.tiledMapLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer", {
opacity: 0.25,
zIndex:2
}).addTo(map);
L.esri.basemapLayer("GrayLabels", {
zIndex:3
}).addTo(map);L.esri.ClusteredFeatureLayer provides integration for Feature Layers with the Leaflet.markercluster plugin. Because of the extra Dependency on Leaflet.markercluster we do not include L.esri.ClusteredFeatureLayer in the default build of Esri Leaflet. It lives in /dist/extras/clustered-feature-layer.js. You will also need to include your own copy of the Leaflet.markercluster plugin.
L.esri.clusteredFeatureLayer(featureLayerUrl, {
// this should be an instance of L.MarkerClusterGroup
// https://github.com/Leaflet/Leaflet.markercluster#usage
cluster: new L.MarkerClusterGroup(),
// this function should return a new L.Marker
// that will be added to the cluster.
createMarker: function(geojson, latlng){},
// this optional function will be run against
// every marker before it is added to the cluster
// this is a great place to define custom popups
// or other behaviors.
onEachMarker: function(geojson, marker){
}
}).addTo(map);L.esri.clusteredFeatureLayer("http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0", {
cluster: new L.MarkerClusterGroup({
spiderfyOnMaxZoom:false,
disableClusteringAtZoom: 16,
polygonOptions: {
color: "#2d84c8",
weight: 4,
opacity: 1,
fillOpacity: 0.5
},
iconCreateFunction: function(cluster) {
var count = cluster.getChildCount();
var digits = (count+"").length;
return new L.DivIcon({
html: count,
className:"cluster digits-"+digits,
iconSize: null
});
}
}),
marker: function (geojson, latlng) {
return L.marker(latlng, {
icon: icons[geojson.properties.direction.toLowerCase()]
});
},
eachMarker: function(geojson, marker) {
marker.bindPopup("<h3>"+geojson.properties.stop_name+"</h3><p>Stop ID: "+geojson.properties.stop_id+"</p><p>"+geojson.properties.stop_desc+"</p>")
}
}).addTo(map);git clone https://github.com/Esri/esri-leafletcd esri-leafletgit submodule initgit submodule update
- All services that Esri Leaflet accesses must be publicly available. Support for private services will be included in a future release.
- MapServices that you wish to use for
L.esri.TiledMapLayermust be published in Web Mercator.
- Terraformer - base library for other dependencies
- Terraformer ArcGIS - for converting geometries
- Terraformer RTree - client side RTree index for optimizations
These are currently included in /vendor as submodules and are built into the dist/esri-leaflet.js file.
It is possible to build a custom version of Esri Leaflet by customizing the Gruntfile. To do this add a new entry to the concat and the uglify configurations. More detailed directions will be added here later.
Find a bug or want to request a new feature? Please let us know by submitting an issue.
Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.
Dymanic Map Layer code is based on code from https://github.com/sanborn/leaflet-ags/blob/master/src/AGS.Layer.Dynamic.js
Copyright 2013 Esri
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
A copy of the license is available in the repository's license.txt file.
[](Esri Tags: ArcGIS Web Mapping Leaflet) [](Esri Language: JavaScript)