1

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?

2
  • How are you generating your Mapbox Tileset, GeoJSON upload to mapbox.com, tippecanoe, etc? Make sure you have an id set. Commented Jan 7, 2019 at 10:38
  • I am uploading GeoJSON within the Mapbox Studio, yes. The data has an id which is a string. I also thought the ID may be the problem, but because it works fine for polygons within tiles I rejected the idea of the ID being the problem. Commented Jan 7, 2019 at 12:49

1 Answer 1

1

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

2
  • The "id" was the problem. I tried different ways of uploading my data to Mapbox Studio, and the hovering never worked properly. The only way of making this work for me was the Tippecanoe hint, in particular the tippecanoe -o output.mbtiles -zg --drop-densest-as-needed --generate-ids input.geojson command from the tutorial you linked. Thanks! If you remove the direct Mapbox Studio upload as a solution, this would be the correct solution for me. Commented Aug 8, 2019 at 12:52
  • The last time I checked while Studio creates an id field, this is not unique. Tippecanoe, vtile, geojson uploaded in the client and styled in GL JS, and many other vector tile generators do allow for the creation of unique ids.
    – Malcolm
    Commented Mar 21, 2022 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.