Leaflet – Creating Clickable Hyperlink from GeoJSON Field

geojsonjavascriptleafleturl

How do I make a URL a hyperlink when the information is called from a GeoJSON field? I have tried adding html tags, but since the link is not in-line, it does not work. (Script below) LOC_Catalo is the field with the URL.

Non-Clicking Link

  // load GeoJSON from an external file
 $.getJSON("Syriashape.json",function(data){
// add GeoJSON layer and popups to the map once the file is loaded
L.geoJson(data, {
   style: function (feature) {
   return {};
   },
   onEachFeature: function (feature, layer) {
       layer.bindPopup(feature.properties.Sheet_Numb + "</br>" + "  " + feature.properties.LOC_Catalo);
   }
}).addTo(map);
  });

Best Answer

Just like you added a </br> tag, you should be able to add an <a> tag:

// load GeoJSON from an external file
$.getJSON("Syriashape.json",function(data){
  // add GeoJSON layer and popups to the map once the file is loaded
  L.geoJson(data, {
    style: function (feature) {
      return {};
    },
    onEachFeature: function (feature, layer) {
      layer.bindPopup(feature.properties.Sheet_Numb + "</br>" + "<a href='" + feature.properties.LOC_Catalo + "'>" + feature.properties.LOC_Catalo + "</a>");
    }
  }).addTo(map);
});
Related Question