Leaflet: opening a popup with a click event

[levelos]

Hey gang - I'm stumped as to the best way to open a popup event through a click event of a DOM object. E.g., I have a search interface with a list of results, that are also plotted on the map, and I want to open the corresponding popup when one of the results are clicked.

I see the Leaflet map object contains a list of features in _layers indexed by _leaflet_id. Is that intended to be private? How do I get at the _leaflet_id when creating a marker?

[pere]

hi levelos,

I am afraid that the _leaflet_id is assigned only after the marker is added to to the map so no change to assign this id to the created icon (as it is done before added to map)

If you are using icons for markers you could to something as I did here: https://github.com/CloudMade/Leaflet/issues/378

It will add an id to each image icon so you can track it and link to external features as you wish.

hope that helps,

Pere

[levelos]

Thanks for the reply @pere. I actually came up with a solution. You can explicitly set the _leaflet_id of a feature before adding it to a map and then that will be used instead of the auto-generated one. Just keep tabs of it in your code and do as you wish from there.

[pere]

may I ask you how did you manage to set the _leaflet_id of a feature before adding it to a map ?

is there some function in leaflet or did you have to change source code?

thanks

[levelos]

No core changes or hacking needed. E.g.:

lMarker = new L.Marker(new L.LatLng(lat, lon));
lMarker._leaflet_id = myid;
lMap.addLayer(lFeature);

[cmanza]

levelos, once you assigned 'myid' to your marker, how were you able to trigger the popup event on it?

Thanks so much.

[levelos]

Something like
... lmap._layers[myid].popup() ...

[cmanza]

Thanks.

That's what I'm trying but I can't figure out why I'm getting a map._layers[myid].openPopup() "is not a function" error.

If I'm not mistaken, openPopup() should be doing the trick.

[wfendler]

I've properly set _leaflet_id, but I'm struggling to associate that with a click event to use openPopup. @cmanza or @levelos is there a code example either of you could offer?

[cmanza]

Once you have set the layer id, you can trigger its click event by referencing it like this:

map._layers[your layer id here].fire('click');

Not that for this to work, you must have a click event bound to the layer like this:

popup = new L.Popup();

geojsonLayer = new L.GeoJSON(null, {});

geojsonLayer.on("featureparse", function (e){

    (function(layer, properties) {

        layer.on("mouseover", function (e) {
            layer.setStyle(polyHoverOver);
        });

        layer.on("mouseout", function (e) {
            layer.setStyle(polyHoverOut);
        });

        layer.on("click", function (e) {
            var bounds = layer.getBounds();
            var popupContent = "place popup content here";
            popup.setLatLng(bounds.getCenter());
            popup.setContent(popupContent);
            map.openPopup(popup);
        });

    })(e.layer, e.properties);

});

Hope this info helps you out.

[wfendler]

The map tiles wouldn't render if I reset _leaflet_id and it wouldn't give me any errors unfortunately. I've set a new property ("myId") on the marker object. The list item in the DOM has a data-marker-id attribute that I'm using to associate the two. As you can probably tell from my solution, I'm fairly new to javascript. This isn't the most elegant solution, but it works great!

$("#the-list").on("click", "li", function(event){
    var $theId = $(this).attr("data-marker-id");
    $.each(map._layers, function(i, item){
        if(this.myId == $theId){
            this.openPopup();
            console.log(map);
            map.panTo(this._latlng)
        }
    });
});