Multiple markers on the exact same position on a Leaflet map

Question

We use leafletJS to show maps with round about 100 markers. Some of these markers are located on exact the same position. Marker2 is above Marker1 so Marker1 isn't visible. Is there a way to rotate Markers in a way that you can see there are more then one marker?

Answer 1

may be you should look at https://github.com/Leaflet/Leaflet.markercluster plugin here demo - http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html

Answer 2

The drawback with walla's answer is that Leaflet.markercluster requires clustering, which may not be an option depending on your requirements i.e. you need to always display individual markers.

OverlappingMarkerSpiderfier-Leaflet (a bit of a mouthful) works well in this case and it's fairly well documented. It displays a 'spider' of markers on click only if they overlap i.e. if the zoom level increases so markers don't overlap, then it won't 'spider' on click, which is quite nice. Demo.

It's available as a NPM package but it isn't a proper ES module, so usage is a bit trickier than usual if you're expecting an ES module:

// Need to specifically import the distributed JS file
import 'overlapping-marker-spiderfier-leaflet/dist/oms';
    
// Note access to constructor via window object
// map refers to your leaflet map object
const oms = new window.OverlappingMarkerSpiderfier(map);
    
oms.addListener('click', (marker) => {
  // Your callback when marker is clicked
});
    
// Markers need to be added to OMS to spider overlapping markers
markers.forEach((marker) => {
  oms.addMarker(marker);
});
// Conversely use oms.removeMarker(marker) if a marker is removed

Alternatively there is a forked version (confusingly) called OverlappingMarkerSpiderfier that is a proper ES module so you can do:

import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier'
const oms = new OverlappingMarkerSpiderfier(map);

However as of 24 Jan 2020 there's a fair bit of divergence based on commits between the two so YMMV.

FWIW I'm using the original.

Answer 3

If anyone is looking working sample for Angular below are the steps,

1. Install it via npm: npm i --save overlapping-marker-spiderfier-leaflet

2. Then import it into the component where you need it: import 'overlapping-marker-spiderfier-leaflet/dist/oms';

3. Add this line on top of the file where you import it: const OverlappingMarkerSpiderfier = (<any>window).OverlappingMarkerSpiderfier;

4. Add the oms markup like that: this.oms = new OverlappingMarkerSpiderfier(this.map, { nearbyDistance: 20, keepSpiderfied: true });

5. Add the markers to oms at the same place where you add your markers to the map so oms can track them properly this.oms.addMarker(marker);

xlm is already gave a complete answer. Thanks to him for that answer. But this is a slightly changed answer that worked for me in angular.

Answer 4

we had the same problem, follows the jsFiddle with the solution we found http://jsfiddle.net/atma_tecnologia/mgkuq0gf/2/

var marker1 = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: {
    url: image,
    size: new google.maps.Size(134,130), //different sizes
  },
  zIndex: 2, //different overlays
  title: '1º marker',
});