Leaflet: adjust popup to picture size

Question

I\'m trying to include pictures in my leaflet popups, but the popup-size doesn\'t adjust to the picture size. I found a solution to this on github:

https://github.com/Le

Answer 1

• There is an update function for popups (which the doc says is for just this purpose): http://leafletjs.com/reference.html#popup-update .

• Also, an event for when a pop up is opened: http://leafletjs.com/reference.html#path-popupopen .

• And the event passed to the event handler identifies the popup: http://leafletjs.com/reference.html#popup-event-popup

My pop up content was a bit more varied than just a simple image, but the width was, of course, still affected by any the load time for images in the content (and was ok once the image was in the browser cache).

So when I hit this problem, in summary what I did using jQuery:

function addpopup(mymarker, mycontent) {
    var myid = "thismarker"; // or whatever
    mymarker.bindPopup("
" + mycontent + "
",
      {maxWidth: "auto"});
    mymap.on("popupopen", function(e){
        $("#"+myid+" img").one("load", function(){ e.popup.update(); });
    });
}