Question

122

Leaflet: adjust popup to picture size

rated 0 times [ 128] [ 6] / answers: 1 / hits: 27161 / 8 Years ago, sun, july 3, 2016, 12:00:00

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/Leaflet/Leaflet/issues/724

While that solution fixes the size of the popup, the result is shifted and the popup doesn't show up centered over the icon/marker... Any way to change that?

.leaflet-popup-content { 

     width:auto !important; 

}

screenshot

Also the other proposed solution (setting the maxWidth on the popup) doesn't help in my case. The popup width keeps on being the default width of 300px...

function pop_Fotos(feature, layer) {

     var popupContent = '<img style=max-height:500px;max-width:500px; src=...);

     layer.bindPopup(popupContent, {maxWidth: 500, closeOnClick: true});

}

screenshot

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jacie

Add To Favorites

Follow

Total Points: 490

Total Questions: 111

Total Answers: 105

Location: Mali

Member since Sat, Feb 12, 2022

2 Years ago

answered 8 Years ago jonrened · Accepted Answer

Simply specifying maxWidth: auto option on the popup seems enough…

layer.bindPopup(popupContent, {

  maxWidth: auto

});

Demo: http://jsfiddle.net/3v7hd2vx/29/

EDIT

Unfortunately, if the image is not loaded yet in browser cache, the popup will open right away with default size, and adjust its size but not its position once the image is fully loaded and displayed. As a result, the popup is shifted and its arrow is misplaced compared to the marker it is bound to.

A simple workaround is to listen to the image load event and to re-open the popup at that moment:

popupContent = document.createElement(img);

popupContent.onload = function () {

  layer.openPopup();

};

popupContent.src = path/to/image;

layer.bindPopup(popupContent, {

  maxWidth: auto

});

Updated demo: http://jsfiddle.net/3v7hd2vx/32/

EDIT 2

Here is a more general solution: capture the <IMG>'s load event on all Leaflet popups and force them to update() every time.

document.querySelector(.leaflet-popup-pane).addEventListener(load, function (event) {

  var tagName = event.target.tagName,

      popup = map._popup; // Currently open popup, if any.



  if (tagName === IMG && popup) {

    popup.update();

  }

}, true); // Capture the load event, because it does not bubble.

Demo: https://jsfiddle.net/3v7hd2vx/277/

Reference: Leaflet issue #5484 (comment)