Support for bulk adding layers

[olabalboa]

After looking at the code I notice that 2.0.0-rc3 doesn't support bulk adding of markers, see https://github.com/Leaflet/Leaflet.markercluster#bulk-adding-and-removing-markers.

Each time a child to MarkerClusterGroup is rendered the MapLayer from react-leaflet calls layerContainer.addLayer(). This causes severe performance issues for us when having about 2000 markers.

I forked this repo and modified the addLayer function to support bulk adding of many layers/markers (see code here https://github.com/olabalboa/react-leaflet-markercluster/blob/master/src/react-leaflet-markercluster.js).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[crgoldstein]

this would be very helpful

[moshekrup]

Any updates for this PR? Will this going to merge?

[TiagoPortfolio]

Can we have an update on this? I think this is a major improvement for users that are still using version 2.0.0.

[moshekrup]

I have to say that the current performance for this package is pretty bad (map freezing) for 1000 markers(version 2.0.0). Additionally, I've tried to use this suggested solution (in this PR) and the performance unfortunately was still inefficient. With no choice, what I did is to use the Leaflet.markercluster itself without this react wrapper :( something 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} />

After I did that, the performance is very fast for more than 50000 markers :)

[olabalboa]

I'm sorry but I have not time to look into this at the moment. When we bump react-leaflet to v3 in beginning of next year I will see if I can create a working pull request for v3. We have a bunch of react-leaflet custom component that needs to be fixed for v3. Until then, feel free to create your own fork and add the code I made and submit your own PR. Or consider writing your own component like @moshekrup did.

[AndrejGajdos]

Why this PR wasn't merged?

@moshekrup thanks for solution, but it doesn't work when you change routes. You should init markerClusterGroup when the component is mounted.

let mcg = null;

const MarkersCluster = ({ markers }) => {
    React.useEffect(() => {
		mcg = L.markerClusterGroup();
	}, []);
};