All docsHelpTutorialsAdd 3D buildings to a Mapbox Studio style

Add 3D buildings to a Mapbox Studio style

This tutorial will walk you through the process of adding a 3D building layer to a map style using Mapbox Studio.

Getting started

Before you start this tutorial, you need to create a Mapbox account by signing up at

Components vs. layers

There are two options for styling 3D buildings:

  1. Option 1: Style with components
  2. Option 2: Style an individual layer

Regardless of how the approach you take, the last two steps, Adjust the style's lighting and Publish the style, will be the same.

Option 1: Style with components

If you are using one our templates built using style components, you can add 3D buildings with component properties in the Components tab.

How to add 3D buildings in Mapbox Studio

Learn how to add 3D buildings and apply data-driven styling to your map in Mapbox Studio.

Create a new style

To begin, you will create a new map style in Mapbox Studio:

  1. Log in to your Mapbox account and navigate to the Styles page.
  2. Click the New style button. Find the Basic Template style and click Customize Basic Template.
  3. In the Mapbox Studio style editor, rename this new style so that you can find it later. Click into the title field in the upper left side of the screen and change the title to 3D buildings.
  4. In the search bar in the upper right corner, type in "Empire State Building" and select the first result.

The map view will move so that it is centered on the Empire State building in New York City.

Set component property

Turn on 3D buildings in the Buildings component:

  1. Click the Buildings component.
  2. Toggle the 3D buildings property on.

You will see 3D buildings appear on your map.

Set layer property

The buildings are fairly faint by default. To adjust the opacity of the buildings:

  1. Click More options in the Buildings component property panel.
  2. Click View layers to open the layer property panel for the layer in this component.
  3. Find the Opacity property, click it, and change the value to 0.6.

The opacity of the buildings on the map will change.

That's it! Skip ahead to Adjust the style's lighting.

Option 2: Style an individual layer

If you are using an older style, a custom style that was not built using style components, or custom building data, the process for adding 3D buildings will have a few more steps. You will need to update or create a new building layer and change several layer properties in the Layers tab.

Edit the building layer

If your custom style doesn't contain a building layer, create one:

  1. In the layer panel on the left side of the screen, select the building layer and click Select data to open the x-ray view, which displays the data from the building layer.
    • If your style doesn't have a building layer yet, add a new layer using the + button at the top of the Layers tab. Set the Source to the building layer in the Mapbox Streets tileset.
  2. Click the Type option in the New layer panel and select the Fill extrusion option. If prompted to do so, click Okay to confirm that you want to change the layer's type.
  3. Remove all existing filters on this layer.
  4. Click + Create filter and select the extrude data property.
  5. Leave the dropdown menu set to is any of and click the Empty button.
  6. Select true.
  7. Click the Style option to return to the building layer's styling panel.

Now that the building layer's type has been changed, its style settings need to be adjusted to show the desired 3D effect.


This tutorial takes advantage of the building layer in Mapbox Streets v7. If you have custom building data that you would like to use in a map style instead, that data can be uploaded to Mapbox as a tileset using either Mapbox Studio or the Mapbox Uploads API.

Adjust the layer's style settings

Next, you will adjust the layer's height and base height properties to achieve the desired 3D effect.

Set the height property

  1. Select the building layer and click on the Height property.
  2. Choose the Style across data range option.
  3. In the Choose a numeric data field panel, click on height.
  1. The first stop is already set to a height of 0 and a Fill height of 0. Leave these settings as they are.
  2. In the second stop, leave the height set to 999 and change the Fill height option to 999.

Set the base height property

The base height property of the layer also needs to be adjusted. This will handle any cases where a building has a base as well as a separate taller part that has a different architectural shape. If you do not set the base height property, then buildings will lose some of their nuanced architectural features.

  1. Select the building layer and click on Base height.
  2. Choose the Style across data range option.
  3. In the Choose a numeric data field panel, select min_height.
  4. The first stop is already set to a height of 0 and a Fill base height of 0. Leave these settings as they are.
  5. In the second stop, leave the height set to 999 and change the Fill base height option to 999.

Make the layer more prominent

Since the building layer has many items above it in the layers list, those items render on top of the buildings in this style. To make the buildings more prominent, you will move the building layer to the top of the layers list and hide the POI label layer.

  1. In the layers list, click and drag the building layer to the top of the layer list.
  2. Click on the poi-label layer to select it.
  3. Click on the Hide layer button at the top of the layer list to hide the layer.

You can use the Hide layer button to hide any layer that you do not want to display in your final map style.

Change the building color

The default black color of the buildings makes it hard to distinguish details, so this style will use a lighter color and a lower opacity:

  1. Click on the Color field and change it to #d0b47c.
  2. Click on the Opacity field and change it to 0.6.

Change the camera pitch

It's difficult to see the impact of changing these settings because the default map view looks straight "down". To adjust the pitch and make the 3D buildings easier to see:

Right click on the map view and drag the mouse. Move the map until you reach the desired pitch.

Adjust the style's lighting

Changing the lighting intensity for a fill extrusion layer highlights architectural details and makes it easier to distinguish between different buildings.

  1. In the toolbar on the upper right side of the screen, click the Light tab to open the Extrusion Lighting panel.
  2. Use the Intensity slider to change the light intensity to 0.75.

Publish the style

When you have finished editing your new map style, you will publish your changes.

  1. Click the Publish button in the upper right side of the screen. When you click the publish button, a window will display the difference between the previous version and the current version.
  2. If you're happy with the edits you made, click Publish. Your style will now be available to share from a variety of tools and applications. Click the Share button in the top toolbar to see all options.

Finished product

You have created a new map style with a 3D building layer.

Next steps

There are many different ways that you can use your new Mapbox Studio style. You can use this map on your website, or in a web or mobile application. Take a look at the Publish style section of the Mapbox Studio Manual to read about all the ways you can use your map style.