mapbox-gl-js icon indicating copy to clipboard operation
mapbox-gl-js copied to clipboard

Render fill-extrusion on top of buildings in Mapbox Standard Style

Open anderslarssonvbg opened this issue 1 year ago • 6 comments

In the blog post about the new Standard Style there is a section about real estate listing which shows this image:

image

I guess the blue 3d dots for each listing is achieved by using fill extrusions? The question is how they have been placed on the roof of each building which varies in height.

I would be very good with an example of how this is achieved in the documentation.

anderslarssonvbg avatar Feb 14 '24 10:02 anderslarssonvbg

Hey, @anderslarssonvbg! Thank you for your question!

Yes, it's good idea to add documentation about this case.

Shortly I can explain how you can achieve the same behaviour. Basically, you can add symbol-layer and for this layer you can assign to layout property symbol-z-elevate true value and this causes elevation of symbols of this layer above rooftops of buildings (both fill extrusions and models)

underoot avatar Feb 20 '24 12:02 underoot

Added example page about symbol-z-elevate to our documentation

underoot avatar Feb 23 '24 14:02 underoot

Thanks, and very good with the added example!

Any plans to add a fill-extrusion-z-elevate as well (or some kind of special value to fill-extrusion-base), to be able to show fill extrusions on top of 3D buildings?

anderslarssonvbg avatar Feb 23 '24 18:02 anderslarssonvbg

@anderslarssonvbg you may be able to achieve what you want to do with the existing property fill-extrusion-base

melanieimfeld avatar Feb 28 '24 01:02 melanieimfeld

@melanieimfeld thanks! Fill-extrusion-base can for sure be used to set the start height of my fill-extrusion, but I would then need to set a static value for it which correspond to the height of the building where it should be placed. I guess it would be possible if it existed some kind of get-expression which could dynamically return the height of the building placed where the fill extrusion is, and use that as a parameter in the fill-extrusion expression, but I guess a built-in "fill-extrusion-z-elevate" would be much more efficient.

anderslarssonvbg avatar Mar 01 '24 18:03 anderslarssonvbg