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.
Top comments (1)
how to click the 3d buildings