Change Details

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 ) [x] 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. [] We should add a "refresh" button instead to reload points in the viewport. - Design tba, see open questions below. [x] We should increase the number of points loaded at once ( e.g. 100 ). [] We need to figure out what to do about the missing images in this case - Options: load images on click, load points first and images later, ... **Open design questions:** - How should the design button look like. Options: - Disable show nearby button when map is being moved so users can click it again to refresh - Display separate refreh button at the lower bar or over the map. - Leave button as is and let users disable it on their own and then click again. - 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

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 ) [x] 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. [] We should add a "refresh" button instead to reload points in the viewport. - Design tba, see open questions below. [x] We should increase the number of points loaded at once ( e.g. 100 ). [] We need to figure out what to do about the missing images in this case - Options: load images on click, load points first and images later, ... **Open design questions:** - How should the refresh button look like? Options: - Disable show nearby button when map is being moved so users can click it again to refresh - Display separate refreh button at the lower bar or over the map. - Leave button as is and let users disable it on their own and then click again. - 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

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 ) [x] 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. [] We should add a "refresh" button instead to reload points in the viewport. - Design tba, see open questions below. [x] We should increase the number of points loaded at once ( e.g. 100 ). [] We need to figure out what to do about the missing images in this case - Options: load images on click, load points first and images later, ... **Open design questions:** - How should the designrefresh button look like.? Options: - Disable show nearby button when map is being moved so users can click it again to refresh - Display separate refreh button at the lower bar or over the map. - Leave button as is and let users disable it on their own and then click again. - 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