Create a heatmap layer

Replicates the MapLibre example Create a heatmap layer: earthquake frequency as a density surface that cross-fades into individual magnitude-scaled circles as you zoom past level 7.

Zoom in past level 7 to see the circle layer fade in

The complete document

create-a-heatmap-layer.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/create-a-heatmap-layer/
# Same USGS data and paint ramps, authored as YAML. The heatmap fades out
# above zoom 9 as a circle layer fades in.
type: map
id: create-a-heatmap-layer
config:
  center: [-120, 50]
  zoom: 2
  mapStyle: "https://demotiles.maplibre.org/style.json"
sources:
  earthquakes:
    type: geojson
    url: "https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson"
layers:
  - id: earthquakes-heat
    type: heatmap
    source: earthquakes
    maxzoom: 9
    paint:
      heatmap-weight:
        ["interpolate", ["linear"], ["get", "mag"], 0, 0, 6, 1]
      heatmap-intensity:
        ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3]
      heatmap-color:
        - interpolate
        - ["linear"]
        - ["heatmap-density"]
        - 0
        - "rgba(33,102,172,0)"
        - 0.2
        - "rgb(103,169,207)"
        - 0.4
        - "rgb(209,229,240)"
        - 0.6
        - "rgb(253,219,199)"
        - 0.8
        - "rgb(239,138,98)"
        - 1
        - "rgb(178,24,43)"
      heatmap-radius:
        ["interpolate", ["linear"], ["zoom"], 0, 2, 9, 20]
      heatmap-opacity:
        ["interpolate", ["linear"], ["zoom"], 7, 1, 9, 0]
  - id: earthquakes-point
    type: circle
    source: earthquakes
    minzoom: 7
    paint:
      circle-radius:
        - interpolate
        - ["linear"]
        - ["zoom"]
        - 7
        - ["interpolate", ["linear"], ["get", "mag"], 1, 1, 6, 4]
        - 16
        - ["interpolate", ["linear"], ["get", "mag"], 1, 5, 6, 50]
      circle-color:
        - interpolate
        - ["linear"]
        - ["get", "mag"]
        - 1
        - "rgba(33,102,172,0)"
        - 2
        - "rgb(103,169,207)"
        - 3
        - "rgb(209,229,240)"
        - 4
        - "rgb(253,219,199)"
        - 5
        - "rgb(239,138,98)"
        - 6
        - "rgb(178,24,43)"
      circle-stroke-color: "white"
      circle-stroke-width: 1
      circle-opacity:
        ["interpolate", ["linear"], ["zoom"], 7, 0, 8, 1]

What to notice

• Every paint ramp (heatmap-weight, -intensity, -color, -radius, -opacity) is the upstream expression verbatim — YAML’s block style just makes the color stops readable.
• The cross-fade is maxzoom: 9 + fading opacity on the heatmap against minzoom: 7 + rising opacity on the circles; no JS involved.