How To Add Together 3D Buildings To A Map

Mapbox has at 1 time added an instance of 3d buildings to the Mapbox GL JS documentation. The Display Buildings inwards 3D instance map provides y'all amongst all the code y'all ask to utilisation extrusions to display 3d buildings inwards a Mapbox GL map.

One affair missing from the instance map is the lite properties that command the lighting of the 3D buildings: lite color, intensity, position, in addition to anchor. These lite properties are slow to add together to the 'Display Buildings inwards 3D' instance map yesteryear exactly adding -

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

to the map.on function.

If y'all desire to acquire to a greater extent than close these lite properties thence y'all mightiness besides desire to accept a await at the Mapbox Blog postal service Shading in addition to lighting 3D features inwards Mapbox GL JS.

I've besides created an example map of 3d buildings inwards Mapbox GL. In my map I've added the selection to navigate the map amongst game-like controls. This enables y'all to wing to a greater extent than or less the map in addition to 3d buildings using your frontwards in addition to left & correct keyboard keys. I've besides used the lite properties of the 3d buildings to copy the dropping of bombs on the map. If y'all press your keyboard downwards push the edifice lite holding flashes to copy a bomb going off on the map.