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.
**Documentation of design decisions:**
- ~ [[ https://www.figma.com/file/FdNNrlfzUNRRj8sRP5Ud0B/Assorted-Kartographer?node-id=603%3A4384&t=z7FGd40mCJEwhlbg-0 | 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).
**Tweaks to the clustering:**
[x] When hovering a cluster marker do not show the blue shape for the coverage. `showCoverageOnHover: false`
[x] When clicking a cluster marker automatically zoom in until the cluster can be dissolved. ( default ) It zooms to the center of the cluster area
[x] 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`
[x] If points are too close to show them next to each other we keep the default "spider" behavior to make them visible.
[x] The points in spider should be shown as close to the center of the cluster as possible. `spiderfyDistanceMultiplier: 0.8`
[x] We want to hide the cluster marker when we show the spider. ( currently it's blurred )
[x] 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 ).
[x] Autorealoding is very confusing together with the clustering, it feels better to remove it.
[x] We should increase the number of points loaded at once ( e.g] Style clustered markers according to the design spec. 100 ).
[] Load images on click to work around the API limit for thumbnails - T327656159
[] We should add a "refresh" button instead to reWe want to increase the number of points load points in the viewported at once ( e.g. 100 ). For this we need a solution to work around the API limit for thumbnails: Load images on click - T327097656
[] Style clustered markers according to the design specAutorealoding 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 - T327159097
**Open questions:**
- If points still overlap how do we want to make sure, that the most relevant points are on top?
- 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.
Demo:
https://en.wikipedia.beta.wmflabs.org/wiki/Maptests#/map/5