Map: show multiple pins on same location

[sleidig]

Sometimes, multiple records have the same address/location. On the Matching View (e.g. Child Details > Education tab > Find a suitable new school) the map should then somehow represent all records on that same location. (At the moment, it is not possible to see a second pin)

The map should somehow indicate multiple pins there and allow the user to select either one of the represented records from the map.

---

UI idea

One UI approach could be similar to this, swapping the pin with a number, if multiple records are close together. And then somehow (?) listing out all the records (we may have cases where pins are not only close to each other but really at the exact same address (e.g. registered in the same building).

Some maps support a dynamic zooming behavior for this: As you zoom in, and some pins' locations are then sufficiently far apart from each other, the bubbles change to individual pins. This would be a nice feature but we will always have some pins on the exact same location in our use case, so some numbered pins/bubbles will remain. If dynamic zoom behavior is not already provided by a library for us, we can skip this functionality for now.

---

Implementation approach:

• adapt the MapComponent (which is used both inline and in the popup and takes care of map and marker/pin logic)
• we are using the Leaflet library for the map visualization, research whether there is features or libraries that already provide the kind of advanced markers we need

[Abhinegi2]

I was researching the Leaflet library and found some plugins -

1. For clustering (where we have multiple schools in the same area), we can use Leaflet.markercluster.
2. For cases where markers overlap at the same location (e.g., multiple schools at the same point), we can use OverlappingMarkerSpiderfier for Leaflet.

Also, OverlappingMarkerSpiderfier was last updated 4 years ago, so I’m also searching for other plugins.