L.esri.Cluster.featureLayer does not call style function

Question

Using the L.esri.Cluster.featureLayer plugin for Leaflet to cluster features from Esri does not call the style method despite the documentation stating that this is the way to style vector layers.

Docs: https://esri.github.io/esri-leaflet/api-reference/layers/cluster-feature-layer.html

Options has a style method like the one for vanilla Leaflet feature layers. L.esri.featureLayer does use the style option properly, but the cluster version does not appear to be doing this - or I am doing something wrong.

Sample code:

var bikePaths = L.esri.Cluster.featureLayer({
 url: 'https://services.arcgis.com/uCXeTVveQzP4IIcx/ArcGIS/rest/services/Bike_Routes/FeatureServer/0',
 onEachFeature: function(feature, layer)
 {
 // this works - called for each feature
 },
 pointToLayer: function (feature, latlng)
 {
 // this works - called for each point feature
 },
 style: function (feature, layer)
 {
 // never called - despite having linear and polygon features
 // the linear and polygon features do show up fine.
 // they don't cluster, but that's to be expected (they are vectors)
 // wth documentation?
 },
 }).addTo(map)

Anybody have a solution for this?

• nothingisnecessary: Also reported to the plugin maintainers on GitHub: github.com/Esri/esri-leaflet-cluster/issues/23

Answer 1

After testing and debugging I concluded this is a bug in either the docs or the plugin (or both). It seems to be caused by the asynchronous nature of loading Esri feature layers.

My work-around solution is to manually call resetStyle for vector features from within onEachFeature so that I can apply a custom initial style to the polygon and line features.

To wit:

var bikePaths = L.esri.Cluster.featureLayer({
 url: 'https://services.arcgis.com/uCXeTVveQzP4IIcx/ArcGIS/rest/services/Bike_Routes/FeatureServer/0',
 onEachFeature: function(feature, layer)
 {
 if (feature.geometry.type !== "Point" && feature.geometry.type !== "MultiPoint") 
 {
 // explicit call to resetStyle, now that we have feature data
 bikePaths.resetStyle(feature.id);
 }
 },
 style: function (feature, layer)
 { 
 // do different styling magic based on feature properties and return style object
 return { color: "pink", weight: 5, opacity: 50 };
 },
 }).addTo(map)

Good enough - shipped it!