Extruding 3D buildings in Mapbox Studio

Currently out of date with a recent Studio re-release, head to https://www.mapbox.com/help/add-3d-buildings-studio/ for updates!

We're onto the 3rd challenge of Map Madness over at Mapbox, and I wanted to cross-post our walk-through for adding 3D buildings to a custom map style in 20 minutes or less.

1. Create your map

If you haven’t already made a map in Cartogram, drag and drop a photo of your favorite team to create a custom map style. You'll be prompted to create a new account or sign in.

Watch for the banner Saved style! indicating your new map style has been saved to your Mapbox account -

Click through the popup or go to the Style Editor to select My Cartogram Style.

2. Extruding the buildings

You’re now in the Mapbox Style Editor. On your left is the layers list — look for the buildings layer by using the Filter layers option and typing buildings into the search bar.

Click into the buildings layer then click Select Data.

You’re now viewing x-ray mode where you can inspect the underlying data - after all, vector maps are just collections of geometries! I digress. From the Type dropdown, select Fill extrusion. When the pop-up window appears, click Okay

At the bottom of the same panel, click Add filter and select Extrude. Add a new filter value so that the filter reads Extrude is any of true. To see the True/False options, click Empty -

3. Styling your buildings

Toggle back to the Style tab for your buildings layer and (1) Click into Height (2) Select Value options, then (3) Choose Set value by data

Now we’ll tell our buildings how tall they should be. In the Field dropdown menu, choose Height. Set your Default value to 15 and at the bottom, click Add a Stop. Enter a number like 3,000 in both the Height and Fill Height boxes.

Zoom down into your map - you should see buildings start to pop out. Hold control while clicking and dragging to tilt and rotate the map to check out the different perspectives.

Now let’s change the styling of the buildings by selecting Color and choosing a shade from the selection menu.

Before we start on the final styling for our buildings, use the Search box on the right panel to type in a city with a prominent skyline like Toronto, San Francisco, or New York.

Final styling - adjusting color & lighting

On the layer’s list, drag the buildings layer up in the map hierarchy — drop it right above all the road label layers (road-label,-large, road-label-medium , road-label-small). If you’re only seeing the buildings layer on your left panel, click* X to see all layers.

Continue adjusting the color of buildings and the intensity of the light to your aesthetic.

Hold down control and hold click to rotate the pitch of your map for the final screenshot. You've done it!

💥 Tweet your screenshot @mapbox with #mapmadness18 🏀

Free tickets to our first user conference aren't what you're after? Extend this map in the wild properly with Mapbox GL JS.