Multiple markers on the exact same position on a L

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 there's a fair bit of divergence based on commits between the two so YMMV.

FWIW I'm using the original.

Answer 3

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',
});