0

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>"'+
);
2

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'.

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.