---
title: "How to display a MVT layer of buildings in Deck.gl | Deck gl | JavaScript maps SDK"
description: "Render extruded building layers in Deck.gl using Vector Tiles."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# How to display a MVT layer of buildings in Deck.gl
This Deck.gl example demonstrates how to load a Vector Tiles layer. The specific layer showcased in this example is the `building` layer, which is sourced from the [MapTiler Planet tileset](https://docs.maptiler.com/schema/planet/#building). Simply use the code below the map.
In this scenario, the buildings within the layer are visually represented based on the color specified in the `colour` field, as well as their respective heights indicated in the `render_height` field.
Hold down the shift key to rotate the map
### NPM module setup
```bash
npm install --save @maptiler/sdk deck.gl chroma-js
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { MapboxOverlay } from '@deck.gl/mapbox';
import { MVTLayer } from '@deck.gl/layers';
import chroma from 'chroma-js';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map', // container id
style: MapStyle.BASE, // style URL
center: [-74.0115, 40.7082], // starting position [lng, lat]
zoom: 14.5, // starting zoom
pitch: 60
});
map.on('load', () => {
const deckOverlay = new MapboxOverlay({
interleaved: false,
layers: [
new MVTLayer({
data: `https://api.maptiler.com/tiles/buildings/{z}/{x}/{y}.pbf?key=${config.apiKey}`,
loadOptions: {
mvt: {
layers: ['building']
}
},
minZoom: 0,
maxZoom: 15,
getLineColor: f => {
return f.properties.facade_color && chroma.valid(f.properties.facade_color) ? chroma(f.properties.facade_color).rgb() : [140, 170, 180]
},
getFillColor: f => {
return f.properties.facade_color && chroma.valid(f.properties.facade_color) ? chroma(f.properties.facade_color).rgb() : [140, 170, 180]
},
getLineWidth: 1,
lineWidthMinPixels: 1,
getElevation: f => {
return f.properties.height ? f.properties.height : 0
},
extruded: true,
wireframe: true
})
]
});
map.addControl(deckOverlay);
});
```
#### index.html
```html
How to display a MVT layer of buildings in Deck.gl | NPM example
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
height: 100vh;
width: 100vw;
}
```
### Basic JavaScript setup
```html
```
Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
## Related examples
### [GeoJSON in Deck.gl](https://docs.maptiler.com/deck-gl/examples/geojson/)
Examples
Visualize GeoJSON layers and arc connections in Deck.gl.
### [Interleaved Deck.gl layer](https://docs.maptiler.com/deck-gl/examples/interleaved/)
Examples
Interleave Deck.gl layers with MapTiler SDK JS maps.
### [POIs info Deck.gl MVT layer](https://docs.maptiler.com/deck-gl/examples/mvt-tooltip/)
Examples
Display MVT POI layers with tooltips in Deck.gl.
### [3D Terrain](https://docs.maptiler.com/deck-gl/examples/3d-terrain/)
Examples
Display realistic 3D terrain in Deck.gl using MapTiler.