CODEWITHSUNDEEP
jqueryleaflethighlight
Nicolaï Van Lennepkade
Nicolaï Van Lennepkade

Reputation: 124

Geojson (GetJSON) and remove higlight (mouse out) on Leaflet

I don't manage to remove the highlight on a map since I call the data with $.getJSON. When I use the basic map (http://www.vegactu.com/m1/europe_abattoir/) all works, but when I call a geojson file with Jquery (not a leaflet json template with var = {json}), the highlight doesn't remove.

Example of what doesn't work (you can see it at : http://vegactu.com/m1/europe_abattoir/test1.html) I think it comes from the function resetHighlight(e) but I don't manage to resolve it.

    function styleeurope(feature) {
        return {
            weight: 1.5,
            color: '#222',
            opacity:0.5,
            fillOpacity: 0.7,
            fillColor: getColor(feature.properties.statTOTAL)
        };
    }
    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 3,
            color: 'black',
            opacity: 0.7,
            dashArray: '0',
            fillOpacity: 0.5,
            fillColor: '#fff200',
        });


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

// reset highlight //

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

// OnEachFeature

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

// GeoJSON call data //

$.getJSON("data/europe_fao.json",function(dataeurope){ var geojson = L.geoJson(dataeurope,{
        style: styleeurope,
        onEachFeature: onEachFeature} ).addTo(map);  });

Thank you so much if you manage to help me !

Upvotes: 2

Views: 1141

Answers (1)

Nicolaï Van Lennepkade
Nicolaï Van Lennepkade

Reputation: 124

Thank you Jonatas Walker ! Indeed, geojson wasn't register. So I change reset highlight to the style I want (you can let the default geojson.resetStyle(e.target); ) :

function resetHighlight(e) {
            geojson.setStyle(styleeurope);
            info.update();
        }

And I register geojson :

 $.getJSON("data/europe_fao.json",function(dataeurope){ geojson = L.geoJson(dataeurope,{
                style: styleeurope,
                onEachFeature: onEachFeature} ).addTo(map);
      });

Upvotes: 1

Related Questions