Regular-grid-cluster plugin for Leaflet

Question

I am starting with Leaflet and I am trying to use the Regular-grid-cluster plugin with no success. The following code works until the definition of the 'const grid' element. So, I can see the markers on the map but I can not implement the functionality of the plugin. Could you point me the errors in the code?

EDIT: I made some amendments to the code, now I can see the markers when testing but I still got an error, this time the console says: leaflet-regulargridcluster.src.js:282 Uncaught TypeError: layersArray.map is not a function at i.addLayers (leaflet-regulargridcluster.src.js:282) at test05.html:94

TomazicM · Answer

Documentation on Regular-grid-cluster Leaflet plugin is not very extensive, but with the help of demo code at https://adammertel.github.io/Leaflet.RegularGridCluster/demo/random_data/ I was able to make your code work.

First thing you notice in demo code is that input to .addLayers of L.regularGridCluster is not Leaflet layer, but an array of objects. Description of structure of these objects in the docs is not very helping, but in the demo code such object has the following form:

{marker: markerLayer,
 properties: {
   a: maxValue,
   b: minValue
 }
}

Next thing is that markers to be used in L.regularGridCluster must support styling, like for example L.circleMarker.

And the last thing, when creating markers from GeoJSON, this layer should not be added to the map, since marker display is regulated by L.regularGridCluster.

Taken all this into account, your code could then look something like this (min and max properties are created random, as in demo code):

var data = [];

var layer = L.geoJSON(points, {
    pointToLayer: function (point, latLng) {
      var marker = L.circleMarker(latLng, {radius: 10});
      return(marker);
    },
    onEachFeature: function(feature, layer) {
      const properties = {
          a: 5 + Math.floor(Math.random() * 5),
          b: Math.floor(Math.random() * 5)
      };          
      data.push({marker: layer, properties: properties});
      var popupContent = "<p> <b>" + "FIC_ID: " + "</br>" + feature.properties.fic_id + "</b></br>" + "Región: " + "</br>" + feature.properties.reg_ejec + "</br>" + feature.properties.pro_ejec + ",</br> " + feature.properties.com_ejec + ",</br> " + feature.properties.num_informe + "</p>";
      layer.bindPopup(popupContent);
    }
});
map.fitBounds(layer.getBounds());

const grid = L.regularGridCluster({
    rules: rules,
    gridMode: 'hexagon',
    showCells: true,
    showMarkers: true,
    showTexts: false
});
grid.addLayers(data);
grid.addTo(map);

" + "FIC_ID: " + "
" + feature.properties.fic_id + "
" + "Región: " + "
" + feature.properties.reg_ejec + "
" + feature.properties.pro_ejec + ",
" + feature.properties.com_ejec + ",
" + feature.properties.num_informe + "

"; layer.bindPopup(popupContent); } }); map.fitBounds(layer.getBounds()); const grid = L.regularGridCluster({ rules: rules, gridMode: 'hexagon', showCells: true, showMarkers: true, showTexts: false }); grid.addLayers(data); grid.addTo(map);

Regular-grid-cluster plugin for Leaflet

One Answer

Add your own answers!

Ask a Question