Skip to main content

Add 3D buildings to a Mapbox Studio style

Additional Developer Resources

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.

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.

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 your Styles page.
  2. Click the New style button. Choose the Basic style template and click Customize Basic.
  3. Now you will rename your new style so you can find it later. In the Mapbox Studio style editor, click the title field in the upper left side of your screen and change the title of your style to "3D buildings".
  4. In the search bar in the upper right corner of your screen, 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.

Turn on 3D buildings​

Turn on 3D buildings in the Buildings component:

  1. In the Components panel, click the Buildings component to open the component properties panel.
  2. In the component properties panel, click the 3D buildings toggle to On.

You will see 3D buildings appear on your map. The default map view looks straight "down", which does not show off the 3D buildings. You can change the pitch now by right clicking on the map view and dragging your mouse, or you can wait until the Add the finishing touches step.

Adjust the layer properties​

The 3D buildings appear slightly transparent by default. In this step, you will adjust the opacity of the buildings to make them more opaque.

  1. Open the Layers panel and click the Buildings layer group.
  2. Click the Opacity property and the Override button.
  3. If your style contains multiple Zoom stops, you can delete the stops by clicking the <Icon name='undo' inline={true} /> Clear value option or click each stop to access the Fill opacity slider.
  4. Drag the Fill opacity slider to the right or enter a higher number to increase the opacity of the layer.

Next, you will add the finishing touches to change the camera pitch and 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.

Open an existing style​

To begin, open your existing style in Mapbox Studio.

  1. Log in to your Mapbox account and navigate to your Styles page.
  2. Click an existing style to open it.

Your style will open in the Mapbox Studio style editor.

Create a new buildings layer​

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

  1. Click the Layers panel on the left side of your screen.
  2. Click the plus button (+) button at the top of the panel.
  3. In the Source layer property panel, click the field below Source to select a data source.
  4. Find the Mapbox Streets v8 <Icon name='polygon' inline={true} /> building source and select it.

This will create your new layer and open it in x-ray view, where you can inspect the data from its source.

  1. Click the Type property in the New layer panel and select the <Icon name='extrusion' inline={true} /> Fill extrusion option. If prompted, click Okay to confirm that you want to change the layer's type. 8. If any filters are applied to this layer, remove them. 9. Click the Style tab to toggle to layer's style panel.

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

Import your own data

This tutorial uses the building layer in Mapbox Streets v8. If you have custom building data that you would like to use instead, you can upload your data to Mapbox as a tileset using Mapbox Studio, Mapbox Tiling Service, or the Mapbox Uploads API.

Adjust the layer properties​

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

Set the height property​

  1. Select your <Icon name='extrusion' inline={true} /> 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. Leave the first stop set to a height of 0 and a Fill height of 0.
  2. In the second stop, set the height to 999 and the Fill height to 999.

Set the base height property​

You can also set the base height property of your layer to handle cases where a building has a base as well as a separate taller part with a different architectural shape. Setting the base height property ensures that your buildings will have a more nuanced architectural appearance.

  1. Select the <Icon name='extrusion' inline={true} /> 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.

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.

Next, you will add the finishing touches to change the camera pitch and adjust the style's lighting.

Add the finishing touches​

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:

  1. Right click on the map view and drag the mouse.
  2. Move the map until you reach the desired pitch.
PLAYGROUND
Location Helper

To experiment with different camera pitches and appropriate zoom levels for the view you want, use our handy Location Helper tool.

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 icon (sun) 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​

You can use your Mapbox style to add a 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 learn more.

Additional Developer Resources
Was this page helpful?