Extruding 3D buildings in Mapbox Studio
Tags: mapbox, mapping, geospatial, cartography
Published: 2018-03-27 21:10:29

---
title: Extruding 3D buildings in Mapbox Studio
published: true
description: How to use Mapbox' cartography editor to create 3D buildings on your custom map style
tags: mapbox, mapping, geospatial,cartography
---

_Currently out of date with a [recent Studio re-release](https://blog.mapbox.com/studio-expressions-design-81012e2dab55), head to https://www.mapbox.com/help/add-3d-buildings-studio/ for updates!_ 

We're onto the 3rd challenge of [Map Madness](https://www.mapbox.com/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](https://www.mapbox.com/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. 

![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1521746687640_image.png)


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

![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1521747666459_image.png)


Click through the popup or go to the [Style Editor](https://www.mapbox.com/studio/styles/) to select `My Cartogram Style`.


![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1521747365473_image.png)




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

![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1521748611617_image.png)


Click into the buildings layer then click  `Select Data`.

![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1521848779257_image.png)


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` 

![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1521849206403_image.png)


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

![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1522079896715_image.png)
![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1522080190706_image.png)


## 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`
![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1522072955238_image.png)


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.


![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1522079588818_image.png)


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.

![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1522074037415_image.png)


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.  

![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1522074225693_image.png)



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

![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1522080458957_image.png)


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


![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1522080705437_image.png)


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

![](https://d2mxuefqeaa7sj.cloudfront.net/s_041B4F442AB3FA44009E04E6B6969CD4B6403CC4F79D767F4AE8CAB85D42DA98_1521853860436_image.png)


💥 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](https://www.mapbox.com/mapbox-gl-js/example/simple-map/).