L.esri.Cluster.FeatureLayer

Extends L.esri.Layers.FeatureLayer

L.esri.Cluster.FeatureLayer provides integration for Feature Layers with the Leaflet.markercluster plugin. Because of the extra dependency on Leaflet.markercluster we do not include L.esri.Cluster.FeatureLayer in the default build of Esri Leaflet. You will also need to include your own copy of the Leaflet.markercluster plugin.

More information about Feature Layers can be found in the L.esri.FeatureLayer documentation. More information and the source code for this plugin can be found here.

Constructor

Constructor	Description
`L.esri.Cluster.featureLayer(<Object>options)`	You must pass a `url` to a Feature Layer in your `options`

Options

Option	Type	Description
`url`	`String`	Required The URL to the Feature Layer .
`pointToLayer(<GeoJSON Feature> feature, <LatLng> latlng)`	`Function`	Function that will be used for creating layers for GeoJSON points (if not specified, simple markers will be created).
`style(<GeoJSON Feature> feature, <ILayer> layer)`	`Function`	Function that will be used to get style options for vector layers created for GeoJSON features.
`onEachFeature(<GeoJSON Feature> feature, <ILayer> layer)`	`Function`
`where`	`String`	A server side expression that will be evaluated to filter features. By default this will include all features in a service.
`fields`	`Array`	An array of fieldnames to pull from the service. Includes all fields by default. You should always specify the name of the unique id for the service. Usually either `'FID'` or `'OBJECTID'`.
`from`	`Date`	When paired with `to` defines the time range of features to display. Requires the Feature Layer to be time enabled.
`to`	`Date`	When paired with `from` defines the time range of features to display. Requires the Feature Layer to be time enabled.
`timeField`	`false`	The name of the field to lookup the time of the feature. Can be an object like `{start:'startTime', end:'endTime'}` or a string like `'created'`.
`timeFilterMode`	`'server'` (default) or `'client'`	Determines where features are filtered by time. By default features will be filtered by the server. If set to `'client'` all features are requested and filtered by the app before display.
`simplifyFactor`	`Integer`	How much to simplify polygons and polylines. More means better performance, and less means more accurate representation.
`precision`	`Integer`	How many digits of precision to request from the server. Wikipedia has a great reference of digit precision to meters.
`token`	`String`	If you pass a token in your options it will be included in all requests to the service.
`proxy`	`String`	URL of an ArcGIS API for JavaScript proxies or ArcGIS Resource Proxies to use for proxying POST requests.
`useCors`	`Boolean`	If this service should use CORS when making GET requests.

ClusteredFeatureLayer will also accept any options that can be passed to Leaflet.MarkerClusterGroup to customize the behavior and appearance of the clustering.

Events

Event	Type	Description
`loading`	`<LoadingEvent>`	Fires when new features start loading.
`load`	`<LoadEvent>`	Fires when all features in the current bounds of the map have loaded.
`createfeature`	`<CreateFeatureEvent>`	Fired when a feature from the Feature Layer is loaded for the first time.
`removefeature`	`<RemoveFeatureEvent>`	Fired when a feature on the layer is removed from the map.
`addfeature`	`<AddFeatureEvent>`	Fired when a previously removed feature is added back to the map.

L.esri.FeatureLayer also fires all L.esri.FeatureLayerService events.

In additon to these events L.esri.Cluster.FeatureLayer also fires the following Mouse Events click, dblclick, mouseover, mouseout, mousemove, and contextmenu, clusterclick, clusterdblclick, clustermouseover, clustermousemove, and clustercontextmenu as well as the following the Popup Events popupopen and popupclose.

Methods

Method	Returns	Description
`setStyle(<PathOptions> style) setStyle(<Function> style)`	`this`	Sets the given path options to each layer that has a `setStyle` method. Can also be a `Function` that will recive a `layer` argument and should return Path Options
`resetStyle(<String or Integer> undefined)`	`this`	Given the ID of a feature, reset that feature to the original style, useful for resetting style after hover events.
`setStyle(<PathOptions> style) setStyle(<Function>style)`	`this`	Sets the given path options to each layer that has a `setStyle` method. Can also be a `Function` that will receive a `feature` argument and should return Path Options `featureLayer.setStyle({ color: 'white' })` `featureLayer.setStyle(1, function(feature){ return { weight: feature.properties.pixelWidth }; })`
`eachFeature(<Function> fn, <Object> context)`	`this`	Calls the passed function against every feature. The function will be passed the layer that represents the feature. `featureLayer.eachFeature(function(layer){ console.log(layer.feature.properties.NAME); });`
`getFeature(<String or Integer> undefinedid)`	`Layer`	Given the id of a Feature return the layer on the map that represents it. This will usually be a Leaflet vector layer like Polygon or Polygon, or a Leaflet Marker.
`getWhere()`	`String`	Returns the current where setting
`setWhere(<String> where, <Function> callback, <Object> context)`	`this`	Sets the new where option and refreshes the layer to reflect the new `where` filter. Accepts an optional callback and function context.
`getTimeRange()`	`Array`	Returns the current time range as an array like `[from, to]`
`setTimeRange(<Date> from, <Date> to, , <Function> callback, <Object> context)`	`this`	Sets the current time filter applied to features. An optional callback is run upon completion if `timeFilterMode` is set to `'server'`. Also accepts function context as the last argument.
`authenticate(<String> token)`	`this`	Authenticates this service with a new token and runs any pending requests that required a token.
`query()`	`this`	Returns a new `L.esri.Query` object that can be used to query this layer. Your callback function will be passed a GeoJSON FeatureCollection with the results or an error. `featureLayer.query() .within(latlngbounds) .where("Direction = 'WEST'") .run(function(error, featureCollection){ console.log(featureCollection); });`
`metadata(<Function> callback, <Object> context)`	`this`	Requests metadata about this Feature Layer. Callback will be called with `error` and `metadata`. `featureLayer.metadata(function(error, metadata){ console.log(metadata); });`
`addFeature(<GeoJSON Feature> feature, <Function> callback, <Object> context)`	`this`	Adds a new feature to the feature layer. this also adds the feature to the map if creation is successful. Requires authentication as a user who has permission to edit the service in ArcGIS Online or the user who created the service. Requires the `Create` capability be enabled on the service. You can check if creation exists by checking the metadata of your service under capabilities in the metadata.
`updateFeature(<GeoJSON Feature> feature, <Function> callback, <Object> context)`	`this`	Update the provided feature on the Feature Layer. This also updates the feature on the map. Requires authentication as a user who has permission to edit the service in ArcGIS Online or the user who created the service. Requires the `Update` capability be enabled on the service. You can check if creation exists by checking the metadata of your service under capabilities in the metadata.
`deleteFeature(<String or Integer> id, <Function> callback, <Object> context)`	`this`	Remove the feature with the provided id from the feature layer. This will also remove the feature from the map if it exists. Requires authentication as a user who has permission to edit the service in ArcGIS Online or the user who created the service. Requires the `Update` capability be enabled on the service. You can check if creation exists by checking the metadata of your service under capabilities in the metadata.

Example

Live sample here.

Use dark colors for code blocksCopy
<link rel="stylesheet" type="text/css" href="./MarkerCluster.Default.css">
<link rel="stylesheet" type="text/css" href="./MarkerCluster.css">
<script src="./leaflet.markercluster.js"></script>
<script>./esri-leaflet-cluster.js</script>

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

var url = 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0';

L.esri.Cluster.featureLayer({
    url: url,
    // Cluster Options
    polygonOptions: {
    color: '#2d84c8'
    },
    // Feature Layer Options
    pointToLayer: function (geojson, latlng) {
        return L.circleMarker(latlng, 10, {
        color: '#2D84C8'
        });
    }
}).addTo(map);

Esri LeafletAPI Reference

L.esri.Cluster.FeatureLayer

Was this page helpful?