Documentation menu
Example
Extrude your own polygons
Raise your polygons into 3D by a height property, in metres, with fill-extrusion. Tilt the camera and a value becomes a block you can compare across the city. The same layer draws planned buildings, stock levels or any number per area.
ts
import { createMap } from "@mapmap/maps";
const map = createMap({
container: "map",
apiKey: "snk_...",
attributionPosition: "bottom-left",
center: [-0.1, 51.505],
zoom: 13.4,
mapOptions: { pitch: 55, bearing: -20 }, // tilt, or the blocks read flat
});
await map.whenReady();
// Sample data: blocks on a grid, each with a height in metres. Your own
// footprints carry their own height property.
const blocks: GeoJSON.Feature[] = [];
for (let x = 0; x < 10; x++) {
for (let y = 0; y < 7; y++) {
const west = -0.125 + x * 0.005, south = 51.495 + y * 0.003;
blocks.push({
type: "Feature",
properties: { height: 20 + ((x * 37 + y * 53) % 9) * 22 },
geometry: {
type: "Polygon",
coordinates: [[
[west, south], [west + 0.0035, south], [west + 0.0035, south + 0.002],
[west, south + 0.002], [west, south],
]],
},
});
}
}
map.addPersistentSource("blocks", {
type: "geojson",
data: { type: "FeatureCollection", features: blocks },
});
map.addPersistentLayer({
id: "blocks-3d",
type: "fill-extrusion",
source: "blocks",
paint: {
"fill-extrusion-height": ["get", "height"],
"fill-extrusion-base": 0,
"fill-extrusion-color": [
"interpolate", ["linear"], ["get", "height"],
20, "#bdd7e7", 100, "#3182bd", 196, "#08519c",
],
"fill-extrusion-opacity": 0.85,
},
}, { slot: "middle" });Worth knowing
- fill-extrusion-opacity applies to the whole layer, not per feature, so it takes a number or a zoom expression and never ["get", ...].
- fill-extrusion-base lifts the bottom of a block, which is how you stack floors or float a canopy: base 30 and height 45 draws a 15 m slab starting 30 m up.
- The MapMap building-3d layer draws the basemap's own buildings in the same pass. Give your blocks a clearly different colour, or hide building-3d while yours are on.