Page MenuHomePhabricator

Proof-of-concept: Integrate leaflet clustering with the Nearby layer
Closed, ResolvedPublic8 Estimated Story Points


This task is complete when we have proof-of-concept code to demonstrate clustered nearby markers.

Note: this task is only about implementing for the nearby markers and not user-added markers. This will be done as follow-up work once the we have pin grouping fully working for show nearby pins.

Out of scope:

  • No style specification. Use all default settings for the POC.


  • How is Wikivoyage legacy Nearby clustering implemented?
  • Clustering is recalculated whenever the list of articles changes.
  • TBD: What happens when clicking on a cluster? Is this out of scope?
  • Leave a screenshot on this task.

Event Timeline

ECohen_WMDE set the point value for this task to 8.Sep 28 2022, 4:36 PM

Agreed in story time to timebox and review the feature's prioritization if it seems that it will take more time than that.

Change 841462 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/Kartographer@master] [PoC] Use leaflet.markercluster for nearby feature

How is Wikivoyage legacy Nearby clustering implemented?

The Wikivoyage implementation uses the Pruncluster library that works together with Leaflet to cluster markers. It's supposed to be lightweight and fast. The downside seems to be, that each marker object needs to be created with the included constructor for markers. So it's not automatically "just" taking existing Leaflet markers and clusters them. Also it's last release is from 2017 and it seems not very well maintained.

In the PoC patch uploaded I used the Leaflet.markercluster library that seem to be the default for clustering markers on with Leaflet and is more actively maintained.

TBD: What happens when clicking on a cluster? Is this out of scope?

Leaflet.markercluser allows either zooming in on click or expanding to a kind of spider web. I'll attach a screenshot. The former one feels quite weird with our current implementation because we add and remove markers when we zoom. So it can happen that the user clicks to "expand" two markers and then he finds himself in front a new cluster with even more points because more stuff got loaded. The PoC goes for the latter implementation. But it's a simple setting that can easily be changed.

Leave a screenshot on this task.

T318702-v1-optimized.gif (600×900 px, 1 MB)

Note: The Popups still need to be re-wired in the final implementation. They are not working in the PoC. That's why it's not demoed here.


  • Is adding Leaflet.markercluster reasonable? Or should be try to adapt to Prunecluster?
  • Any other thoughts on the approach? What about the habit to copy the lib files during the build step?

@WMDE-Fisch Have you looked into the pin grouping used in the Places tab of the iOS app at all? I think the balance is working quite well there (when to group, how many to group, zooming). Can we either use that library or check their variables to re-use?

Change 841462 abandoned by WMDE-Fisch:

[mediawiki/extensions/Kartographer@master] [PoC] Use leaflet.markercluster for nearby feature


PoC not needed anymore