[GIS] Add a link to a popup window Leaflet map: adding html to setContent

htmlhyperlinkpopup

I'm adding a metadata link to an info popup. I've been trying a variety of ways to do this, but all turn up errors, there appear to be different rules applying for html within setContent…

Here's the map: Click on the info button under the zoom controls for the popup in question: https://pdxcyclesafetymap.neocities.org/

Code for the popup:

var helloPopup = L.popup().setContent("<img src='images/cog.png'style=width:150px;height:150px;</img><br>"+
"<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."+
"<br />'<a href="https://metadatapdxcyclesafety.neocities.org/" target="_blank">metadata</a>"'+
);

Best Answer

The problem is in your last line:

"<br />'<a href="https://metadatapdxcyclesafety.neocities.org/" target="_blank">metadata</a>"'+

You are mixing " and ' in a way that causes errors because the string ends prematurely. There's also a trailing + with no further following.

You can fix this in two ways:

Escape all " within the Javascript string by using \ in front:

"<br/><a href=\"http.//example.com\">link</a>"

Use ' inside the string instead of ", works the other way around too:

"<br/><a href='http.//example.com'>link</a>"
'<br/><a href="http.//example.com">link</a>'

Fixed code:

var content = "<img src='images/cog.png' style='width:150px;height:150px;'></img><br>"+
      "<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."+
      "<br />'<a href='https://metadatapdxcyclesafety.neocities.org/' target='_blank'>metadata</a>'";
var helloPopup = L.popup().setLatLng([51.5, -0.09]).setContent(content).openOn(map);

Side note: Depending on what you want to to it's also possible to create elements with document.createElement() and use those: Plunker Example. Might be a bit 'cleaner'.

Related Question