0

I'm adding elements to a popup window.

The HTML for the content is within a .js file. I've been able to add text - which is styled by a .css link - and an image, which I style within the HTML tags, but I'd like to add a link. I've tried this several times, but nothing seems to work.

In addition to this, it is impossible thus far to organize the lines of code by hitting enter between, say, breaks. I have to have it all as one long line of unbroken code, which is annoying because as a beginner I like to organize things very clearly...

It seems a simple issue, but for whatever reason different rules seem to apply when you put HTML coding within a .js file, if someone could either make a suggestion or point out what rules apply here....

var helloPopup = L.popup().setContent(
'<img src="images/cog.png" style="width:150px; height:150px;"</img>
<b>Portland Cycle Safety Map</b>
This map is intended to bring dangerous intersections
and street segments to the attention of Portland area cyclists: this is a work in progress.
Each skull marks the location a cyclist has been killed by an automobile sometime between 2005 and 2017.'
);
Makyen
  • 31,849
  • 12
  • 86
  • 121
Eddie Arni
  • 109
  • 4
  • Please [edit] your question to be on-topic: include a [mcve] that duplicates the problem. Questions seeking debugging help ("why isn't this code working?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [ask]. This question is about JavaScript/HTML/CSS, so you should consider using a [snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). – Makyen Jun 24 '17 at 20:02
  • In addition, please include only one issue per Question. You have specifically put two issues in this question. As such, the question is too broad. – Makyen Jun 24 '17 at 20:05
  • possible duplicate of (for 2nd issue): [Creating multiline strings in JavaScript](https://stackoverflow.com/q/805107) – Makyen Jun 24 '17 at 20:05

1 Answers1

0

I think you are using leafletjs :) format content and for a link see the example (please copy the code, popup is not possible here; my standalone example works)

If you click with the right mouse button then the popup works here!

 var mymap = L.map('mapid').setView([51.505, -0.09], 13);

 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
   '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
   'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.streets'
 }).addTo(mymap);

 L.marker([51.5, -0.09]).addTo(mymap)
  .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

 L.circle([51.508, -0.11], 500, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5
 }).addTo(mymap).bindPopup("I am a circle.");

 L.polygon([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
 ]).addTo(mymap).bindPopup("I am a polygon.");

  var popup = L.popup();

 function onMapClick(e) {
  popup
   .setLatLng(e.latlng)
   .setContent('<img src="images/cog.png" style="width:150px; height:150px;"/><br />' +
'<b>Portland Cycle Safety Map</b><br />' +
'This map is intended to bring dangerous intersections' +
'and street segments to the attention of Portland area cyclists: this is a work in progress.' +
'Each skull marks the location a cyclist has been killed by an automobile sometime between 2005 and 2017.' + e.latlng.toString() +'<br /> made with <a href="http://leafletjs.com/examples/quick-start/" target="_blank">leafletjs</a>')
   .openOn(mymap);
 }

 mymap.on('click', onMapClick);
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>

</head>
<body>

<div id="mapid" style="width: 600px; height: 400px;"></div>

</body>
jbiWeisendorf
  • 350
  • 7
  • 14