CODEWITHSUNDEEP
javascriptleafletleaflet.markercluster
Titus25
Titus25

Reputation: 33

Cluster geojson Layer doesn't work with marker filtering

I'm doing a Leaflet map with some GeoJSON data.

I try to add the cluster function to my JS file. As I added some filter and styling features according to properties, I'm unable to find the right way to code the cluster fonction.

Here is the GeoJSON layer and the filter verificator:

const geojsonLayer = L.geoJSON(null,{
filter: (feature) => {
  const isYearChecked = checkboxStates.years.includes(feature.properties.year)
  const isEventTypeChecked = checkboxStates.eventTypes.includes(feature.properties.eventType)
  return isYearChecked && isEventTypeChecked }, //only true if both are true

with the syling function:

              var year = feature.properties.year;
              if (year <= -150) {
                  return {
                      color: "black"
                  };

I add then the popup:

layer.bindPopup(popupText, {
       closeButton: true,
       offset: L.point(0, -10)
          });
     layer.on('click', function() {
       layer.openPopup();
     });
   },
}).addTo(map);

I try to add this piece of code to display the cluster but I don't know where to place it in my code in order to work (https://github.com/Leaflet/Leaflet.markercluster):

var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
// ... Add more layers ...
map.addLayer(markers);

My whole code is available here: https://github.com/jandre3/pince-crochet

Upvotes: 3

Views: 486

Answers (1)

ghybs
ghybs

Reputation: 53350

Once you have populated your Leaflet GeoJSON Layer Group (typically with geojsonLayer.addData(geoJsonObject), then instead of adding that group to your map, simply add it into your MarkerClusterGroup:

const mcg = L.markerClusterGroup().addTo(map);

geojsonLayer.addData(geoJsonObject).addTo(mcg);

If later on you want to swap the content, you can clear it from both groups and repeat:

mcg.clearLayers();
geojsonLayer.clearLayers();

geojsonLayer.addData(geoJsonObject).addTo(mcg);

Demo: https://jsfiddle.net/hd68ea7k/

Upvotes: 1

Related Questions