[GIS] Leaflet: resetStyle function doesn’t work correctly

Question

I made a map adapted from the leaflet tutorial for an interactive choropleth map. Highlight function is working correctly, but nothing happen when the mouse is out of a polygon: resetStyle doesn't work on my map!

This is my code:

var val = new L.layerGroup ()
val.addTo(map);

function valleescoul (feature) {
return {color: 'purple',
        fillColor: 'blue',
        weight: 2,
        opacity: 1,
        fillOpacity: 0.3};
   }                                

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

    layer.setStyle({
        fillOpacity: 0.7
    });

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

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

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

function survol(feature, layer) {
    layer.bindTooltip(feature.properties.name, {className: "labelsmall", noHide: false, sticky: true, direction: 'center'});
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

  L.geoJson(vallees, {style: valleescoul, onEachFeature: survol}).addTo(val);

Where did I make a mistake?

Answer 1

Finally I found the problem:

Instead of calling geojson like that:

L.geoJson(vallees, {style: valleescoul, onEachFeature: survol}).addTo(val);

I call it like that:

var geojson;
geojson = L.geoJson(vallees, {style: valleescoul, onEachFeature: survol }).addTo(val);