Cluster multiple map services in leaflet

DarrylKlassen1

I am trying to cluster multiple layers in leaflet, but it doesn't seem to be working.  I have 5 rest end points that I am trying to put together to cluster using the L.markerClusterGroup().  This is what I have in my html:

 

<script>
  var map = L.map('map').setView([50.6805, -120.3421], 12);

 

  L.esri.basemapLayer('Streets').addTo(map);
  var markers = L.markerClusterGroup();
  var ArtsCultureEducation = L.esri.featureLayer({
       url: 'http://geoprodsvr.kamloops.ca/arcgis3/rest/services/Website/CityFacilities_LL/MapServer/0',
  });
  var PublicSafteySite = L.esri.featureLayer({
      url: 'http://geoprodsvr.kamloops.ca/arcgis3/rest/services/Website/CityFacilities_LL/MapServer/1',
  });

 

  markers.addLayer(PublicSafteySite);
  markers.addLayer(ArtsCultureEducation);
  map.addLayer(markers);
</script>

 

The points from the 2 layers show up, but they don't cluster.  Any help would be appreciated.

Thanks

Darryl

JohnGravois

when Leaflet.markerCluster.addLayer() is called, an attempt is made immediately to check whether a single lat/long can be extracted and clustered:

<SPAN class="comment token">// if its not possible to dig out a single lat/lon from the layer,</SPAN>
<SPAN class="comment token">// abort clustering</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>layer<SPAN class="punctuation token">.</SPAN>getLatLng<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>_nonPointGroup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">fire</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'layeradd'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> layer <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

so you have several problems...

1. L.esri.featureLayer doesn't fetch any features at all until after it is added to the map and even then has to make asynchronous web requests to ask for features that intersect the area being drawn

2. even when these features are retrieved, they can't be pulled out of L.esri.featureLayer via the .getLatLng() method that plugin uses (above).

in the ArcGIS world, we tend to think of layers as entire collections of features with the same geometry type in a map. In Leaflet, a layer often refers to a single geometry (marker, polyline or polygon)

unfortunately, i don't have any helpful advice for conveniently managing and clustering data coming from several different services. it would take some work.