[GIS] Add an image to a popup in a Leaflet map

leafletpopup

I'm trying to add an image to an Easy Button activated popup. I understand that anything within () after .setContent is html formatted, though anything I add other than text does not work. Also when I delete everything within the () and just add an image the entire map vanishes.

code:

  var helloPopup = L.popup().setContent("<b>Portland Cycle Safety Map</b><br />This map is intended to bring dangerous intersections <br />and street segments to the attention of Portland area cyclists: this is a work in progress.<br />Each skull marks the location a cyclist has been killed by an automobile sometime between 2005 and 2017.");

L.easyButton('fa-crosshairs', function(btn, map){
    helloPopup.setLatLng(map.getCenter()).openOn(map);

screenshot:

screenshot

Best Answer

I have an example here that is working: https://github.com/gccgisteam/maps-website/blob/master/graffiti.html#L97

Here's the text used in the popup:

"<b>Location Description: </b>"+entry[2]+"<br>"+
"<b>Work Date: </b>"+entry[3]+"<br>"+
"<b>Graffiti Type: </b>"+entry[5]+"<br>"+
"<b>Graffiti Material: </b>"+entry[6]+"<br>"+
"<b>Image: </b><a href='"+entry[0]+"' target=\"_blank\">"+"<img src='"+entry[0]+"&previewImage=true'</img></a>"

You should be able to use just use somethign like this <img src='"+entry[0]+"&previewImage=true'</img>

Related Question