mapbox-gl-js
mapbox-gl-js copied to clipboard
Render fill-extrusion on top of buildings in Mapbox Standard Style
In the blog post about the new Standard Style there is a section about real estate listing which shows this 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.
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)
Added example page about symbol-z-elevate to our documentation
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 you may be able to achieve what you want to do with the existing property fill-extrusion-base
@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.