Handling multiple data points at the same location

[amotl]

Introduction

Within #27, @sekomarek asked for grouping values from different circles at the same location within a single popup.

When investigating the nitty gritty details about this, we found there is more to it. The main question is how to assign the circle size and circle color attributes as well as how to handle clickthrough-links when measurements from e.g. two different sensors should be rendered at the very same location.

cc @d-roet, @wetterfrosch

[amotl]

Research

When searching the web for "leaflet display two points at the same location", this yields different suggestions.

• Clustering through https://github.com/Leaflet/Leaflet.markercluster
• Spidering through https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet
• Stacking through https://github.com/IvanSanchez/Leaflet.Marker.Stack

Evaluation

Personally, I like the "stacking" approach most as it will give us the opportunity to color the stacked chips appropriately and distinctively. I don't see that for clustering and spidering. However, I don't see a way to bind popups to these chips yet, which is required for the original feature request #27.

References

• https://gis.stackexchange.com/questions/84520/how-to-display-a-popup-for-two-points-which-have-same-longitude-and-latitude/84671
• https://stackoverflow.com/questions/22168558/multiple-marker-on-exact-same-position-on-a-leaflet-map/22173475
• https://stackoverflow.com/questions/50813139/leaflet-map-with-multiple-marker-on-exact-same-position
• https://www.drupal.org/project/leaflet/issues/1863318
• https://carto.com/blog/stacking-chips-a-map-hack/

[d-roet]

@amotl Thanks a lot for investigating this further. I also prefer the stacking solution, it's visually clear the points are at the same location.

In https://carto.com/blog/stacking-chips-a-map-hack/ they show at the bottom that when you have a very high zoom level the stacks get an (artificial) Y-offset. Would that be a possibility?