Change Details

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. {F36699599} Demo: https://en.wikipedia.beta.wmflabs.org/wiki/Maptests#/map/5 === 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). [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] Style clustered markers according to the design spec. - T327159 [x] 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 [[ https://phabricator.wikimedia.org/T308227#8582400 | 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.

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. {F36699599} Demo: https://en.wikipedia.beta.wmflabs.org/wiki/Maptests#/map/5 === 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). [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] Style clustered markers according to the design spec. - T327159 [x] 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 [x] 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 [[ https://phabricator.wikimedia.org/T308227#8582400 | 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.