I am using Leaflet for a map of the USA and I have click function to zoom in and change color of a state. This works but I cannot get the color to go back to previous color when clicking on another state. Currently every time I click on a state the color changes and does not remove the previous color change.
This is my code:
var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('https://api.tiles.mapbox.com/v4/{z}/{x}/{y}.png?access_token=...', {
maxZoom: 8,
minZoom: 4,
attribution: ' ',
id: 'mapbox.light',
attribution: '<a target="_blank" href="https://www.mapbox.com/">Mapbox</a>'
}).addTo(map);
// get color depending on population density value
function getColor(d) {
return d < 1 ? '#173e34' : //green
'#e1cb7f'; //yellow
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 1.9,
fillColor: getColor(feature.properties.availability)
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 1,
color: '#fff',
dashArray: '',
fillOpacity: 0.9,
fillColor: 'red'
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties.availability);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
//mouseover: highlightFeature,
//mouseout: resetHighlight,
click: function(e){
map.fitBounds(e.target.getBounds());
var layer = e.target;
layer.setStyle({
weight: 1,
color: '#fff',
dashArray: '',
fillOpacity: 0.9,
fillColor: 'red'
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties.availability);
}
});
}
geojson = L.geoJson(statesData, {
style: style,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: myIcon});
},
onEachFeature: onEachFeature
}).addTo(map);
This is the page with the map: https://www.thekeithcorp.com/interactive-map/
Any help would be appreciated, Thanks!
EDIT
I tried this but still not working, what have I done wrong?
var prevLayerClicked = null;
function onEachFeature(feature, layer) {
layer.on({
//mouseover: highlightFeature,
//mouseout: resetHighlight,
click: function(e){
if (prevLayerClicked !== null) {
// Reset style
prevLayerClicked.setStyle({
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 1.9,
fillColor: getColor(feature.properties.availability)});
}
map.fitBounds(e.target.getBounds());
var layer = e.target;
layer.setStyle({
weight: 1,
color: '#fff',
dashArray: '',
fillOpacity: 0.9,
fillColor: 'red'
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties.availability);
prevLayerClicked = layer;
}
});
}
resetHighlight()
andhighlightFeature()
functions, but they are never used. Store a reference to the last clicked polygon; reset the style of the last clicked polygon when clicking on a polygon.