CODEWITHSUNDEEP
javascriptdictionaryleaflet
Sam Healey
Sam Healey

Reputation: 676

How to open leaflet marker popup from link outside of map?

I have a leaflet map with several markers on.

Each of the markers have similar html to

 <img class="leaflet-marker-icon leaflet-clickable leaflet-zoom-animated" src="leaflet/dist/images/marker-icon.png" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate(435px, 200px); z-index: 200;" title="location_1">

When the marker is clicked the popup opens above the marker.

What im trying to do is add links outside of the map, relating to each marker.

Each of the markers have a unique title. So could I just create a list of html links, with the title as an identifier such as 

 <a class="location_1">location 1</a>
 <a class="location_2">location 2</a>

Then bind these links to the corresponding marker in the leaflet map?

How would I best achieve this?

Upvotes: 13

Views: 39019

Answers (1)

abenrob
abenrob

Reputation: 886

if you add the markers to an array, it would be pretty straightforward to check them against attributes of your element.

For example:

var markers = [];
var marker1 = L.marker([51.497, -0.09],{title:"marker_1"}).addTo(map).bindPopup("Marker 1");
markers.push(marker1);
var marker2 = L.marker([51.495, -0.083],{title:"marker_2"}).addTo(map).bindPopup("Marker 2");
markers.push(marker2);
var marker3 = L.marker([51.49, -0.097],{title:"marker_3"}).addTo(map).bindPopup("Marker 3");
markers.push(marker3);

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

See it working in this fiddle

Upvotes: 33

Related Questions