Markers not disappearing when removed as child components.

[ir-fuel]

this is the code I use:

  return (
    <Pane name="addressesPane" className="addressesPane">
      <MarkerClusterGroup
        key={Date.now()}
        chunkedLoading={true}
        elementsPlacementStrategy="original-locations"
        pane="housesPane"
        showCoverageOnHover={false}
        disableClusteringAtZoom={18}
        spiderLegPolylineOptions={{
          opacity: 0
        }}
      >
        {houseMarkers}
        {flatMarkers}
      </MarkerClusterGroup>
    </Pane>
  )

marker code looks like this:

    return <Marker
      key={address.id}
      position={[coords[1], coords[0]]}
      icon={L.divIcon({
        html: '<div class="w-4 h-4 rounded-full bg-green-500" style="width: 20px;height: 20px"></div>',
        className: ''
      })}
    >
    </Marker>

The markers show up correctly and get clustered. However if somewhere later the houseMarkers and flatMarkers are empty arrays, I see the component being called, but the markers stay on screen (I put logs right before the return of the component containing this code).

The only solution is to add key={Date.now} in MarkerClusterGroup.

this is happening in 5.0.0-rc.0

[amauryfischer]

i can confirm this is an issue to us too.
Date.now work, but it cause some visual glitch when re-rendering component.

[stale]

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.

[ir-fuel]

Is there a correct solution for this?

[amauryfischer]

we havn't find one yet, still searching from time to time ...

[patrickdalla]

Hi,

I could implement a workaround that worked. It seems MarkerCluster extension utilized by react-leaflet-markercluster always add new layers without removing old ones.

I just added the following lines to alter MarkerClusterGroup behaviour.

L.MarkerClusterGroup.include({
_flushLayerBuffer() {
this.eachLayer((layer:any)=>{
this.removeLayer(layer);
});
this.addLayers(this._layerBuffer);
this._layerBuffer = [];
},
});

[stale]

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.