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
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);