[GIS] Highlighting polygons of Mapbox tileset on hover

mapboxvector-tiles

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:

map.addSource("states", {
    "type": "vector",
    "url": "mapbox://kkaefer.1zk6ono0"
});

Then, add the source-layer property to the addLayer calls, and add the same name as the sourceLayer property to setFeatureState.

For a more thorough tutorial, have a look at https://blog.mapbox.com/going-live-with-electoral-maps-a-guide-to-feature-state-b520e91a22d

Related Question