How to highlight feature on Click in Mapbox Gl JS Vector Layer like in 2nd Image

Question

How to highlight a feature in the layer. 1st image shows the layer and 2nd image is the selected feature highlighted on click.How to do this ?

Vector Layer in Mapbox

Selected Feature Highlighted Like This

Answer 1

Assuming that the Vector Layer screenshot you've linked to has polygon data and isn't just a Raster Layer, you can use Feature State to accomplish this. Here's an example of using feature state to modify styling at runtime on the client: https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

For your purposes, rather than using the "mousemove" & "mouseleave" events that the above example uses, you can use the "click" event to trigger your polygon's style change.

---

⚠️ Disclaimer: I currently work for Mapbox ⚠️

Answer 2

Maybe this issue can help?

https://gis.stackexchange.com/questions/326243/mapbox-gl-feature-manipulation/326394#326394

You have to alter the color properties and reset the source

Answer 3

I have solved this issue. We can use background layer with dark color and use an additional layer of the same polygon to resemble that effect by increasing background opacity of the background layer.