CODEWITHSUNDEEP
mapboxmapbox-gl-js
rbrundritt
rbrundritt

Reputation: 18003

Hide polygons that are within a specific area

I'm trying to create an experience where I have a couple of detailed 3D models of buildings on the map with extruded building footprints of neighboring buildings via a vector tile source. The 3D models would be the main focus point and the extruded footprints would be for reference. One challenge I'm running into is that I have a global building footprint layer and it has a footprint for the 3D buildings which doesn't match up perfectly. Additionally, when extruded, it ends up merging/overlapping the nice 3D models.

I'd like to be able to hide the individual footprints that overlap the 3D models. My original thought was to grab the bounding box of the 3D model and then use the new within style expression, but it looks like this will only filter points and lines, not polygons. The building footprint polygons have no unique information in them that I could use to filter on.

I know I could monitor map movements and query the rendered features and manually detect intersecting polygons, but since there is no unique property on the footprint, I can't filter or use feature state.

Any ideas of how to efficiently avoid rendering individual polygons in a specific area that come in from a vector tile source?

Upvotes: 1

Views: 823

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126527

It is a common issue that the buildings layer in Mapbox Streets don't contain any unique attributes to allow filtering or rendering differently.

The best solution is usually to source a different buildings layer, and in this case, remove those redundant buildings in pre-processing.

I can think of one rather crazy workaround that might work here, although the performance may be poor.

  1. Add the building layer with very low opacity, of type fill, essentially invisible. (Maybe invisible would work.) Call your main source buildings`.
  2. Create a secondary building source of type geojson, and a secondary fill-extrusion layer. Call this source buildings-copy.
  3. On map move or moveend, use querySourceFeatures to obtain a copy of all buildings.
  4. Process this copy using Turf to remove the buildings you don't want, and call setData to set the copy as the data for buildings-copy.

You may need to do some clever caching to get reasonable performance.

Upvotes: 0

Related Questions