Elevate symbols above the terrain

Replicates the MapLibre example Elevate symbols above the terrain: three labels over Innsbruck, floating 0 m, 500 m and 1500 m above the ground.

Right-drag (or Ctrl-drag) to orbit. The labels keep their height above the ground.

The complete document

elevate-symbols-above-the-terrain.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/elevate-symbols-above-the-terrain/
# `symbol-height-offset` floats each label that many metres above the
# ground — here data-driven from the feature's `height`. Needs maplibre-gl
# >= 6.6.0 (the docs site runs 6.x). The base style is empty: with no glyphs
# URL, maplibre-gl (>= 5.11) draws the label text with the browser's fonts.
type: map
id: elevate-symbols-above-the-terrain
config:
  center: [11.39085, 47.27574]
  zoom: 13
  pitch: 75
  maxZoom: 18
  maxPitch: 85
  hash: true
  mapStyle: { version: 8, sources: {}, layers: [] }
sources:
  osm:
    type: raster
    tiles:
      - "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
    tileSize: 256
    maxzoom: 19
    attribution: "© OpenStreetMap contributors"
  terrainSource:
    type: raster-dem
    url: "https://tiles.mapterhorn.com/tilejson.json"
    encoding: terrarium
layers:
  - id: osm
    type: raster
    source: osm
  - id: balloons
    type: symbol
    source:
      type: geojson
      data:
        type: FeatureCollection
        features:
          - { type: Feature, properties: { label: "0 m", height: 0 }, geometry: { type: Point, coordinates: [11.385, 47.276] } }
          - { type: Feature, properties: { label: "500 m", height: 500 }, geometry: { type: Point, coordinates: [11.390, 47.276] } }
          - { type: Feature, properties: { label: "1500 m", height: 1500 }, geometry: { type: Point, coordinates: [11.395, 47.276] } }
    layout:
      symbol-placement: point
      # Data-driven: float each label at the height stored on the feature.
      symbol-height-offset: ["get", "height"]
      text-field: ["get", "label"]
      text-size: 16
      text-allow-overlap: true
    paint:
      text-color: "#1b6"
      text-halo-color: "#fff"
      text-halo-width: 2
terrain:
  source: terrainSource
  exaggeration: 1
sky: {}
controls:
  navigation: true

What to notice

• symbol-height-offset is a data-driven layout property: ["get", "height"] reads each feature’s own height in metres. It requires symbol-placement: point.
• Requires maplibre-gl ≥ 6.6.0. The docs site runs 6.x.
• The base style is an empty inline object with no glyphs URL. maplibre-gl ≥ 5.11 then draws label text with the browser’s own fonts, so nothing at the style root needs authoring and the document stays pure YAML.
• The terrain comes from map-level terrain: and sky:, as in 3D terrain.