Leaflet: IMG extends out of Popup on initial load and autoPan does not update

[Sven74Muc]

I'm using MapMarker Pro which is using Leaflet and having an issue. MapsMarkers Pro support assumes that it is an Leaflet DOM issue because it happens only on the first click on a marker and they are only using internal leaflet parameter.

You can see the issue at maps.sven-esser.de/bikemap or in full screen at http://maps.sven-esser.de/maps/fullscreen/layer/1/

Clossing the marker and opening another or the same marker again the issues is gone. After reloading the page the issue is back.

I did the following:

1. Setup a new subdomain under maps.sven-esser.de
2. Setup an entire new Wordpress
4. Setup a fresh MapsPro installation
5. Setup one layer (100% with, 600px hight) and one marker (map size 100% with, 600px hight)
6. Create a site with the layer included maps.sven-esser.de/bikemap

For CSS of the marker pop-up I set
maxWidth (px): 600 maxHeight (px): 300 CSS for images in popups: max-width:234px !important; height:auto; width:auto !important;

Result Fault_a: Popup is too much on the top of the map

Changed CSS
max-width:234px !important; height:auto; width:auto !important;
to
max-width:600px !important; height:auto; width:auto !important;

Result Fault_b: Pobup is too much on the top of the map AND popup is to small for image

As written it's just the first click on each marker in a map, on the second click everything is working till I reload the page.

[Sven74Muc]

I'm reporting a bug, not asking for help
I've looked at the [documentation]
I'm sure this is a Leaflet code issue because MapsMarker Pro is only using internal leaflet parameter

[ghybs]

See:

• SO: Adding an image inside popup content with Leaflet
• SO: Leaflet: adjust popup to picture size

[perliedman]

Thanks @ghybs, those are two good questions and answers. You are correct, the problem is that Leaflet doesn't know the size of the image until it's loaded.

You can either specify the image size directly if you know it beforehand, or you can listen for the image's load event and call the popup's update() method once it has loaded.

Given that Leaflet allows arbitrary content in popups, it can't know when its size changes, so this needs to be handled by the code creating the content. I'm going to close this, since I do not believe it's a bug in Leaflet, but that should be handled by the application, in this particular case MapMarker Pro.

[Sven74Muc]

Thanks so much @perliedman !!! load event and update() methode is the solution... and so easy I think

[Sven74Muc]

Ok, unfortunately "Leaflet MapsMarker Pro" doesn't look that they get it solved. They talk about side effects...

However, I think what perlidman described couldn't be so difficult. It sounds it is very easy for a programmer... unfortunately I'm not a programmer.
It's Sunday and I have time :-) Is here anyone who can help me that I can do the changes by my own without the plugin provider?

Just try to find out where the procedure for opening the pop-up is placed. Think that's the first step.

[Sven74Muc]

Here's the js part which opens a popup. Am I right that there needs something to be placed at the beginning? My understanding is that right now 1. is the click and then the popup opens. This needs to be changed to 1. click 2. load event & update() method needs to be called and then the popup opens. Right?

[Sven74Muc]

Or do I need to change something here at the onclick?

[Sven74Muc]

The entire file you can download here:

https://www.mapsmarker.com/docs/how-to-install-the-plugin/

...its inc/showmap.php within the downloadable pro version (zip file)

[robertharm]

@ghybs @perliedman thanks for helping one of our plugin users, although this is not your job.

We try to handle all plugin related questions and issues in our internal helpdesk & only open leaflet issues ourselves if we are 100% sure that it is not caused by our code (and can be reproduced with a native Jsfiddle setup).

[ghybs]

Hi @robertharm,

Sorry I do not know this plugin and I do not know how to play with it.

However it seems to me that this type of issue could be addressed for good by globally capturing the <IMG>'s "load" event on all popups and forcing them to update() every time…

If you have only 1 Popup open at any given time, and it has at most 1 <img> element:

document.querySelector(".leaflet-popup-pane").addEventListener("load", function (event) {
  var tagName = event.target.tagName,
      popup = map._popup; // Last open Popup.

  if (tagName === "IMG" && popup && !popup._updated) {
    popup._updated = true; // Assumes only 1 image per Popup.
    popup.update();
  }
}, true); // Capture the load event, because it does not bubble.

Example: https://jsfiddle.net/3v7hd2vx/2197/

For a more complex workaround (i.e. for arbitrary number of images in Popup, and multiple Popups open simultaneously), see that post on SO:
https://stackoverflow.com/questions/51732698/leaflet-popup-update-resizing-solution-recreating-a-popup-everytime-unable/51749619#51749619

[ghybs]

Other similar issues: https://github.com/Leaflet/Leaflet/issues/250, https://github.com/Leaflet/Leaflet/issues/2458