Tutorials
beginner
No code

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 mapbox.com/account.

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 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.

Edit the building layer

Next, you will edit the style's building layer.

  1. In the layer panel on the left side of the screen, select the building layer.
  2. Click Select data. This opens the x-ray view, which displays the data from the building layer.
  3. 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.
  4. Remove all existing filters on this layer.
  5. Click + Create filter and select the extrude data property.
  6. Leave the dropdown menu set to is any of and click the Empty button.
  7. Select true.
  8. 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.

Note

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.

Click on the Color field and change it to #778899.

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.

Was this page helpful?