メインコンテンツまでスキップ

3D buildings in a Mapbox Style

You can include 3d buildings into your Mapbox Styles. If you are using Mapbox Standard or Mapbox Satellite Standard, 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

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

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 from scratch or if you have an existing style you can skip to Option 1 or Option 2.

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 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".
circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

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:

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu
TUTORIAL
Create a custom basemap style with Mapbox Studio

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: 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.
circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

Next, you will 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 polygon 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 extrusion Fill extrusion option.
    • If prompted, click Okay to confirm that you want to change the layer's type.
  2. Click the Style tab to view the layer's style panel, which you will make adjustments to in the next step.
  3. 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.

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

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.

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.

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

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.
circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

Next, you will 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.
PLAYGROUND
Location Helper

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.

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

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:

このpageは役に立ちましたか？