Display Buildings in 3D
3D buildings in Maptoolkit Maps JS are rendered using fill-extrusion layers that read height and base-height properties from the vector tile source. The extrusion height is set with a data expression that reads the building’s height attribute, while the pitch and bearing are adjusted to show depth. Use this to create urban map views, real estate applications, or any visualization where building heights add meaningful context.
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [-74.0089, 40.7074],
zoom: 16,
pitch: 45,
bearing: -17.6,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
map.on('load', () => {
const layers = map.getStyle().layers;
let labelLayerId;
for (const layer of layers) {
if (layer.type === 'symbol' && layer.layout['text-field']) {
labelLayerId = layer.id;
break;
}
}
map.addLayer({
id: '3d-buildings',
source: 'mtk',
'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);
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Display Buildings in 3D - Maptoolkit Maps JS</title>
<meta property="og:description" content="Extrude building footprints into 3D using fill-extrusion layers." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [-74.0089, 40.7074],
zoom: 16,
pitch: 45,
bearing: -17.6,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
map.on('load', () => {
const layers = map.getStyle().layers;
let labelLayerId;
for (const layer of layers) {
if (layer.type === 'symbol' && layer.layout['text-field']) {
labelLayerId = layer.id;
break;
}
}
map.addLayer({
id: '3d-buildings',
source: 'mtk',
'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);
});
</script>
</body>
</html>Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.
Use the Maptoolkit Connector. Create an interactive map with zoom level 16, centered around [16.3738, 48.2082], with pitch 45 and bearing -17.6. Display buildings as 3D extrusions.