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 * as maplibregl from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.mjs';
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
// Arabic/Hebrew: MapLibre has no right-to-left support built in, this plugin adds it
maplibregl.setRTLTextPlugin('https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js', false);
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" />
<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 * as maplibregl from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.mjs';
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
// Arabic/Hebrew: MapLibre has no right-to-left support built in, this plugin adds it
maplibregl.setRTLTextPlugin('https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/dist/mapbox-gl-rtl-text.js', false);
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>