[GIS] Linking images to features in geojson layer popup using Leaflet

imageleafletpopup

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.

Best Answer

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

Related Question