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


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

  • 1
    Do you use qgis2leaf? plugins.qgis.org/plugins/qgis2leaf – underdark Sep 12 '14 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 Feb 18 '15 at 12:34

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:



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

See if that does the trick.

  • yes i used qgis2leaf and there is a folder for pictures called pictures. the column photo contains a filename only. – gislearner Sep 12 '14 at 11:14
  • OK, so: '<img src="pictures/' + feature.properties.photo + '" />' (NOTE I missed out the required opening " in my answer). – Tom Chadwin Sep 12 '14 at 12:29
  • what do you mean the required opening? is it the '<table><tr><th scope="row">house_numb</th><td>' part – gislearner Sep 12 '14 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 Sep 25 '14 at 13:07
  • p.s. the code @TomChadwin mentioned will throw an error. Change it to: '<img src=\"pictures/' + feature.properties.photo + '\" />' – clhenrick Sep 25 '14 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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