More than one “oneachfeature” leaflet

Question

i'm trying to combine two features on one layer, but can't put them at work at same time. One is highlighting the are that cursor is hovering on and other is getting info out on the popup. I have used this guide fo highlighting: http://leafletjs.com/examples/choropleth.html (adding interaction part, tried to just merge this to the working info popup layer). In addition at the moment it's highlighting on hover, but would be nice if it would highlight on click. Code:

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

    L.geoJson(piirid, {style: style});

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

        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });

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

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

    var geojson;
    // ... our listeners
    geojson = L.geoJson(piirid);

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

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

    geojson = L.geoJson(piirid, {
        style: style,
        onEachFeature: onEachFeature,
        onEachFeature: onEachFeature3
    });

    function onEachFeature(feature, layer) {
        if (feature.properties) {
            layer.bindPopup("<br><b><big><u>Aadresss: " + feature.properties.L_AADRESS + "</br></b></big></u><br> <b>Maakond:&nbsp;</b>" + feature.properties.MK_NIMI
            + " <br><br>", {"offset":  [200, -50]});
        }

}

Thanks, Kristjan

Answer 1

Combine the two functions, they use the same parameters might as well be complected as one function.

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

    L.geoJson(piirid, {style: style});

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

        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });

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

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

    var geojson;
    // ... our listeners
    geojson = L.geoJson(piirid);

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

    function onEachFeature3(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            //click: zoomToFeature
        });
        if (feature.properties) {
            layer.bindPopup("<br><b><big><u>Aadresss: " + feature.properties.L_AADRESS + "</br></b></big></u><br> <b>Maakond:&nbsp;</b>" + feature.properties.MK_NIMI
            + " <br><br>", {"offset":  [200, -50]});
        }
    }

    geojson = L.geoJson(piirid, {
        style: style,
        onEachFeature: onEachFeature3
    });