5

I want to insert an image in a popup when I click on a layer. I'm successfully using Leaflet-pip but when I want to display an image I've always have undefined. My url is stored in a postgres database.

myLayer.on('click', function(a){
        var match = leafletPip.pointInLayer(a.latlng, myLayer, false);
        if (match.length) {
            popUpText = '';         
            for (var i = 0; i < match.length; i++) {
                popUpText += '<div align="center"><b>';                 
                popUpText += match[i].feature.properties.name + '</b></div><br>';
                popUpText += '<div align="center">' + match[i].feature.properties.photo + '</div><br>';             
            popUpText += '';
            }
        }
        var popup = L.popup().setLatLng(a.latlng).setContent(popUpText).openOn(map);
});

My field photo looks like this 

'<img src="https://static.pexels.com/photos/189349/pexels-photo-189349.jpeg" height="150px" width="150px"/>'

How can I solve this ?

Improve this question

1 Answer 1

Reset to default
5

Here is an example of the formatting just using an on-click, Note the popup is already a div, so you don't really need more divs in it.

var popup = L.popup();

var photoImg = '<img src="https://static.pexels.com/photos/189349/pexels-photo-189349.jpeg" height="150px" width="150px"/>';

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("<center>My Photo </center>" + "</br>"+ photoImg)
        .openOn(mymap);
}

mymap.on('click', onMapClick);
Improve this answer
5
  • Ok with this but in my case, each feature have is own image, stored on in a field feature.properties.photo, a static div can't be the answer. Furthermore leaflet-pip alows to find overlays polygons with match[i].
    – GeoGyro
    Commented Dec 14, 2017 at 13:54
  • I use photoImg as the value for match[i].feature.properties.photo, Either should work. I would use console.log(match[i].feature.properties.photo) to make sure your photos are being defined. If they are this should work. One of my internal pulls pictures for popup this way. '<img src="' +e.target.feature.properties.Picture +'" style="width:auto; max-width:200px;max-height:200px;">';
    – Bill Chappell
    Commented Dec 14, 2017 at 14:16
  • Why not var photoImg = '<img src="'+match[i].feature.properties.photo +'" style="width:auto; max-width:200px;max-height:200px;">'; ? console.log(match[i].feature.properties.photo); returns me TypeError: match[i] is undefined
    – GeoGyro
    Commented Dec 14, 2017 at 14:48
  • Stepping back a second, you have a poly layer (myLayer) and you want an image in a popup. Normally this is defined in the layers onEach function as a normal popup. However this looks like you have a layer with overlapping polygons and you are using the pip plugin to open a popup for each of the overlapping polygons in that layer? If pip is not returning the photo I would expect it's also not returning the name and it's really a pip issue not a photo display. Can you clear this up for me?
    – Bill Chappell
    Commented Dec 14, 2017 at 16:35
  • You enlightened me : pip is ok but I forgot to call the field photo in my sql querie when I create the layer. Now it works great.
    – GeoGyro
    Commented Dec 14, 2017 at 17:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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