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.
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.
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
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
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
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
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.
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-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.
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.