Esri Leaflet

Leaflet plugin for ArcGIS Services. Currently Esri Leaflet supports loading Esri basemaps and feature services, as well as tiled and dynamic 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 mapping applications with Leaflet. 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 and should be thought of as a beta or preview.

Demos

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.

Example

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 Demo</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 template = "<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}<small>"

      var map = L.map('map').setView([45.528, -122.680], 13);
      
      L.esri.basemapLayer("Gray").addTo(map);

      L.esri.featureLayer("http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Parks_pdx/FeatureServer/0", {
       style: function (feature) {
          return { color: "#70ca49", weight: 2 };
        },
        onEachFeature: function (feature, layer) {
          layer.bindPopup(L.Util.template(template, feature.properties));
        }
      }).addTo(map);
    </script>
  </body>
</html>

Documentation

BasemapLayer

Extends L.TileLayer

Constructor

Constructor	Description
`new L.esri.BasemapLayer(key, options)` `L.esri.BasemapLayer(key, options)`	`key` type of base map you want to add. The `options` parameter can accept the same options as `L.TileLayer`.

Valid Keys

Streets
Topographic
Oceans
NationalGeographic
Gray
GrayLabels - Labels to pair with the Gray base map
Imagery
ImageryLabels - Labels and political boundaries to pair with the Imagery basemap
ImageryTransportation - A street map for pairing with the Imagery base map
ShadedRelief
ShadedReliefLabels - Labels for pairing with the ShadedRelief base map

Methods

L.esri.BasemapLayer inherits all methods from L.TileLayer.

Events

L.esri.BasemapLayerinherits all events from L.TileLayer.

Example

var map = L.map('map').setView([37.75,-122.45], 12);

L.esri.basemapLayer("Topographic").addTo(map);

FeatureLayer

Extends L.GeoJSON

Constructor

Constructor	Description
`new L.esri.FeatureLayer(url, options)` `L.esri.FeatureLayer(url, options)`	The `url` parameter is the url to the FeatureLayer you should like to display. See service URLs for more information on how to find these urls.

Options

L.esri.FeatureLayer also accepts all the options you can pass to L.GeoJSON.

Events

L.esri.FeatureLayer also fires all the same events as L.GeoJSON in addition to these events.

Event	Data	Description
`loading`	`Loading`	Fires when new features start loading.
`load`	`Load`	Fires when all features in the current bounds of the map have loaded.
`metadata`	`Metadata`	After creating a new `L.esri.ClusteredFeatureLayer` a request for data describing the service will be made and passed to the metadata event.

Example

var map = L.map('map').setView([45.53,-122.64], 16);

L.esri.basemapLayer("Streets").addTo(map);

L.esri.featureLayer('http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0/').addTo(map);

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.

DynamicMapLayer

Extends L.ImageOverlay

If you have a MapService you and use L.esri.DynamicMapLayer(url, options) to render it on a map

Constructor

Constructor	Description
`new L.esri.DynamicMapLayer(url, options)` `L.esri.TiledMapLayer(url, options)`	`url` should be the URL of the feature layer to consume. See service URLs for more information on how to find these urls.

Options

L.esri.DynamicMapLayer also accepts all the options you can pass to L.ImageOverlay.

Option	Type	Default	Description
`format`	`String`	`'png24'`	Output format of the image.
`transparent`	`Boolean`	`true`	Allow the server to produce transparent images.
`f`	`String`	`'image'`	Output type
`bboxSR`	`Integer`	`4326`	Spatial reference of the bounding box to generate the image with. If you don't know what this is don't change it.
`imageSR`		`3857`	Spatial reference of the output image. If you don't know what this is don't change it.
`layers`	`String` or `Array`	`''`	An array of Layer IDs like `[3,4,5]` to show from the service or a string in the format like `[show
`layerDefs`	`String` `Object`	`''`	A string representing a query to run against the service before the image is rendered. This can be a string like `"STATE_NAME='Kansas' and POP2007>25000"` or an object mapping different queries to specific layers `{5:"STATE_NAME='Kansas'", 4:"STATE_NAME='Kansas'}`.
`opacity`	`Integer`	`1`	Opacity of the layer. Should be a value between 0 and 1.
`position`	`String`	'"front"`	position of the layer relative to other overlays

Methods

Method	Returns	Description
`identify(latlng, [options](#identify-options), callback)`	`null`	Used to identify what features exist in a particular location on a `L.esri.DynamicMapLayer`. The first parameter is a `L.LatLng` object. the second if an object setting various options, and finally a callback that will be called with `error` and `response`.

Events

L.esri.DynamicMapLayer also fires all the same events as L.TileLayer in addition to these events.

Event	Data	Description
`metadata`	`Metadata`	After creating a new `L.esri.DynamicMapLayer` a request for data describing the service will be made and passed to the metadata event.

Example

var map = L.map('map').setView([ 38.24788726821097,-85.71807861328125], 13 );

L.esri.dynamicMapLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyHazardsandRisks/MapServer", {
  opacity : 0.25
}).addTo(map);

TiledMapLayer

Extends L.TileLayer

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.

Your map service must be published in spatial reference 102100 (Web Mercator). Esri Leaflet will not support any other spatial reference for tile layers.

Constructor

Constructor	Description
`new L.esri.TiledMapLayer(url, options)` `L.esri.TiledMapLayer(url, options)`	`url` should be the URL of the feature layer to consume. See service URLs for more information on how to find these urls.

Options

L.esri.TiledMapLayer also accepts all the options you can pass to L.TileLayer.

Events

L.esri.TiledMapLayer also fires all the same events as L.TileLayer in addition to these events.

Event	Data	Description
`metadata`	`Metadata`	After creating a new `L.esri.TiledMapLayer` a request for data describing the service will be made and passed to the metadata event.

Example

var map = L.map('map').setView([37.761487048570935, -122.39112854003905], 12);

L.esri.tiledMapLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer", {
  opacity: 0.25,
  zIndex:2
}).addTo(map);

ClusteredFeatureLayer

Extends L.Class

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.

Constructor

Constructor	Description
`new L.esri.ClusteredFeatureLayer(url, options)` `L.esri.clusteredFeatureLayer(url, options)`	`url` should be the URL of the feature layer to consume. See service URLs for more information on how to find these urls.

Options

Option	Type	Default	Description
`cluster`	`L.MarkerClusterGroup`	`new L.MarkerClusterGroup()`	The instance of `L.MarkerClusterGroup` that points will be added to.
`createMarker`	`Function`	`null`	A function that will be called with a GeoJSON representation of the point its latitude and longitude. Should return a `L.Marker` object.
`onEachMarker`	Function	`null`	This function will be called for every marker before it is added to the cluster. It is called with the GeoJSON representation of the point and the marker

Events

Event	Data	Description
`loading`	`Loading`	Fires when new features start loading.
`load`	`Load`	Fires when all features in the current bounds of the map have loaded.
`metadata`	`Metadata`	After creating a new `L.esri.ClusteredFeatureLayer` a request for data describing the service will be made and passed to the metadata event.

Example

L.esri.clusteredFeatureLayer("http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0", {
  cluster: new L.MarkerClusterGroup({
    disableClusteringAtZoom: 16,
    polygonOptions: {
      color: "#2d84c8"
    },
    iconCreateFunction: function(cluster) {
      var count = cluster.getChildCount();
      var digits = (count+"").length;
      return new L.DivIcon({
        html: count,
        iconSize: null
      });
    }
  }),
  createMarker: function (geojson, latlng) {
    return L.marker(latlng, {
      icon: icons[geojson.properties.direction.toLowerCase()]
    });
  },
  onEachMarker: 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);

Event Objects

Metadata Event

The data included in the metadata event will vary depending on type of layer you are adding to the map.

DymanicMapLayer and TiledMapLayer will return the JSON Definition of a Map Service
FeatureLayer and ClusteredFeatureLayer will return the JSON Definition of a Feature Layer

Loading Event

Data	Value	Description
`bounds`	`LatLngBounds`	The bounds that features are currently being loaded.

Load Event

Data	Value	Description
`bounds`	`LatLngBounds`	The bounds that features where loaded.

NOTE: The load event will not fire if you add the layer to the map before adding the event listener. You must add the listener first and then add the layer to the map.

var layer = new L.esri.FeatureLayer(url, options);

layer.on('load', function(e){
  // do something on load
});

layer.addTo(map);

Options Objects

Identify Options

Option	Type	Default	Description
`layers`	`String` or `Array`	`''`	An array of Layer IDs like `[3,4,5]` to show from the service or a string in the format like `[show
`layerDefs`	`String` `Object`	`''`	A string representing a query to run against the service before the identify query is run. This can be a string like `"STATE_NAME='Kansas' and POP2007>25000"` or an object mapping different queries to specific layers `{5:"STATE_NAME='Kansas'", 4:"STATE_NAME='Kansas'}`.
`tolerance`	`Integer`	5	The pixel tolerance with which to buffer features for identifying.
`imageDisplay`	`String`	`{{mapWidth}},{{mapHeight}},96`

Service URLs

Coming Soon!

Development Instructions

Fork and clone Esri Leaflet
cd into the esri-leaflet folder
Run git submodule init and git submodule update
Instal the dependancies with npm install
The examples in the /examples folder should work
Make your changes and create a pull request

Dependencies

Leaflet - the core Leaflet library
Leaflet.markercluster - If you want to use L.esri.ClusteredFeatureLayer you will need the Leaflet markercluster plugin
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.

Resources

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Credit

Dymanic Map Layer code is based on code from https://github.com/sanborn/leaflet-ags/blob/master/src/AGS.Layer.Dynamic.js

Licensing

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)

Name		Name	Last commit message	Last commit date
Latest commit History 389 Commits
dist		dist
examples		examples
spec		spec
src		src
vendor		vendor
.gitignore		.gitignore
.gitmodules		.gitmodules
.jshintrc		.jshintrc
CONTRIBUTING.md		CONTRIBUTING.md
Gruntfile.js		Gruntfile.js
README.md		README.md
bower.json		bower.json
esri-leaflet.png		esri-leaflet.png
karma.conf.js		karma.conf.js
license.txt		license.txt
package.json		package.json

License

ldanzinger/esri-leaflet

Folders and files

Latest commit

History

Repository files navigation

Esri Leaflet

Demos

Example

Documentation

BasemapLayer

Constructor

Methods

Events

Example

FeatureLayer

Constructor

Options

Events

Example

DynamicMapLayer

Constructor

Options

Methods

Events

Example

TiledMapLayer

Constructor

Options

Events

Example

ClusteredFeatureLayer

Constructor

Options

Events

Example

Event Objects

Metadata Event

Loading Event

Load Event

Options Objects

Identify Options

Service URLs

Development Instructions

Dependencies

Resources

Issues

Contributing

Credit

Licensing

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Packages