0

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?

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);

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.