Help
All docsHelpTutorialsVideo: Add 3D buildings and data-driven styling with Studio

Video: Add 3D buildings and data-driven styling with Studio

This video tutorial shows you how to turn on 3D buildings in your map style using style components in Mapbox Studio, and then apply data-driven styling to the buildings.

Getting started

  • 0:00 - Log into Studio and open a new map style.
  • 0:20 - Zoom in to see building shapes on the map.

Turn on 3D buildings

  • 0:24 - Toggle the 3D buildings to On in the Buildings component.
  • 0:37 - Change your pitch to view 3D buildings from a different angle.

Apply data-driven styling

  • 1:00 - Open the building-extrusion layer.
  • 1:30 - Override the component styling.
  • 1:40 - Click Style across data range and select the height data field.
  • 1:57 - Add multiple stops with different colors for each.
  • 3:08 - Reduce layer opacity to make buildings less transparent.
  • 3:20 - Add a "catch all" stop with a default color value.
  • 4:44 - Choose step or linear for Rate of change.

Next steps

Now you know how to add 3D buildings in your map style using style components in Mapbox Studio, and apply data-driven styling.

Here are some things to try next:

Related tutorials
Beginner
No code
Add 3D buildings to a Mapbox Studio style
Add a 3D building layer to a map style in Mapbox Studio.
Beginner
No code
Video: Add bilingual labels to a map with expressions in Studio
Learn how to use expressions for string and data operations in Studio.
Intermediate
JavaScript
Video: Add a gradient route line to a static map
Use a helper library to add a multi-colored line to a static map image.
Beginner
No code
Video: Add a custom font to a map style with Studio
Import a custom font to use in your map style.