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.

The finished map.

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 Create button next to the Basic Template option. (If you use a template other than Basic to complete this tutorial, the options that you see may look slightly different.) Mapbox Studio create a new style dialog
  3. You will be taken to the Mapbox Studio style editor. Rename this new style so that it will be easy for you to find later. Click into the title field in the upper left side of the screen and change the title to 3d buildings. Screenshot showing how to rename a style in Mapbox Studio
  4. In the search bar in the upper right corner, type in “Empire State Building” and select the first result.

Screenshot showing a new map view in Mapbox Studio

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. Click the Filter option. In the Field values section, click the icon next to Type is not any of “building:part” and Underground is not any of “false” in order to delete these existing filters.
  5. Click Add filter and select extrude. Screenshot showing how to select fill extrusion in Mapbox Studio
  6. Leave the dropdown menu set to is any of and click the Empty button.
  7. Select true. Screenshot showing how to edit a layer filter in Mapbox Studio
  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 in order to show the desired 3D effect.

Adjust the layer’s style settings

Next, you will adjust the layer’s height and base height properties in order 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. Screenshot showing the style across data range option in Mapbox Studio
  4. The first stop is already set to a height of 0 and a Fill height of 0. Leave these settings as they are.
  5. In the second stop, leave the height set to 999 and change the Fill height option to 999.

Screenshot showing the style max height option in Mapbox Studio

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 portion that has a different architectural shape. If the base height property is not set, the nuanced architectural features of some buildings will be lost.

  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.

Screenshot showing how to adjust the base height setting in Mapbox Studio

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.

Screenshot showing how to hide a layer in Mapbox Studio

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.

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

Screenshot showing how to adjust the layer color in Mapbox Studio

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. Move the map until you reach the desired pitch.
  2. If you want to reset the pitch, click the Reset pitch button below the toolbar in the upper right side of the screen.

Gif showing how to change the pitch in Mapbox Studio

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.

Screenshot showing the extrusion lighting panel in Mapbox Studio

Publish the style

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

  1. Click the Publish style button in the upper right side of the screen. When you click the publish button, a window will appear showing you 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.

Screenshot showing how to publish a style in Mapbox Studio

Finished product

Congratulations! You have just created a new map style with a cool 3D building layer.

The finished map.

Next steps

There are a number of 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.