> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/ja/llms.txt)

# 3D buildings in a Mapbox Style

You can include 3d buildings into your Mapbox Styles. If you are using [**Mapbox Standard**](https://docs.mapbox.com/map-styles/standard/guides/) or [**Mapbox Satellite Standard**](https://docs.mapbox.com/map-styles/standard/guides/#mapbox-standard-satellite/), 3d buildings will be included in your map by default, otherwise you will need to add the component manually to your style.

If you build a new style using the **Start from Scratch** method in Mapbox Studio, you will need to follow a set of steps to include 3d buildings in your map.

### Components vs. layers

You can add 3d buildings to a style created with the **Start from Scratch** method, in one of two ways:

[**Option 1:** Style with components](#option-1-using-components)

This option allows you to quickly add 3D buildings to your style using built in components in the Mapbox Studio editor. This is recommended for implementation with less customization requirements and that use the newest Mapbox Studio frameworks.

[**Option 2:** Style an individual layer](#option-2-style-an-individual-layer)

This option allows you to import building data as a source and create a layer based on that data. If you need more complex customization options or you have a current style that uses older versions of Mapbox Studio, use this option.

Regardless of which approach you take, the following sections will be the same for each method:

-   [Creating your style](#create-a-new-style)
-   [Style the map](#style-the-map)
-   [Publishing the style](#publish-the-style)

## Creating your style

Create a new style from scratch or if you have an existing style you can skip to [Option 1](#option-1-using-components) or [Option 2](#option-2-style-an-individual-layer).

### Step 1: Create a blank 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](https://console.mapbox.com/studio/) page.
2.  Create a new style.
    -   In the new window, click the **New style** button
    -   Then, select **Start from scratch**.
3.  Rename the map.
    -   In the Mapbox Studio style editor, click the title field in the upper left side of your screen.
    -   Next, change the title of your style to "3D buildings".

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/ja/help/ja/assets/medias/dive-deeper--z_add-3d-buildings-studio--create-new-style-43a0c891b380f22863d9c6ac66d0d36a.mp4).

### Step 2: Customize the basemap

1.  Render the globe.
    -   Click the + button and selection `Components > Land & Water`.
    -   This will add the Land & Water layer which will render the globe in your style.
2.  In the **Land & Water** panel, click on the color swatch next to **Base** and set the color to `#af5ea5ff`.
3.  Next, enable the atmosphere in your style:
    -   Select the **Global** tab.
    -   Click **Atmosphere**.
    -   Toggle on **Enable Atmosphere**.
4.  Move your viewport to an area with many buildings.
    -   In the search bar in the upper right corner of your screen, search for `20 W 34th St. New York` and select the first result.
    -   This will set the viewport over the Empire State Building.

The map view will move so that it is centered on the Empire State building in New York City, and will look like the image below:

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/ja/help/ja/assets/medias/dive-deeper--z_add-3d-buildings-studio--customize-the-basemap-5e262fb58bfd0504aab679a297707dd6.mp4).

> **Related content (tutorial): [Create a custom basemap style with Mapbox Studio](https://docs.mapbox.com/help/ja/tutorials/create-a-custom-style/)**
> 
> If you would like to learn more about creating a basemap style from scratch and adding more in depth styles, see our Create a custom basemap style with Mapbox Studio guide.

Now that you have your map set up, you can turn on 3D buildings in one of two ways:

-   [**Option 1:** Style with components](#option-1-using-components)
    -   Components allow you to quickly add 3D buildings to your style, using built in functionality in the Mapbox Studio editor.
-   [**Option 2:** Style an individual layer](#option-2-style-an-individual-layer)
    -   Layers are useful for integrations where you need to import data from different sources.

## Option 1: Add buildings with Components

Components allow you to quickly add 3D buildings to your custom style, like how you added the Land & Water component in Step 1.

Now that you have your basemap set up, you Turn on 3D buildings in the *Buildings* component:

1.  Click on the **Layers** panel.
2.  Click the **+** button and select **Components > Buildings**.
3.  In the new properties panel, click the **Building styles** dropdown and select **3D**.
4.  Hold down the `CTRL` button and drag your mouse to adjust the pitch of the viewport.
    -   You will see 3D buildings appear on your map, but the default map view looks straight "down", which does not show off the 3D buildings.
5.  Lastly, adjust the opacity of the building.
    -   In the building properties panel, drag the **Fill opacity** slider to the right or enter a higher number to increase the opacity of the layer.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/ja/help/ja/assets/medias/dive-deeper--z_add-3d-buildings-studio--add-buildings-component-14991f01c4105cd6871de8fefee1a288.mp4).

Next, you will [Style the map](#style-the-map) to change the camera pitch and adjust the style's lighting.

## Option 2: Add buildings using 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.

### Step 1: 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.  Select **Custom Layer**.
4.  In the property panel, click the field below *Source* to select a data source.
5.  Find the **Mapbox Streets v8**  `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.

6.  Click the **Type** property in the *New layer* panel and select the  `Fill extrusion` option.
    -   If prompted, click **Okay** to confirm that you want to change the layer's type.
7.  Click the **Style** tab to view the layer's style panel, which you will make adjustments to in the next step.
8.  Move your viewport to an area with many buildings.
    -   In the search bar in the upper right corner of your screen, search for `20 W 34th St. New York` and select the first result.
    -   This will set the viewport over the Empire State Building.

You will see flat black shapes where the 3D buildings will appear and in the next step you will style them to adjust their height and color.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/ja/help/ja/assets/medias/dive-deeper--z_add-3d-buildings-studio--add-custom-layer-890639b79666e55d70662e654befc557.mp4).

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

> **Note: 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](https://console.mapbox.com/studio/tilesets/), [Mapbox Tiling Service](https://docs.mapbox.com/api/maps/mapbox-tiling-service/), or the [Mapbox Uploads API](https://docs.mapbox.com/api/maps/#uploads).

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

### Step 2: Set the height and base height properties

Now that you have imported the necessary building data, you can adjust their height on the map.

1.  Select your building layer and open the **Extrusion** tab.
2.  Click on the **Height** property.
3.  Select **Style across data range** towards the middle of the panel.
4.  In the new panel that appear select **height**.
5.  Leave the first stop with the default values:
    -   `0` in the input field.
    -   *meters* as 0.
6.  Adjust the values of the second stop:
    -   Click in the input field and set the value to `999`.
    -   Click on *0 meters* and in the pop-up that appears, set *meters* to `999`.
7.  Next, select the **Base Height** property.
8.  Select **Style across data range** towards the middle of the panel.
9.  In the new panel that appears select **min_height**.
10.  Leave the first stop with the default values:
     -   `0` in the input field.
     -   *meters* as 0.
11.  Adjust the values of the second stop:
     -   Click in the input field and set the value to `999`.
     -   Click on *0 meters* and in the pop-up that appears, set *meters* to `999`.

Now you will see black buildings expand, showcasing different heights for each of the individual buildings. Next, you will adjust the colors of the buildings.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/ja/help/ja/assets/medias/dive-deeper--z_add-3d-buildings-studio--set-heights-a0d927200b1f52d56126d4f7c2fe5ab2.mp4).

### Step 3: 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 `#eea7e4ff`.
2.  Click on the **Opacity** field and change it to `0.6`.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/ja/help/ja/assets/medias/dive-deeper--z_add-3d-buildings-studio--set-color-e60106ce1a40ce675628f2477d0a6b9d.mp4).

Next, you will [style the map](#style-the-map) to change the camera pitch and adjust the style's lighting.

## Style the map

### Step 1: Change the camera pitch

It may be 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.

> **Related content (playground): [Location Helper](https://labs.mapbox.com/location-helper/#3/40.78/-73.97)**
> 
> To experiment with different camera pitches and appropriate zoom levels for the view you want, use our handy Location Helper tool.

### Step 2: 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.  Open the **Globe** panel and select **3D Lighting**.
2.  Click on **Enable Ambient** and toggle it on.
3.  Next, click **Enable Directional** and toggle it on.
    -   Note: You will not be able to see *Directional Lighting* if you do not turn on *Ambient Lighting*.
4.  Next, click *Intensity* and adjust the slider to change the directional light intensity to `0.75`.
5.  Lastly, select **Cast Shadows** and set it to true.

You should now see a map with directly and ambient lighting with shadows protruding from the buildings.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/ja/help/ja/assets/medias/dive-deeper--z_add-3d-buildings-studio--adjust-lighting-bf98ae9d6ac857471b09f3999dee61a6.mp4).

In the final step, you will walk through publishing your style so you can access it from webpages or mobile applications.

## 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.
2.  Review your changes.
    -   When you click the publish button, a window will display the difference between the previous version and the current version.
3.  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.
4.  Click the **Share** button in the top toolbar to see all options.

### Learn more

You might also be interested in:

-   Reviewing the [Mapbox Studio Manual](https://docs.mapbox.com/studio-manual/) to learn more about Mapbox Studio.
-   [Exploring other tutorials](https://docs.mapbox.com/help/ja/tutorials/?product=Mapbox+Studio) related to Mapbox Studio.
-   Learning how to customize your map in more depth with our [Create a custom basemap style with Mapbox Studio](https://docs.mapbox.com/help/ja/tutorials/create-a-custom-style/) tutorial.
-   Learning how to add precipitation to the map with our [snow](https://docs.mapbox.com/mapbox-gl-js/example/snow/) and [rain](https://docs.mapbox.com/mapbox-gl-js/example/rain/) examples.