0

I have a map of cycle fatalities, in which skull icons are clicked to produce custom popups:

enter image description here

I would like to include an image along with the rest of the information on the popup, so there's a picture of each person who was killed. In the example, there would be an image of "Noah Cardomon" on the popup, and so forth for the other icons.

. Thus far the coding for this layer looks like this:

    var skullIcon = L.icon({
    iconUrl: './png/skull4.png',
    iconSize: [30,30],
    popupAnchor: [-10, -30],
  }); 

    var fatalities = L.geoJson(fatalities, {

    pointToLayer: function(feature,latlng){

    function fatalitiesLayer (feature, layer) {}
    return L.marker(latlng,{icon: skullIcon});

        //popup coding
    }, onEachFeature: function (feature, layer){
        layer.bindPopup("<p></p>"
                        +feature.properties.name+"</p>"
                        +feature.properties.description+
                        "</p>Date: "+feature.properties.date+ 
                        "</p>Location: "+feature.properties.location+ 
                        "</p>Cause: "+feature.properties.cause+ 
                        "</p>"
                       );
    }
    }).addTo(map);

I am able to call +feature.properties.location, etc. into the popup, they're very clearly coded in the geojson file. But insofar as an image is concerned, I'm at a bit of a loss.

  • Is the reference to each image saved in your geojson, something like feature.properties.image? – tallistroan Jun 13 '18 at 21:07
  • Apparently this is the root of my question, i don't know how to do this, link to an image as an attribute. – Eddie Arni Jun 25 '18 at 19:13
2

If you have the picture in a attribute:

   '<img src="'+ feature.properties.Picture +'" style="width:100px;height:100px;">'+

or if all pictures get the same image:

+'<img src="image/picture6.jpg" style="width:100px;height:100px;">';

This HTML is inserted into your popup.

example:

http://www.gistechsolutions.com/leaflet/DEMO/basic/popupimage.htm

  • How does one add a picture as an attribute? – Eddie Arni Jun 25 '18 at 19:09
  • If you had pictures of and asset that you wanted to show when you clicked on the asset point. Create a field called "Picture" and put the name of it in the field, or the url path to the picture into the field. Then use the img src code I posted above, to refer to it. If it's in an images folder '<img src=images/"'+ feature.properties.Picture +'" style="width:100px;height:100px;"> to put it in the popup. – Bill Chappell Jun 25 '18 at 19:15
1

From your comment I assume you first have to create the atttribute column for your images.

To do this, you can edit your geojson file e.g. with geojson.io. The website is pretty self-explanatory and the steps are straightforward: Open your file, on the right side switch to table view, add a new colum called e.g. "image" and add the path to each image. Depending on the name and location of your images, the path could be something like /images/john_doe.jpg.

When you are finished, save it again as a geojson file.

You can also use QGIS to edit your file: Open your geojson file, right-click and choose "Open Attribute Table", choose the left-most symbol with the yellow pen to toggle editing (or use Ctrl+E). Then click on this button enter image description here (or use Ctrl+W) to add a new field. In the popup window add your field name (e.g. images) and select "Text (string)" as type. Now you can add your image references to the file. At the end click again on the yellow pen and save your changes.

To include it in your popup you have to add a line to bindPopup like the following:

"<img src='" + feature.properties.image + "'>"
  • thanks, that is extremely straightforwards. It looks like it's more roundabout in ArcGIS, and I can't seem to find a very straightforward way in QGIS. If you can suggest a good link describing how to do this in Qgis, appreciated, but otherwise this geojson.io looks pretty perfect for the job. thanks! – Eddie Arni Jun 26 '18 at 16:45
  • @EddieArni I added the also quite straightforward way by using QGIS to edit the geojson – tallistroan Jun 29 '18 at 5:31
  • I noticed that if i use geojson.io to edit the geojson, then open it in a text editor, i can from there edit the file so as to add images, etc. to the file. I assume QGIS does the same thing, adds in columns. My further question is, can this be done in spreadsheet? if so, how does one format the column? – Eddie Arni Jun 30 '18 at 22:00
  • (geo)json files are simple textfiles and you can of course edit them in any texteditor. It's also possible to edit at least json files in MS Excel and there are some scripts to export geojson files from e.g. Google Docs (see e.g. this question) However I never used these methods, so if you can't find anything that fits your needs, you might want to ask a new question. – tallistroan Jul 1 '18 at 9:22

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.