Updating popup of a Leaflet Polygon

Question

I am trying to update a popup for a polygon that I have drawn with Leaflet.Draw. Now I understand that to set a popup to a layer I just created, it's all fine. I can also get the id of that layer I just created using the L.stamp(my_layer).

Let's say I create 3 layers: A, B and C. Each of them has their stamp id stored in my database. Now let's say at some point I want to bind  a popup to layer C. How do I access that layer C when I click on it and bind the popup to C only?

Kyros Koh · Answer

I understand that you have stored your "stampID" in your database.

I suggest you to put the stampID into each of the GeoJSON layer as a FeatureCollection  Properties Name or something that you can alter which has been created from Leaflet.Draw.

Assuming that you have that done. Probably you can make use of this syntax if it is set as FeatureCollection Properties Name, for example: layer.features.properties.name

You also can use this Leaflet Method:

layergroup: https://leafletjs.com/reference-1.3.4.html#layergroup
layergroup's getLayer:
https://leafletjs.com/reference-1.3.4.html#layergroup-getlayer
featuregroup: https://leafletjs.com/reference-1.3.4.html#featuregroup

Stefan · Answer

Assuming that you add the drawn layers to a drawnLayers L.FeatureGroup(), you can bind a listener to those polygons and then bind popups on click:

//event function
function onclick(e) {
  e.layer.bindPopup('A popup!');
}

//bind listener to layers
drawnLayers.once("click",onclick) //fires only for the first polygon you click on
                                  //drawnLayers.on("click",onclick) would fire always when you click on the polygon

I have modified an existing jsfiddle to include this code snipped: https://jsfiddle.net/5t1vpy4n/

Updating popup of a Leaflet Polygon

2 Answers

Add your own answers!

Ask a Question