leaflet-overlappingmarkerspiderfied

by muris2016

HTML

<script src="https://unpkg.com/jquery@latest/dist/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/MarkerCluster.css">
<link rel="stylesheet" href="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/MarkerCluster.Default.css">
<script src="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/leaflet.markercluster.js"></script>
<script src="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/example/realworld.10000.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js"></script>
<div id="map"></div>

CSS

#map {
  height: 480px;
}

JavaScript

const points = [
  L.latLng(51.2277, 6.7735),
  L.latLng(51.2277, 6.7735),
  L.latLng(51.2277, 6.7735),
  L.latLng(51.2277, 6.7735),
  L.latLng(51.2277, 6.7735),
  L.latLng(51.2277, 6.7735),
  L.latLng(51.2277, 6.7635),
  L.latLng(51.2277, 6.7635),
  L.latLng(51.2377, 6.7735)
];
const osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

const map = L.map('map', {
  center: points[0],
  zoom: 13,
  layers: [osm]
});

const oms = new OverlappingMarkerSpiderfier(map, { keepSpiderfied: true });

points
  .map((p, i) => L.marker(p).bindPopup(`marker${i}`))
  .forEach(marker => {
    map.addLayer(marker);
    oms.addMarker(marker);
  });

oms.addListener('spiderfy', (markers) => {
  console.log('spiderfy');
  map.closePopup();

  markers.forEach(marker => marker.setIcon(createIcon()));
});

oms.addListener('unspiderfy', (markers) => {
  console.log('unspiderfy');
  // map.closePopup();

  markers.forEach(marker => marker.setIcon(createIcon()));
});

// lengthen the spider's leg by 4x
oms.circleFootSeparation = 100;

forceUnspiderfy();

////////////

function createIcon(color = 'blue') {
  return new L.Icon({
    iconUrl: `https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
    // shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
    shadowUrl: 'https://googlemaps.github.io/js-marker-clusterer/images/m5.png',
    //shadowUrl: 'https://image.ibb.co/nQrYGc/overlapping_markers.png',
    //shadowUrlRetina: 'https://image.ibb.co/h8jnbc/overlapping_markers_2x.png',
    //shadowAnchor: [20.5, 41],
    popupAnchor: [1, -34]
  });
}

function forceUnspiderfy() {
  // workaround for https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet/issues/32
  oms.getMarkers().forEach(marker => oms.spiderListener(marker));

  oms.unspiderfy();
}