Multiple markers - Same coordinates - mapbox

Question

I'm having some troubles trying to display 2 different markers placed at exactly the same coordinates.
The case is: we are displaying stores, and some of them are placed at the same building (ie. a mall), so, they are different stores but shares the same ubication/coordinates.
Our json source content looks like this:
{
"properties" : {
"id" : "1",
"name" : "Store 1"
},
"geometry" : {
"coordinates" : [-70.66667, -33.45],
"type" : "Point"
}
},
{
"properties" : {
"id" : "2",
"name" : "Store 2"
},
"geometry" : {
"coordinates" : [-70.66667, -33.45],
"type" : "Point"
}
}
The thing is, just one of them gets displayed.
My question is, is there an out of the box solution for this use-case? Or should we implement our own solution ?
Thanks in advance!

Answer 1

If you are using the Marker class from mapbox-gl, you can just apply standard CSS transform to offset the marker.
Another solution would be something refered to as "spider marker":
https://bewithjonam.github.io/mapboxgl-spiderifier/docs/index.html
https://github.com/bewithjonam/mapboxgl-spiderifier

Answer 2

One solution is setting an offset to the markers with same coordinates. This will put markers with same coordinates at the same height next to each other:
for (const marker of markers) {
// get all markers with the same coordinates
const sameMarkers = markers.filter(m => m.lat === marker.lat && m.lon === marker.lon);
// if there is more than one marker with the same coordinates
if (sameMarkers.length > 1) {
// get the index of the current marker
const index = sameMarkers.indexOf(marker);
// calculate the offset for the current marker
const offset = 32 * (index - (sameMarkers.length - 1) / 2);
// set the offset
marker.setOffset([offset, 0]);
}
}