1

I have markers on my map created by geoJson data that represent restaurants, bars, etc.... Each marker has 2 properties; 1)Name - name of the site, bar restaurant, etc... 2)Link-a link to the establishment's website. Currently, I have added a popup that displays the Name. My goal is to make the name based on into a hyperlink based on the link property that the user can click on and open corresponding the website. How could I best achieve this?

var layerGroup = L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.Name +'<br>'+feature.properties.Link);
  }
}).addTo(map);

My best guess would be something like this: layer.bindPopup("<a href='feature.properties.Link'>" + feature.properties.Name + "</a>")

enter image description here

  • Your "best guess" looks fine to me and it seems to work for your goal. What is the specific problem you have with this solution? – tallistroan Mar 17 '17 at 17:32
  • The solution above (best guess) did not seem to work when I originally tested it. – gwydion93 Mar 17 '17 at 17:40
  • And now it is working? If not, please edit the question with any specific errors/error messages you get in the map and/or the developer console. – tallistroan Mar 17 '17 at 17:48
2

Just pay attention to your quotes.

var layerGroup = L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    layer.bindPopup("<a href='" + feature.properties.Link + "'>" + feature.properties.Name + "</a>")
  }
}).addTo(map);
  • Ah, that got it. It was a syntax issue. So the above solution does work correctly when the proper quotes are used. – gwydion93 Mar 17 '17 at 19:54

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.