Problems getting OverlappingMarkerSpiderfier and Leaflet working

user_2613271 0
Viewed 794

I am trying to follow this demo for the leaflet plugin OverlappingMarkerSpiderfier to get overlap markers to spider out but with markers I've defined myself but cannot get it working. (I cannot get their script working either).

The code below runs and displays the two markers as I expect, however do not display the behaviour I expect (the spidering). If anyone can point me to where I am going wrong that would be appreciated. I suspect the problem is how I am adding the markers to the oms layer, or I'm not adding that layer correctly, but I've no idea how to fix that. I have not been able to find many minimal examples online to try mimic.

<!DOCTYPE html>
<html>

<head>
  <title> My Leaflet.js Map</title>

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

  <script src="oms.min.js"></script>

  <style>
    #map {
      height: 800px;
    }
  </style>

  <script type="text/javascript">
    function init() {
      let map = new L.map('map', {
        minZoom: 3,
        maxZoom: 6
      }).setView([20.91, 142.70], 5);
      let osmLink = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>"
      let osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; ' + osmLink,
        maxZoom: 18,
      }).addTo(map)

      var oms = new OverlappingMarkerSpiderfier(map);

      var popup = new L.Popup({
        closeButton: false,
        offset: new L.Point(0.5, -24)
      });
      oms.addListener('click', function(marker) {
        popup.setContent(marker.desc);
        popup.setLatLng(marker.getLatLng());
        map.openPopup(popup);
      });
      oms.addListener('spiderfy', function(markers) {
        for (var i = 0, len = markers.length; i < len; i++) markers[i].setIcon(new lightIcon());
        map.closePopup();
      });
      oms.addListener('unspiderfy', function(markers) {
        for (var i = 0, len = markers.length; i < len; i++) markers[i].setIcon(new darkIcon());
      });

      let pt1aLatLong = L.latLng(21, 142.6);
      let pt1aMarker = L.marker(pt1aLatLong, {
        title: "This is the first marker that I have added",
        alt: "A marker",
        opacity: 0.7
      }).addTo(map);

      let pt1bLatLong = L.latLng(21.1, 142.6);
      let pt1bMarker = L.marker(pt1bLatLong, {
        title: "This is a copy marker",
        alt: "A marker",
        opacity: 0.9
      }).addTo(map);
      oms.addMarker(pt1bMarker);
      oms.addMarker(pt1aMarker);

    }
  </script>
</head>
<h1></h1>

<body onload=init()>
  <div id="map"> </div>

</html>

EDIT: Typo in the code corrected

let pt1LatLong = L.latLng(21, 142.6); let pt1Marker = L.marker(pt1LatLong,

bolded section corrected to be pt1a... to match oms.addMarker command.

leaflet javascript
1 Answers

The problem was the .addTo(map) after defining each marker - this should be removed and replaced with map.addLayer(pt1bMaker)

    <!DOCTYPE html>
<html>

<head>
  <title> My Leaflet.js Map</title>

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

  <script src="oms.min.js"></script>

  <style>
    #map {
      height: 800px;
    }
  </style>

  <script type="text/javascript">
    function init() {
      let map = new L.map('map', {
        minZoom: 3,
        maxZoom: 6
      }).setView([20.91, 142.70], 5);
      let osmLink = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>"
      let osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; ' + osmLink,
        maxZoom: 18,
      }).addTo(map)

      var oms = new OverlappingMarkerSpiderfier(map);

      var popup = new L.Popup({
        closeButton: false,
        offset: new L.Point(0.5, -24)
      });
      oms.addListener('click', function(marker) {
        popup.setContent(marker.desc);
        popup.setLatLng(marker.getLatLng());
        map.openPopup(popup);
      });
      oms.addListener('spiderfy', function(markers) {
        for (var i = 0, len = markers.length; i < len; i++) markers[i].setIcon(new lightIcon());
        map.closePopup();
      });
      oms.addListener('unspiderfy', function(markers) {
        for (var i = 0, len = markers.length; i < len; i++) markers[i].setIcon(new darkIcon());
      });

      let pt1aLatLong = L.latLng(21, 142.6);
      let pt1aMarker = L.marker(pt1aLatLong, {
        title: "This is the first marker that I have added",
        alt: "A marker",
        opacity: 0.7
      })
      map.addLayer(pt1aMarker)
      oms.addMarker(pt1aMarker);

      let pt1bLatLong = L.latLng(21.1, 142.6);
      let pt1bMarker = L.marker(pt1bLatLong, {
        title: "This is a copy marker",
        alt: "A marker",
        opacity: 0.9
      })
      map.addLayer(pt1bMarker);
      oms.addMarker(pt1bMarker);


    }
  </script>
</head>
<h1></h1>

<body onload=init()>
  <div id="map"> </div>

</html>

user_26132710
Related