Display buildings in 3D

Replicates the MapLibre example Display buildings in 3D: lower Manhattan extruded from the basemap’s building data.

Right-drag (or Ctrl-drag) to orbit

The complete document

display-buildings-in-3d.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/display-buildings-in-3d/
# The layer draws from the BASEMAP's own vector source: a bare source name
# that is not in the block's `sources:` record resolves against the loaded
# style, so YAML can extend the basemap, not just sit on top of it.
type: map
id: display-buildings-in-3d
config:
  center: [-74.0066, 40.7135]
  zoom: 15.4
  pitch: 45
  bearing: -17.6
  mapStyle: "https://tiles.openfreemap.org/styles/liberty"
layers:
  - id: buildings-3d
    type: fill-extrusion
    source: openmaptiles
    source-layer: building
    minzoom: 14
    paint:
      fill-extrusion-color: "#c9bba6"
      fill-extrusion-height:
        ["interpolate", ["linear"], ["zoom"], 14, 0, 15.5, ["get", "render_height"]]
      fill-extrusion-base:
        ["interpolate", ["linear"], ["zoom"], 14, 0, 15.5, ["get", "render_min_height"]]
      fill-extrusion-opacity: 0.75

What to notice

• The layer’s source: openmaptiles is a bare name that resolves against the loaded basemap’s vector source — YAML can extend the basemap, not just sit on top of it.
• Height and base ease in with a zoom interpolate, exactly as upstream.