Extrude polygons for 3D indoor mapping

Replicates the MapLibre example Extrude polygons for 3D indoor mapping: a 3D floor plan where each room’s height, base, and color come from its own feature properties.

Drag with right-click (or Ctrl) to orbit the model

The complete document

extrude-polygons-for-3d-indoor-mapping.yaml

# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/extrude-polygons-for-3d-indoor-mapping/
# Data-driven extrusion height/base/color, straight from feature properties.
type: map
id: extrude-polygons-for-3d-indoor-mapping
config:
  center: [-87.61694, 41.86625]
  zoom: 15.99
  pitch: 40
  bearing: 20
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: room-extrusion
    type: fill-extrusion
    source:
      type: geojson
      url: "https://maplibre.org/maplibre-gl-js/docs/assets/indoor-3d-map.geojson"
    paint:
      fill-extrusion-color: ["get", "color"]
      fill-extrusion-height: ["get", "height"]
      fill-extrusion-base: ["get", "base_height"]
      fill-extrusion-opacity: 0.5

What to notice

• fill-extrusion-height, -base, and -color each read straight from feature properties with ["get", ...] — the geometry file carries the building, the layer carries nothing but the mapping.
• The initial 3D perspective is just config.pitch and config.bearing.