Today we’re launching extrusions for Mapbox GL JS! Add custom, 3D visualizations to your maps by using our new extrusion properties – fill-extrude-height and fill-extrude-base– in fill layers to specify the height and base height of a fill feature.
For example, when used with data-driven styling and the recent addition of building heights to Mapbox Streets, you can now render 3D buildings:
The new extrusion properties together with data-driven styles make for a powerful combination. Beyond 3D buildings, they can be used for 3D elevation profiles, 3D indoor floorplans, and more.
When you’re building 3D visuals, you’ll want the flexibility to control the light source. That’s why we included a light map property that allows you to customize the color, direction, intensity, and anchor of the light source used to light extruded features. Look out for a post from Nicki soon about the work she’s done on the extrusion shaders to allow for maximum styling flexibility.
fill-extrude-height and fill-extrude-base are just the beginning for Mapbox GL and 3D. We will continue to work on adding extrude properties, as well as z-offset properties, for line, circle, and symbol types in Mapbox GL. Watch for these in the coming months, and for Mapbox GL Native support for extrude properties with the arrival of data-driven styling in Mapbox GL Native.