All geek questions in one place

The size of the images in the Cloudmade pop-ups does not seem to be counted to determine the size of the pop-up


I find it difficult to overcome the problem that I encountered using the Leaflet library on the Mapbox. In particular, I wrote the code so that the pop-up window would be associated with each icon / marker on the map. Inside each popup there is an image that links to another website. Unfortunately, it seems that this image size is not taken into account when calculating the size of the actual pop-up window having the following consecuences:

My code is as follows:

<?php // Retrieves info from all correct rows in database to further input in javascript while ($row = mysql_fetch_assoc($get_info)){ $name = $row ['nombre']; $lat = $row ['lat']; $long = $row ['long']; echo "<script type=\"text/javascript\"> var latlng = new L.LatLng(".$row ['lat'].", ".$row ['long']."); var flyer = \"<a href='boliches/pdnws/".$row ['nombre'].".php'><img src='boliches/flyers/".$day."/".$row ['nombre'].".jpg'/></a>\"; var MyIcon = L.Icon.extend({ iconUrl: 'boliches/icons/".$row ['nombre'].".png', shadowUrl: null, iconSize: new L.Point(50, 50), shadowSize: null, iconAnchor: new L.Point(25, 25), popupAnchor: new L.Point(1, 1) }); var icon = new MyIcon(); var marker = new L.Marker(latlng, {icon: icon}); map.addLayer(marker); marker.bindPopup(flyer, {maxWidth:800, autoPan:true}); </script>"; } ?>

Can you think of a possible solution to this? I'm afraid that I start to start when programming comes, but there were too many days without being able to crack this one. I really appreciate your help! Thank you very much!

+4
source share
3 answers

Creating a new item through Dom and using this as the popup content in bindPopup() worked for me when I had problems with this.

Although the document is not documented, the source code shows that this method can accept the Dom node as content, rather than a line containing markup.

Using this method resulted in the correct size of the popup when clicked.

Example:

 var divNode = document.createElement('DIV'); divNode.innerHTML = '<p>My custom HTML <img src="..." /></p>'; marker.bindPopup(divNode);
+4
source

It seemed to me really a trick

 .leaflet-popup-content { width:auto !important; }

Found this link

+6
source

I am the author of lithography. The problem is that the Popup code does not know the size of the image of its content at the moment when it calculates the required size. The best solution would be to specify the width and height of each image inside the popup manually ( <img width="100" ... /> ), but if you cannot determine the size, a somewhat hacky solution would be something like this:

 function onPopupImageLoad() { marker._popup._update(); } var images = marker._popup._contentNode.getElementsByTagName('img'); for (var i = 0, len = images.length; i < len; i++) { images[i].onload = onPopupImageLoad; }
+3
source

Source: https://habr.com/ru/post/1416075/

More articles:


All Articles