Leaflet: Add a link to the markers

Question

Pretty simple question: How can I make the map markers in Leaflet clickable and route the user to an other page? Every marker has its own page.

I've tried the following without success; somehow all the markers point to the same page, which is the last assigned URI.

var markers = [
    { coords: [51.505, -0.09], uri: '/some-page' },
    ...
];

for(x in markers)
{
    L.marker(markers[x].coords).on('click', function() {
        window.location = markers[x].uri;
    }).addTo(map);
}

This issue is really driving me nuts.

Ivar · Accepted Answer · 2012-12-24T10:39:28.460

10

Okay, I finally came to a solution; when a marker is added to the map it gets assigned an ID called "_leaflet_id". This can be fetched through the target object, and also set to a custom value after it has been added to the map.

So the final solution is simply:

var x = markers.length;

while(x--)
{
    L.marker(markers[x].coords).on('click', function(e) {
        window.location = markers[e.target._leaflet_id].uri;
    }).addTo(map)._leaflet_id = x;
}

(I replaced the for-in loop with a reversed while loop)

edited Dec 24 '12 at 10:39

answered Dec 19 '12 at 15:38

Ivar

4,344
6
38
53

You shouldn't use a `for..in` loop to iterate arrays. Also, you're leaking `x` into the global scope; use `var`. – josh3736 Dec 23 '12 at 18:22

score 3 · Answer 2 · answered Dec 23 '12 at 18:14

3

You could also use a popup which can display HTML

marker.bindPopup(htmlString);

answered Dec 23 '12 at 18:14

dnns

180
6

1

True, but then the user has to click two times instead of one. – Ivar Dec 24 '12 at 10:35
2

Map markers usually don't open a new URL, so a popup would be the preferred way. You could trigger it automatically, and it'll just display, or on hover. The user should know what is going to happen when they interact with the objects you give them, otherwise you get frustrated users. – knownasilya Apr 08 '13 at 13:59

score 3 · Answer 3 · answered Aug 18 '15 at 09:00

i found a similar code which may help you. here is jsfiddle link http://jsfiddle.net/farhatabbas/qeJ78/

 $(document).ready(function () {
        init_map();
        add_marker();
    });
    var map;

    function init_map() {
        map = L.map('map').setView([37.8, -96], 4);
        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);
    }

    function add_marker() {
        var points = [
            ["P1", 43.059908, -89.442229, "http://www.url_address_01.com/"],
            ["P2", 43.058618, -89.442032, "http://www.url_address_02.com/"],
            ["P3", 43.058618, -86.441726, "http://www.url_address_03.com/"]
        ];
        var marker = [];
        var i;
        for (i = 0; i < points.length; i++) {
            marker[i] = new L.Marker([points[i][1], points[i][2]], {
                win_url: points[i][3]
            });
            marker[i].addTo(map);
            marker[i].on('click', onClick);
        };
    }

    function onClick(e) {
        console.log(this.options.win_url);
        window.open(this.options.win_url);
    }

Leaflet: Add a link to the markers

3 Answers3

Linked