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?

Improve this question
2
  • How are you generating your Mapbox Tileset, GeoJSON upload to mapbox.com, tippecanoe, etc? Make sure you have an id set.
    – AndrewHarvey
    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.
    – Tim Tröndle
    Jan 7, 2019 at 12:49

1 Answer 1

Reset to default
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

Improve this answer
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.
    – Tim Tröndle
    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
    Mar 21, 2022 at 13:27

Your Answer

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

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