12

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?

Sam Healey
  • 666
  • 2
  • 8
  • 22

1 Answers1

32

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

abenrob
  • 878
  • 10
  • 23
  • What if the links are in another page different form where the map is? Any ideas? I was thinking in use a hash on the url or something. – Vinicius Santana May 24 '14 at 09:56
  • 1
    Not sure I follow the idea - you want an external link to open the app, and fire off a specific popup? – abenrob Jun 06 '14 at 15:37