CODEWITHSUNDEEP
javascriptleaflet
taellipsis
taellipsis

Reputation: 69

How to show same popup when click or hover leaflet marker?

I have code like this, i want to show 'result[key][16]' in each marker but hover popup always show the last data from json different from clicked popup whereupon can show 'result[key][16]' for its own marker data, i want to make hover popup show according to its own data. What should i do guys? Sorry for my poor english. Thank youu

$.ajax({
    url: "test.json",
    dataType: "JSON",
    type: "GET",
    success: function (result) {
        var popup = 'Code : ' + result[key][16];

        L.marker([result[key][1], result[key][2]], {
            icon: ikon
        }).addTo(layertest).on({
            click: showFunction.bind(null, i),
            mouseover: function (e) {
                layerPopup = L.popup({
                        closeButton: false,
                        className: 'hover'
                    })
                    .setLatLng(e.latlng)
                    .setContent(result[key][16])
                    .openOn(map);
            },
            mouseout: function (e) {
                map.closePopup(layerPopup);
            }
        }).bindPopup(popup);
        i=i+1;
    }
})

Upvotes: 2

Views: 176

Answers (1)

Falke Design
Falke Design

Reputation: 11338

You can use the popup content of the popup which is connected with the marker over bindPopup -> e.target.getPopup().getContent():

layerPopup = L.popup({
                        closeButton: false,
                        className: 'hover'
                    })
                    .setLatLng(e.latlng)
                    .setContent(e.target.getPopup().getContent())
                    .openOn(map);

https://jsfiddle.net/falkedesign/ktfghvyu/

Upvotes: 1

Related Questions