> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Display buildings in 3D
This example uses [`addLayer`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addlayer) to add a [`fill-extrusion`](https://docs.mapbox.com/style-spec/reference/layers/#fill-extrusion) layer that displays building heights in 3D.
The data source for the building heights is the [Mapbox Streets](https://docs.mapbox.com/vector-tiles/reference/mapbox-streets-v8/#layer-reference) vector tileset, which provides data for the `building` layer in the [`light-v11`](https://docs.mapbox.com/api/maps/styles/#mapbox-styles) classic style.
> **Note (legacy): Classic styles are no longer maintained**
>
> This example uses classic Mapbox styles (for example: `MAPBOX_STREETS`,`SATELLITE`, `OUTDOORS`, etc). These styles are no longer maintained and may not include the latest features or updates. Developers are encouraged to use the [Mapbox Standard or Mapbox Satellite styles](https://docs.mapbox.com/map-styles/standard/guides/) or creating custom styles using [Mapbox Studio](https://docs.mapbox.com/help/tutorials/create-a-custom-style/).
This example shows how to manually add a 3D buildings layer to a classic style. Consider using the [Mapbox Standard Style](https://docs.mapbox.com/map-styles/standard/) which includes 3D buildings by default, along with detailed 3D models for landmarks.
> Example code:
**JavaScript**
```html
Display buildings in 3D
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
style: 'mapbox://styles/mapbox/light-v11',
center: [-74.0066, 40.7135],
zoom: 15.5,
pitch: 45,
bearing: -17.6,
container: 'map',
antialias: true
});
mapRef.current.on('style.load', () => {
const layers = mapRef.current.getStyle().layers;
const labelLayerId = layers.find(
(layer) => layer.type === 'symbol' && layer.layout['text-field']
).id;
mapRef.current.addLayer(
{
id: 'add-3d-buildings',
source: 'composite',
'source-layer': 'building',
filter: ['==', 'extrude', 'true'],
type: 'fill-extrusion',
minzoom: 15,
paint: {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'height']
],
'fill-extrusion-base': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'min_height']
],
'fill-extrusion-opacity': 0.6
}
},
labelLayerId
);
});
return () => mapRef.current.remove();
}, []);
return ;
};
export default MapboxExample;
```
## More Examples
View some examples of our other style features here:
> **Related content (example): [Rain Example Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/example/rain/)**
>
> This example adds a rain effect to the map by setting the style's rain property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.
> **Related content (example): [Snow Example Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/example/snow/)**
>
> This example adds a snow effect to the map by setting the style's snow property. You can adjust the intensity, direction, color, and more of the precipitation presented on screen.