Operating on geometries from vector tile source

Question

When loading a vector tile source in a MapBox map, I would like to operate on certain geometries before displaying them. However I'm not sure if this would be possible and, if it is, much less how it would be done.

As an example, I would like to create a MapBox source which fetches OpenStreetMap tile data. But before this data is displayed as a layer I need to filter out all land-use features which do not have the tag "landuse='industrial'". Afterwards, the left-over geometries should be grown (perhaps through TurfJS?) by a user-specified distance.

I am hoping to solve this problem in a pure client application, since I have already experimented with using an accompanying backend server and found it to be unsuitable. So if anyone can point me in the right direction, it would be much appreciated!

Answer 1

It's possible, but rather complicated. One way that works:

1. Add the vector tile source to a style.
2. Add a GeoJSON source for your modified data, and a layer to show it.
3. Add a handler to the sourcedata event or similar, so you trigger when new data arrives by the user panning around.
4. In the trigger, call querySourceData to find all the geometries matching your query.
5. Then use Turf (either buffer() or lineOffset) to expand the size for each polygon.
6. Add the resulting polygons to your extra layer, using setData().

The performance will be pretty bad, but with a bit of caching and selective regeneration of data, you may get something usable.