I am trying to highlight polygons from a Mapbox tileset on a map on hover. Based on Mapbox's tutorial I am adding a feature state hover
to the data that is set through mousemove
and mouseleave
events. The data's paint attributes depend on the hover
state.
That works fine with a GEOJSON source as in their example. My source is a tileset though, and that does not seem to work properly: polygons that are entirely within one tile are rendered just as expected. Polygons that span several tiles are rendered incorrectly: they change their appearance only until the edge of the current tile. Zooming in and out — which changes the size of the tiles — verifies that.
Is it possible to add such a hover effect on data from a tileset?
Best Answer
To highlight all parts of a feature that is spread across tiles, Mapbox needs a way to associate features across tiles. Usually this is done via the
id
field in the vector tiles. When uploading a shapefile (or other data source) to Mapbox Studio, this is automatically done for you. If you're generating vector tiles yourself, e.g. with Tippecanoe, specify--generate-ids
to ensure that features that span multiple tiles get assigned the same ID.Once you've uploaded your data to Mapbox Studio, you can build upon the tutorial you linked and change the source to a vector tile source:
Then, add the
source-layer
property to theaddLayer
calls, and add the same name as thesourceLayer
property tosetFeatureState
.For a more thorough tutorial, have a look at https://blog.mapbox.com/going-live-with-electoral-maps-a-guide-to-feature-state-b520e91a22d