3D features in Mapbox GL JS
Today we’re launching extrusions for Mapbox GL JS! Add custom, 3D visualizations to your maps by using our new fill-extrusion layer type and specifying the height and base height of a polygon 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:
Hold control while clicking and dragging to tilt and rotate the map.
On mobile? Tap here to see extrusions for GL JS in action.
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.
The fill-extrusion layer type is just the beginning for Mapbox GL and 3D. We will continue to work on 3D features 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.
Note: a previous version of this post described the fill-extrude-height and fill-extrude-base properties added to fill layers in Mapbox GL JS v0.26.0. This has been updated to reflect the separate fill-extrusion layer type added in v0.27.0.
