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

We're onto the 3rd challenge ofMap 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 inCartogram, 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 bannerSaved style! indicating your new map style has been saved to your Mapbox account -

Click through the popup or go to theStyle Editor to selectMy Cartogram Style.

2. Extruding the buildings

You’re now in theMapbox Style Editor. On your left is the layers list — look for thebuildings layer by using theFilter layers option and typingbuildings into the search bar.

Click into the buildings layer then clickSelect 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 theType dropdown, selectFill extrusion. When the pop-up window appears, clickOkay

At the bottom of the same panel, clickAdd filter and selectExtrude. Add a new filter value so that the filter readsExtrude is any of true. To see the True/False options, clickEmpty -

3. Styling your buildings

Toggle back to theStyle tab for your buildings layer and (1) Click intoHeight (2) SelectValue options, then (3) ChooseSet value by data

Now we’ll tell our buildings how tall they should be. In theField dropdown menu, chooseHeight. Set yourDefault value to 15 and at the bottom, clickAdd a Stop. Enter a number like 3,000 in both theHeight andFillHeight 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 selectingColor and choosing a shade from the selection menu.

Before we start on the final styling for our buildings, use theSearch 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 thebuildings 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 thebuildings 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 downcontrol 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 withMapbox GL JS.