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.
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 center of the "spider ). ( I just confirmed, that that's the case )
- 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.
