3D Buildings
Add a fill-extrusion layer on the Maptoolkit building source layer and tilt the map with pitch to see buildings in 3D. This view looks south from inside Central Park toward the Midtown Manhattan skyline.
import { MaptoolkitLogoControl } from 'https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-gl-logo/+esm';
const map = new maplibregl.Map({ container: 'map', attributionControl: { customAttribution: '' }, style: 'https://styles.maptoolkit.org/summer.json', center: [-73.9770, 40.7645], zoom: 14.3, pitch: 62, bearing: 200 }); // Midtown Manhattan, looking out from Central Park South
map.on('load', function () {
map.addLayer({ id: 'buildings-3d', type: 'fill-extrusion', source: 'mtk', 'source-layer': 'building', paint: {
'fill-extrusion-color': '#cfd8dc',
'fill-extrusion-height': ['coalesce', ['get', 'render_height'], ['get', 'height'], 12],
'fill-extrusion-base': ['coalesce', ['get', 'render_min_height'], ['get', 'min_height'], 0],
'fill-extrusion-opacity': 0.9
} });
});
map.addControl(new MaptoolkitLogoControl());<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.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 type="module">
import { MaptoolkitLogoControl } from 'https://cdn.jsdelivr.net/npm/@maptoolkit/maplibre-gl-logo/+esm';
const map = new maplibregl.Map({ container: 'map', attributionControl: { customAttribution: '' }, style: 'https://styles.maptoolkit.org/summer.json', center: [-73.9770, 40.7645], zoom: 14.3, pitch: 62, bearing: 200 }); // Midtown Manhattan, looking out from Central Park South
map.on('load', function () {
map.addLayer({ id: 'buildings-3d', type: 'fill-extrusion', source: 'mtk', 'source-layer': 'building', paint: {
'fill-extrusion-color': '#cfd8dc',
'fill-extrusion-height': ['coalesce', ['get', 'render_height'], ['get', 'height'], 12],
'fill-extrusion-base': ['coalesce', ['get', 'render_min_height'], ['get', 'min_height'], 0],
'fill-extrusion-opacity': 0.9
} });
});
map.addControl(new MaptoolkitLogoControl());
</script>
</body>
</html>