I'm having a hard time getting around a problem I came across while using Leaflet's library on a Mapbox map. Specifically, I've written the code so that a popup is bind to each icon/marker on the map. Inside each popup there's an image that links to a different website. Unfortunately it seems that this image's size doesn't count towards the calculation of the size of the actual popup, having the following consecuences:
My code is the following:
<?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 I'm quite a beginner when in comes to programming, but it's been too many days without being able to crack this one. I really appreciate your help! Thank you so much!
This seemed to really to the trick for me
.leaflet-popup-content {
width:auto !important;
}
Found at this link
Creating a new element via the Dom and using that as the content of the popup in bindPopup()
worked for me when I had problems with this.
Although not documented a look at the source code reveals that this method can take a Dom node as the content, instead of a string containing the markup.
Using this method resulted in the popup being sized correctly when clicked.
Example:
var divNode = document.createElement('DIV');
divNode.innerHTML = '<p>My custom HTML <img src="..." /></p>';
marker.bindPopup(divNode);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With