I’m trying to implement some logic
paint: {
"fill-color": "#627BC1",
"fill-opacity": [
"case",
["==", ["feature-state", "mystate"], 1],
0.6,
["==", ["feature-state", "mystate"], 2],
0.8,
0.4
]
}
The problem I have is, when I click on something and then move my mouse, then the hover condition applies and then removes the clicked state. How can I make the hover stop impacting the clicked state?
map.on('click', 'state-fills', (e) => {
var description = e.features[0].properties.country;
document.getElementById("popup").innerHTML = description;
map.setFeatureState(
{ source: "states", id: hoveredStateId },
{ mystate: 2 }
);
});
// When the user moves their mouse over the state-fill layer, we'll update the
// feature state for the feature under the mouse.
map.on('mousemove', 'state-fills', (e) => {
if (e.features.length > 0) {
if (hoveredStateId !== null) {
map.setFeatureState(
{ source: "states", id: hoveredStateId },
{ mystate: null }
);
}
hoveredStateId = e.features[0].id;
map.setFeatureState(
{ source: "states", id: hoveredStateId },
{ mystate: 1 }
);
}
});
I feel like I need a condition on hover to say if the mystate on that area is already at 2 then do nothing. This is what I tried but it didn’t work:
if (hoveredStateId !== null) {
map.setFeatureState(
{ source: "states", id: hoveredStateId },
{ mystate: null }
);
}
if (hoveredStateId !== 2) {
hoveredStateId = e.features[0].id;
map.setFeatureState(
{ source: "states", id: hoveredStateId },
{ mystate: 1 }
);
}