Skip to content

Instantly share code, notes, and snippets.

@stepankuzmin
Created January 30, 2025 11:46
Show Gist options
  • Save stepankuzmin/dd8276c4f42162f37531b058ace6a9b6 to your computer and use it in GitHub Desktop.
Save stepankuzmin/dd8276c4f42162f37531b058ace6a9b6 to your computer and use it in GitHub Desktop.
Feature-based hover in Mapbox GL JS
map.on('style.load', () => {
map.addSource('point', {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 1,
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [24.943913962893134, 60.171240898094084]
}
}
]
}
});
map.addLayer({
"id": "point",
"type": "circle",
"source": "point",
"paint": {
"circle-radius": 10,
"circle-color": [
"case",
["boolean", ["feature-state", "highlight"], false],
"red",
"blue"
]
}
});
map.addInteraction('mouseenter', {
type: 'mouseenter',
target: {layerId: 'point'},
handler: (e) => {
map.setFeatureState(e.feature, {highlight: true});
}
});
map.addInteraction('mouseleave', {
type: 'mouseleave',
target: {layerId: 'point'},
handler: (e) => {
map.setFeatureState(e.feature, {highlight: false});
return false;
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment