How to Add 3D Buildings to a Map

Mapbox has now added an example of 3d buildings to the Mapbox GL JS documentation. The Display Buildings in 3D example map provides you with all the code you need to use extrusions to display 3d buildings in a Mapbox GL map.

One thing missing from the example map is the light properties that control the lighting of the 3D buildings: light color, intensity, position, and anchor. These light properties are easy to add to the 'Display Buildings in 3D' example map by simply adding -

map.setLight({color: "#6ef", intensity: 0.5, position: [1.15, 135, 45]});

to the map.on function.

If you want to learn more about these light properties then you might also want to have a look at the Mapbox Blog post Shading and lighting 3D features in Mapbox GL JS.

I've also created an example map of 3d buildings in Mapbox GL. In my map I've added the option to navigate the map with game-like controls. This enables you to fly around the map and 3d buildings using your forward and left & right keyboard keys. I've also used the light properties of the 3d buildings to simulate the dropping of bombs on the map. If you press your keyboard down button the building light property flashes to simulate a bomb going off on the map.