5

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);
  • 1
    Could you please clarify the desired behaviour? What should happen when the user clicks on a polygon? I'm not sure what directly hyperlink to new tab means in this context. – Stephen Lead Jan 27 '16 at 0:27
4

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);
}
| improve this answer | |
  • toms - perfect. I see how the feature.properties was missing. Thanks so much! – AmyK1478 Jan 27 '16 at 1:06
  • you are most welcome – toms Jan 27 '16 at 1:12

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.