Leaflet: Polygon center objects that are useable by MarkerCluster

Question

Is there there a way to add centerpoints created via .getCenter() within an onEachFeature event (see below) to an L.Marker, or similar, object that contains all of the centerpoints created on that event, that can be used by Leaflet.Markercluster?

I thought using featureGroup might be the solution, but apparently not.

I can get unclustered centerpoints show up on the map via the addTo(map) method on L.Marker or L.FeatureGroup, but, unfortunately, when I try to use markerCluster on the objects either of those two create, the the map comes up empty. No error messages are appearing on the console in the brower.

I'm still pretty green at JS, so I have a hunch there's something fundamental I'm missing, perhaps about L.Markercluster itself, and my apologies for any noob errors here.

Libraries:

<!-- Leaflet -->

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
  integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
  integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
  crossorigin=""></script>

<!-- ESRI Leaflet -->

<script src="https://unpkg.com/esri-leaflet@2.0.4/dist/esri-leaflet.js"></script>

<!-- Leaflet-markercluster -->

<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.6/dist/MarkerCluster.css"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.6/dist/MarkerCluster.Default.css"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.0.6/dist/leaflet.markercluster.js"></script>

<!--  Leaflet.MarkerCluster.LayerSupport -->

<script src="https://unpkg.com/leaflet.markercluster.layersupport@1.0.5/dist/leaflet.markercluster.layersupport.js"></script>

Script:

<script>

  var map = L.map('map', {
    center: [42.389810, -72.524684],
    zoom: 5
  });

  var esriTopo = L.esri.basemapLayer('Topographic').addTo(map);

  var ProjectMap = L.esri.featureLayer ({
    url: 'https://services.arcgis.com/2gdL2gxYNFY2TOUb/arcgis/rest/services/NECSC_Test_Data/FeatureServer/1',
    //cheap hack to making the polygons invisible
    weight: 0,
    fillOpacity: 0,

    // creating the centerpoints
    onEachFeature: function(feature,layer){
      if (feature.geometry.type = 'Polygon') {
        var bounds = layer.getBounds();
        var center = bounds.getCenter();

        var centerpoints = L.marker(center);
        centerpointlayer.addLayer(centerpoints);
        // centerpointlayer defined below as global variable
      };
    };
  }).addTo(map);

  var centerpointlayer = L.featureGroup();
  // 

  var clusters = L.markerClusterGroup.layerSupport();
  clusters.addTo(map);
  clusters.checkIn(centerpointlayer);

  map.zoomIn(5);
  map.zoomOut(5);

</script>

</body>
</html>

score 3 · Answer 1 · answered Aug 11 '17 at 04:43

Gah...Turns out I was implementing L.Markercluster wrong (i.e., not like it says in the API docs). The final lines of code before /script at the end should read:

var centerpointlayer = L.layerGroup();
var clusters = L.markerClusterGroup.layerSupport();
clusters.addLayer(centerpointlayer);
map.addLayer(clusters);

Leaflet: Polygon center objects that are useable by MarkerCluster

1 Answers1