How to identify Leaflet's Marker during a `popupopen` event?

Question

when a marker is clicked, I need to execute some code that finds the id corresponding to the marker being clicked , retrieves data from backend API, then adds the newly retrieved data to the content of the popup that will open.

The only way that is able to listen to a click event on the marker is

map.on('popupopen', function(e){
    // How to retrieve marker?
    // eg: Assign an id on creation, retrieve it now during popupopen
};)

How can I find out which marker this is? Is it possible to add an id attribute to each marker, then retrieve this id during the popupopen event?

Answer 1

The event object contains a "popup" attribute that has a private attribute called "_source" which is the object that the popup is bound to (i.e. the marker). Since _source is supposed to be private this doesn't seem like the right way but I'm not sure how else to do it.

map.on('popupopen', function(e) {
  var marker = e.popup._source;
});

Answer 2

Javascript objects can have any properties defined on them. Set popup.marker to the referenced marker when you create the popup. Then you can access it later in the event handler.

Answer 3

To get the marker id, you can use this code:

map.on('popupopen', function(e) {
  var marker = e.popup._source.feature.properties.markerid;
});