Question

I use leaflet to display geographic zone with multiple polygons on a map and I want to link on click each layer to a webpage. For example the link (http://wikipedia.com) should be in replacement of “alert(“You clicked the map at ” + e.latlng);”

    var map = L.map('map').setView([45.7676067, 4.8351733], 6);

    var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
        attribution: 'Map data © 2011 OpenStreetMap, Imagery © 2012 CloudMade',
        key: 'My Key',
        styleId: 22677
    }).addTo(map);


    // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>Région</h4>' +  (props ?
            '<b>' + props.Name + '</b><br />'
            : 'Survollez une région');
    };

    info.addTo(map);


    // get color depending on population density value
    function getColor(d) {
        return d > 1000 ? '#800026' :
               d > 500  ? '#BD0026' :
               d > 200  ? '#E31A1C' :
               d > 100  ? '#FC4E2A' :
               d > 50   ? '#FD8D3C' :
               d > 20   ? '#FEB24C' :
               d > 10   ? '#FED976' :
                          '#FFEDA0';
    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7,
            fillColor: getColor('10')
        };
    }

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 3,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7,
            fillColor: getColor('50')
        });

        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

    var geojson;

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

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }

    function onMapClick(e) {
        alert("You clicked the map at " + e.latlng);
    }

    map.on('click', onMapClick);

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

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


</script>

Thanks for you help

Answer 1

You should be able to use a simple window redirect in the onMapClick function:

window.location = "http://www.google.com"

or to open in a new tab or window use window.open