How to remove marker from markercluster

Question

I am using React Leaflet and react-leaflet-markercluster. I have a lot of markers and if parent's state is changed, marker cluster rerendering takes longer time. For this reason, cluster components are memoized.

When I click on a polygon, I want to delete it's marker from map and markercluster. I am looking for a way to do it without rerendering markercluster. I tried this code, but it doesn't work:

React.useEffect(() => {
    Object.keys(mapRef?._layers).forEach(function (key) {
      const leafletLayer = mapRef?._layers[key];

      if (typeof leafletLayer?.getAllChildMarkers === "function") {
        const allMarkers = leafletLayer.getAllChildMarkers();
        allMarkers.forEach((marker) => {
          const dataId = marker.options.id;
          const foundMarker = props.selected.find(
            (selectedAsset) => selectedAsset === dataId
          );
          if (foundMarker) {
            console.log("remove marker from map", marker);
            mapRef.removeLayer(marker);
          }
        });
      }
    });
  }, [mapRef, props.selected]);

codesandbox

Answer 1

I decided to remove react-leaflet-markercluster wrapper and use only Leaflet.markercluster library, which I use like this:

const mcg = L.markerClusterGroup({
    chunkedLoading: true,
    showCoverageOnHover: false,
});

const MarkersCluster = ({ markers }) => {
    const { map } = useLeaflet();
    useEffect(() => {
        mcg.clearLayers();
        const markerList = markers.map(({ coords }) => {
            return L.marker(new L.LatLng(coords.latitude, coords.longitude), {
                icon: YOUR_ICON,
            });
        });

        mcg.addLayers(markerList);
        map.fitBounds(mcg.getBounds());
        map.addLayer(mcg);
    }, [markers, map]);


    return null;

};


export default MarkerCluster;

and use it:
<MarkerCluster marker={my_markers} />

Now, I can access cluster reference in React.memo of MapElements and remove markers and prevent rerendering whole cluster.

Answer 2

Instead of removing the marker from the rendered cluster, remove it from the source, i.e the GEOJSON data and then remove the clusterlayer and re-apply it.

Its a pretty unknown fact that render from new is a lot quicker than re-rendering.

Your old way is ok for small amounts of markers but not for 25K+