CODEWITHSUNDEEP
leafletmarkerspiderfier
LeeJS
LeeJS

Reputation: 11

How do I popup a marker inside a spiderfied layer?

I have a set of markers which I've placed on my map using spiderfier as a number of markers are collocated. I want to be able to call the .popup for one of the markers inside the spiderfied cluster, but I can't seem to find a way to do it.

In a previous version, before adding the spiderfier, I had an array of markers, which made it easy to identify the right one and call marker.popup(), but with the spiderfier on top I'm not sure how to get to the markers.

Could someone help me out?

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]
});

var markers = [];
points
  .map((p, i) => L.marker(p,{title:"marker_"+i}).bindPopup(`marker${i}`))
  .forEach(marker => {
    map.addLayer(marker);
    oms.addMarker(marker);
    markers.push(marker);
  });

function markerFunction(id){
        for (var i in markers){
            var markerID = markers[i].options.title;
            if (markerID == id){
                markers[i].openPopup();
            };
        }
    }
    
    $("a").click(function(){
        markerFunction($(this)[0].id);
    });

https://jsfiddle.net/LeeJS/1cd5pt8w/35/

Upvotes: 0

Views: 175

Answers (1)

Grzegorz T.
Grzegorz T.

Reputation: 4113

This should help. I did not use jquery, but you can probably do it yourself and replace it with the appropriate code. I added a class marker to each Marker 1 etc.

<a class="marker" id="marker_1" href="#">Marker 1</a><br />

And js

function markerFunction(id) {
  map.eachLayer(function (layer) {
    if (layer instanceof L.Marker) {
      const { title } = layer.options;
      if (title === id) {
        layer.openPopup();
      }
    }
  });
}

document.addEventListener("click", (e) => {
  if (e.target.classList.contains("marker")) {
    markerFunction(e.target.id);
  }
});

Upvotes: 0

Related Questions