Leaflet maps clustering

Wappler General Bugs
1

Wappler 6.8.0, AC2

Something seems off with leaflet maps when clustering is enabled.

I have a server action that fetches 25 hotels, this is held in a data view component.

On first load of my page, leaflet maps shows a cluster of 25 markers, correctly.
As I use the filtering from the data view component, the clustering starts going wrong.
My filter is on hotel star ratings, out of the 25 hotels, there are 2 hotels which are 1 star, when i set the filter to only display 1 star hotels, the cluster which was 25, should change to 2, however it adds the 2 to the 25, and reports 27. The more i play with the filters, the worse it gets.

If I turn off clustering, and do the same thing, it works perfectly.

2

Just ran into the same issue, did you find a solution?

4

Do you know if this ever got fixed? I have just hit the same issue.

Thanks,

5

Claude gave me a solution for this if anybody else needs it. Made these changes and it seems to be working correctly :slight_smile:

Look at how markers get removed when clustering is on. _removeAllMarkers (called automatically whenever the bound markers array changes, e.g. after a filter) does this:

js

_removeAllMarkers(){
  this.markers = this.markers.filter(t => !!t.static || (t.remove().off(), !1))
}

and removeMarker does the same thing: it calls plain Leaflet t.remove() on each marker. The problem is that when enableClustering is true, markers aren't added straight to the map, they're added to a L.markerClusterGroup():

js

this.props.enableClustering
  ? (this._markerCluster = this._markerCluster || L.markerClusterGroup().addTo(this.map),
     this._markerCluster.addLayer(t))
  : t.addTo(this.map)

A marker that lives inside a markerClusterGroup has to be taken out via the group's own removeLayer() method, that's how the plugin updates its internal spatial tree and cluster counts. Calling the generic marker.remove() on a clustered marker doesn't go through that path at all, so the cluster group's internal bookkeeping never gets updated, even though the marker disappears from this.markers. The old marker is "removed" from Wappler's array but still counted inside the actual Leaflet cluster. Then when the filtered set gets added back in via addLayer(), you get old-count + new-count, exactly what you and the people in that forum thread are seeing. Without clustering, markers go straight to this.map via t.addTo(this.map), so plain .remove() works fine there, which is also consistent with what's been reported (turning clustering off "fixes" it).

There's also a secondary gap: nothing in performUpdate watches enableClustering, so toggling that property at runtime won't rebuild the cluster either, it's simply not handled after initial render.

6

Thank you for pointing to the actual problem. The solution is to also remove the marker from the layer used by the cluster. The performUpdate now also watches the enableClustering and rebuilds the marker layers.

Update: dmxLeafletMaps.zip (14.9 KB)