1

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

1

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>

  • It worked. Thanks. Now this is all html within a .js file, so if I want to style this particular popup, as opposed to the other pop ups, would I put style tags within the <img></img>? – Edward Curran Jun 23 '17 at 17:31
  • Hey @EdwardCurran, you can style it like any other HTML element. Use an inline style, or a class to achieve it. – Alex Leith Jun 24 '17 at 0:18

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.