26

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 from 2016-07-03 14 19 25

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 from 2016-07-03 14 49 15

6 Answers 6

22

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)

6
  • Hey @ghybs, thanks for your answer. However, the problem with the shifted popup persists (see my first picture in the question). The pointer of the popup is not on top of the marker anymore. Any way to handle that?
    – Klaster
    Jul 5, 2016 at 10:34
  • mm it looks like it is just a matter of image loading. You would just need to re-open the popup once the image is loaded. I will update the answer.
    – ghybs
    Jul 6, 2016 at 7:44
  • Sweet, works like charm! Thanks a lot! One noob-question remains: how do I set a max-width on that img-element? I found that I could set a width. Do I have to do it via CSS? (and which element would I be targeting? leaflet-popup-content .img ?)
    – Klaster
    Jul 6, 2016 at 14:35
  • Sorry I missed the last part of your comment. You can easily add your own class on your img element. Feel free to open a new question if you need help for this.
    – ghybs
    Jul 12, 2016 at 4:06
  • An improved solution is proposed here: stackoverflow.com/questions/51732698/…
    – ghybs
    Oct 22, 2018 at 22:07
8

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("<div id='"+myid+"'>" + mycontent + "</div>",
      {maxWidth: "auto"});
    mymap.on("popupopen", function(e){
        $("#"+myid+" img").one("load", function(){ e.popup.update(); });
    });
}
1
  • Cool approach, this works for me Apr 17 at 23:58
4

A more general and simple solution is to use html classes and the function update from popup class

On every image inside the popup add a specific class

<img class="img-in-popup" src="/path/to/img.jpg">

Then just update the popup when any image therein is fully loaded.

var map = L.map('map', mapOptions)
// add layers, etc

map.on('popupopen', function (e) {
  $('img.img-in-popup').on('load', function () {
    e.popup.update()
  })
})

Note that popup.update() will trigger several times if several images are inside the same popup, but that is not actually a problem.

2

I had a similar issue with a Leaflet based map in Drupal where I needed to update the popup after loading the images and I managed to solve this based on @frankieandshadow 's answer.

Here is the code I came up with:

$(function() {
   var mymap = Drupal.settings.leaflet[0].lMap;
   mymap.on("popupopen", function(e) {
     $(".leaflet-popup-content img:last").one("load", function() {
            e.popup.update();
         });
     });
});

2

None of the before added answers worked for me, but I came upon a quite simple solution (the link of which I can no longer find). Just wrap your image in a div:

    <div class='ppcont'><img src='yourimg.jpg' /></div>

And add a simple css rule that corresponds to the image width:

    .ppcont{width:100px;}

Now the popup should load correctly and it solves the need for updates or closing/opening again.

0

To handle this as someone with limited coding understanding I finally got the following to work for me in the output of the qgis2web plugin when exporting a map forenter code here the web from QGIS 3.10. I first made all my photos the same Width - in my case 400px.

Then in the index.html file I set a minWidth of 400px as shown below. Everything works fine.

var popupContent = '<table>\
                <tr>\
                    <th scope="row"></th>\
                    <td>' + (feature.properties['Name'] !== null ? autolinker.link(feature.properties['Name'].toLocaleString()) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2"><img src="' + feature.properties['RelPath'] + '"</td>\
                </tr>\
            </table>';
        layer.bindPopup(popupContent, {maxHeight: 700, minWidth:400});

Not the answer you're looking for? Browse other questions tagged or ask your own question.