I want to make hoover effect on my map created in Mapbox Studio. I've added a SHP feature as a fill with initial opacity set in "style editor" to 0.5. How can I make hoover effect that will change that opacity to 1 when mouseon?
I've been using this example (https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/) but data in this example is coming from external GEOJOSN. I want to use my layer already styled in Mapbox Studio. Is it possible? Thank you
Yes, this is possible to achieve by referencing the name of the source which you have already added in Mapbox Studio, rather that using Map#addSource and Map#addLayer as shown in the example. That is, you can replace 'states' in the example with the name of your source added to your map style with Mapbox Studio.
Thank you for reply. Where do I add in that case command line defining "true" and "false" values for "fill-opacity" when hover event appears?
If I don't use Map#addSource and Map#addLayer, there is no line to put new opacity values. I am really new at this so pleas understand me.
map.addLayer({
'id': 'state-fills',
'type': 'fill',
'source': 'states',
'layout': {},
'paint': {
'fill-color': '#627BC1',
**'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
1,
0.5**
]
}
});
and then, that case is recalled in map.on mousemove event:
map.on('mousemove', 'state-fills', function(e) {
if (e.features.length > 0) {
if (hoveredStateId) {
map.setFeatureState(
{ source: 'states', id: hoveredStateId },
**{ hover: false }**
);
If I just replace layer "states" for my layer, lets call it "PollyGon", I can't see there to define opacity values? Thank you!
