[GIS] How to hyperlink from polygon oncick in Leaflet

javascriptleaflet

I want to hyperlink from onclick of a polygon to new tab based on 'link' field in polygon json. When user clicks on polygon, a new browser tab is opened pointing to URL value of that polygon.

I am using the Leaflet Chloropleth demo map, edited for my own geojson data.

I need guidance on referencing the 'link' field in the geojson to the open url function. Whereas now onclick creates new empty browser tab.

        var geojson;

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }

    function onclick(e) {
        window.open(this.options.win_url);
    }


    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: onclick
        });
    }

    geojson = L.geoJson(states, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);

Best Answer

Do you have "win_url" saved as a property on each feature in states geojson?

If so, try:

function onclick(e) {
    window.open(e.target.feature.properties.win_url);
}