Question

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:

• the image is much bigger than the popup ( http://postimage.org/image/c7u0n5sx3/ )
• the autoPan option does’t work

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!

Answer 1

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);