1

I am a novice in using leaflet, I exported my map layers from QGIS to a working Leaflet map. I am trying to modify the popup to use the attribute so as to get an image popup. i am however stuck as i have read documentation but still unsure. Any leads will help. Currently my popup does a get feature info to show the following.

function pop_dwelling(feature, layer) {
                                        var popupContent = '<table><tr><th  scope="row">house_numb</th><td>' + Autolinker.link(String(feature.properties.house_numb)) + '</td></tr><tr><th  scope="row">photo</th><td>' + Autolinker.link(String(feature.properties.photo)) + '</td></tr><tr><th </td></tr></table>';
                    layer.bindPopup(popupContent);


                }

where the photo is a column in the vector that has the path to the image

2
  • 1
    Do you use qgis2leaf? plugins.qgis.org/plugins/qgis2leaf
    – underdark
    Commented Sep 12, 2014 at 10:46
  • Can somebody explain how to do that in "for dummies" mode? I have attribute field "photo" with names like "images001", "images002", etc., as "text edit" widget. I copied all pictures to "pictures" folder, and edited index.html with '<img src=\"pictures/' + feature.properties.photo + '\" />' but pictures dont show up? Any help is appreciated...
    – user47696
    Commented Feb 18, 2015 at 12:34

1 Answer 1

2

Does your column 'photo' contain just a filename? If so, this is what you'd have to do:

  1. Copy all the images to a subfolder in your qgis2leaf output folder (I think there's one there already for images, but can't remember what it's called)
  2. Change the popup code for the photo column from:

    Autolinker.link(String(feature.properties.photo))

to

'<img src="subfoldername/' + feature.properties.photo + '" />'

See if that does the trick.

5
  • yes i used qgis2leaf and there is a folder for pictures called pictures. the column photo contains a filename only.
    – gislearner
    Commented Sep 12, 2014 at 11:14
  • OK, so: '<img src="pictures/' + feature.properties.photo + '" />' (NOTE I missed out the required opening " in my answer). Commented Sep 12, 2014 at 12:29
  • what do you mean the required opening? is it the '<table><tr><th scope="row">house_numb</th><td>' part
    – gislearner
    Commented Sep 12, 2014 at 13:54
  • you are concatenating strings and variables with javascript to create html that gets passed to the feature's pop-up in leaflet. You should read up on this to understand what's going on. See this post: scriptingmaster.com/javascript/…
    – clhenrick
    Commented Sep 25, 2014 at 13:07
  • p.s. the code @TomChadwin mentioned will throw an error. Change it to: '<img src=\"pictures/' + feature.properties.photo + '\" />'
    – clhenrick
    Commented Sep 25, 2014 at 13:09

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.