I am having trouble reseting styles for my polygons when the "mouseout" happens.
Below is my current code:
The countriesLayer is the variable for geoJson data of coordinates of different countries.
As you can see there are 4 functions: highlightFeature, resetHighlight, zoomToFeature and lastly countriesOnEachFeature.
I don't have any problem with other 3 functions, but "resetHighlight"...
According to the Mapbox documentation, it says I just have to use geojson.resetStyle, but it doesn't seem to work.
Can anyone please help me solve this issue?
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoidGhsZWUxMTIyIiwiYSI6ImNpeWdyd2tycDAzZTUzMm12eDcybjJocTgifQ.r1njnGgI95MNlwVBTm1slw';
var map = L.mapbox.map('map')
.setView([16.541430, 7.558594], 3);
// Use styleLayer to add a Mapbox style created in Mapbox Studio
L.mapbox.styleLayer('mapbox://styles/thlee1122/ciyhpbj15003d2sluqt6ylrqa', {zoomControl: false}).addTo(map);
//Disable zooming and scrolling
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
L.geoJSON(countriesLayer, {
style: function(feature) {
switch(feature.properties.title) {
case 'France': return {
color: "#3ca0d3"
};
case 'China': return {
color: "#f86767"
};
case "Korea": return {
color: "#e7857f"
};
case "Span": return {
color: "#fa946e"
};
case "United States of America": return {
color: "#9c89cc"
}
}
},
onEachFeature: countriesOnEachFeature
}).addTo(map);
function highlightFeature(e) {
var layer = e.target;
layer.setStyle(
{
weight: 5,
color: 'black',
fillColor: 'grey',
fillOpacity: 0.2
}
)
if(!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
function resetHighlight(e) {
geojson.resetStyle(e.target)
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds())
}
function countriesOnEachFeature(feature, layer) {
layer.on(
{
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
}
)
}
</script>