Search code examples
javascriptleafletgeojson

Make geojson property into a link


I have an external js script that contains a geojson. Within that geojson object there are properties and one of the properties is a url. I need to display that url within my popup as a link that is clickable. Right now, I have the url within my popup, but it's just displayed as string.

I've tried to store the geojson property into a new variable called assemblyWebsite and then input assemblyWebsite into my popup. That still has the variable as string though. I can't figure out how to make that variable into a clickable link, given the fact that the url depends on which polygon the user clicks on. There are several different urls and it can't be one url for each popup.

function onEachFeature(feature, layer) {

    var assemblyWebsite = feature.properties.QnsPubAdvocateResults_URL

    layer.bindPopup('<h4>Assembly District</h4>' + ' ' + feature.properties.AssemDist + '</b><br />' + 'Website:' + ' ' + assemblyWebsite);
};

Solution

  • you can use a href for displaying like a link.

    var layerGroup = L.geoJSON(data, {
      onEachFeature: function (feature, layer) {
        layer.bindPopup('<h4>Assembly District</h4>' + ' ' + feature.properties.AssemDist + '</b><br />' + 'Website:' + ' ' + '<a href="'+ 
    assemblyWebsite + '">Visit Website</a>' );
      }
    }).addTo(map);