Page MenuHomePhabricator

Visually grouping/un-grouping markers on zoom in nearby feature
Open, Needs TriagePublic0 Estimated Story Points

Description

To be able to show more points in vicinity and have a good overview, we want to include marker clustering.

Implementation:

There seems to be a front-end library that can do the clustering. leaflet.markercluster.js, https://github.com/Leaflet/Leaflet.markercluster

  • Should work for the nearby feature or for user added feature collections on maps.
  • Nearby and normal markers should be done separately, the code is different. We will initially only apply it to the nearby feature.

Screenshot from 2023-02-02 15-25-46.png (548×647 px, 372 KB)

Demo: https://en.wikipedia.beta.wmflabs.org/wiki/Maptests#/map/5

Documentation of design decisions

  • ~ Specs for grouped markers
  • Numbered markers and grouped-count markers are styled differently to make them distinguishable from one another.
  • The pin groups will always have the same color, regardless of the colors of grouped pins within.
  • Clustering will not be an optional setting (e.g. for readers or per map).
  • When hovering a cluster marker do not show the blue shape for the coverage. showCoverageOnHover: false
  • When clicking a cluster marker automatically zoom in until the cluster can be dissolved. ( default ) It zooms to the center of the cluster area
  • Ideally we never need to show the "spider" to untangle points that are very very close. So we try to avoid clustering in most cases. maxClusterRadius: 15
  • If points are too close to show them next to each other we keep the default "spider" behavior to make them visible.
  • The points in spider should be shown as close to the center of the cluster as possible. spiderfyDistanceMultiplier: 0.8
  • We want to hide the cluster marker when we show the spider. ( currently it's blurred )
  • We want to hide the "spider legs". spiderLegPolylineOptions: { weight: 0
  • If points still overlap we want to make sure, that the most relevant points are on top ( or in the middle of the "spider ).
  • Style clustered markers according to the design spec. - T327159
  • We want to increase the number of points loaded at once ( e.g. 100 ). For this we need a solution to work around the API limit for thumbnails: Load images on click - T327656
  • Autorealoding is very confusing together with the clustering, it feels better to remove it. We should add a "refresh" button instead to reload points in the viewport - T327097

Open questions

  • Should we change the cluster radius to prevent overlaps? See comment.
  • We are not limited by the API call anymore because we load each image when popup opens. Should we increase the number of points we load further?
  • Design: When we’re highlighting a specific marker and then zoom out, should the marker be kept out of the clustering? (and styled in some special way?) - low prio, current behaviour: the marker is being included in a cluster at some point.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Note for devs: Currently the nearby feature is storing points with a hash that might throw away points that have the exact same coordinate. With the clustering these points can be explored nevertheless so we should adjust the hashing.

awight added a subscriber: awight.

This task is still in preparation--tech work should be limited to investigations into the existing Leaflet clustering and how to integrate with our nearby layer, but without making any UX assumptions.

Should we change the size of the clustered markers to be proportional or log-proportional to the number of pins it represents? The library defaults to using different colors (green-yellow-red scale) to represent the count.

What happens when clicking on a clustered marker? Do the individual pins appear? Does the map automatically zoom in?

awight set the point value for this task to 0.Sep 29 2022, 1:29 PM

For the POC it would be great to collect all these questions as they come up and just implement the default for now. (Or maybe that's what you were doing here @awight ?)

@ECohen_WMDE thanks, I should have been more clear that these questions weren't blockers, but just things that came to mind as devs were discussing a POC. Maybe we should use the story time doc instead?

@awight I don't mind where it is. Here or in story time is fine for me. Would just like to agree on a location where they can be collected and I can go through them all at once when I'm back to working on the design of the pin grouping. If there are any which are needed for the POC, then please mark those as well.

Lena_WMDE renamed this task from Visually grouping/un-grouping markers on zoom to Visually grouping/un-grouping markers on zoom in nearby feature.Jan 4 2023, 1:27 PM
Lena_WMDE updated the task description. (Show Details)

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

[mediawiki/extensions/Kartographer@master] [WIP] Tweaks for the cluster behavior

https://gerrit.wikimedia.org/r/875952

WMDE-Fisch added a subscriber: Lena_WMDE.

Note the bigger update to the specs after a review with @Lena_WMDE . These can of cause still be discussed and adjusted.

Change 881896 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Remove auto-refresh feature

https://gerrit.wikimedia.org/r/881896

Change 881897 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Reduce duplicate title filtering down to a single Set

https://gerrit.wikimedia.org/r/881897

Change 881898 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Reduce tracking of layers per zoom to a single layer

https://gerrit.wikimedia.org/r/881898

Change 882570 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Extract mwApi() helper method

https://gerrit.wikimedia.org/r/882570

Change 882571 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Load thumbnails on click only

https://gerrit.wikimedia.org/r/882571

Change 882574 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Cache thumbnail API responses

https://gerrit.wikimedia.org/r/882574

Change 882586 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Fetch up to 50 thumbnails in 1 API request

https://gerrit.wikimedia.org/r/882586

Change 882587 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Fix caching of features with no title

https://gerrit.wikimedia.org/r/882587

Change 875952 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Nearby: Tweaks for the cluster behavior

https://gerrit.wikimedia.org/r/875952

Change 882570 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Nearby: Extract mwApi() helper method

https://gerrit.wikimedia.org/r/882570

Change 882587 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Nearby: Fix caching of features with no title

https://gerrit.wikimedia.org/r/882587

While adding the reload button (T327097) I played around a bit with the setting maxClusterRadius. The issue was that due to the low number we chose (15 instead of the default 80), some clusters overlapped with other clusters or single points.

Screenshot from 2023-02-02 15-58-47.png (120×200 px, 14 KB)

I tested different higher values and found that 50 works fine (click to view screencast).

Peek 2023-02-02 15-56.gif (795×1 px, 1 MB)

What do you think, @ECohen_WMDE? I am also happy to demo different settings.