Leafletjs how to get active pop / marker handle

Question

I want to be able to modify the contents of a popup on a leafletjs map. I have hundreds of markers with my popup, they are loaded into the for loop from the array.

var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title }); marker.bindPopup('<img width="'+width+'" height="'+height+'" src="'+a[3]+'"/><br><div id="weather"> <button type="button" onclick="weatherload(\''+a[0]+'\',\''+a[1]+'\')">Click Me for Weather!</button></div>',{'maxWidth':'500','maxHeight':'350','minWidth':'350'}); CAMlayer.addLayer(marker); 

This creates a popup with an image and a button. When the button is pressed, I want the button to disappear if it was replaced by a bootable gif. While the AJAX function requests a break for several things, once it receives data from the server, it must change the content again. I can do all this from id to div, but this breaks the redistribution of the popup that I would like to work.

 myPopup._updateLayout() 

can be used to make it resize, but how can I tell what myPopup is for?

I understand setContent is the right way to update a popup, but again, how do I tell which popup is active, what do I want to work on?

How to detect a marker during a popupopen event? This looks promising, but I did not understand how to use the identifier, which set this method to change the pop-up content.

for grammar.

Answer 1

You will have several options for saving a link to a pop-up window that contains a button with it pressed.

They are "light" (for your case, when you fill the pop-up content with plain HTML text, including your HTML button), it would save the display of each pop-up / marker, the keys being a kind of identifier, then pass this identifier to your weatherload function.

If you keep the link to the marker only, you can get a popup using the getPopup() method .

 var allMarkersMap = {}; var currentID = 0; // Create a marker with a popup. var button = '<button onclick="weatherload('+ lat + ',' + lng + ',' + currentID + ')">Click Me for Weather!</button>'; var marker = L.marker(lat, lng).bindPopup(permanentContent + button); marker.myPermanentContent = permanentContent; allMarkersMap[currentID] = marker; currentID += 1; // Loop to create more markers. function weatherload(lat, lng, markerID) { var marker2 = allMarkersMap[markerID]; var permanentContent2 = marker2.myPermanentContent; var popup = marker2.getPopup(); // Use this to add your loading GIF. Do the same in your AJAX callback. popup.setContent(permanentContent2 + newContent); } 

A more complicated solution (but which gives you more control) is to create HTML elements that will appear in your popup. This way you can directly link your popup as a property of your button.

Demo: http://jsfiddle.net/ve2huzxw/95/