Not removing clusters when adding new points and removing old points dynamically

[michaelbarone]

I am having an issue figuring out how to remove empty clusters from the map view when dynamically changing the map points. My code is essentially a modified version of the cluster example here:
https://github.com/visgl/react-google-maps/blob/main/examples/marker-clustering/src/app.tsx

After the initial point load, it will generate clusters based on the cluster example code perfectly. I then update the points i want to display, the new points are added properly with new clusters as needed, and the previous individual points are removed from the map view, however, the previous clusters remain on the map. When selecting or zooming into those clusters, there are no map points displayed.

useEffect(() => { clusterer.current?.clearMarkers(); clusterer.current?.addMarkers(Object.values(markers)); }, [markers]);

This is present and i would assume the clearMarkers() function should take care of this, but it is not. I have also tried moving that call to other places in my code where i am loading the new points, even tried setting clusterer.current to null and removing the clusterer object completely and re-initializing it, but cannot seem to get the old "empty" clusters removed from the view on the map.

I also tried to use a regular variable and state instead of the useRef for Clusterer and both had the same issue.

Any insight/help would be appreciated.

Edit, as a temporary solution/workaround, i am re-rendering the parent map to reset it when changing location points to remove the un-used clusters, however the whole map flashes and doesnt give the best user experience.

[JensenMPillay]

This approach seems to work well within the context of dynamic point clusters : #184 (reply in thread)

[michaelbarone]

awesome, thank you so much.. worked great.