Create a gradient line using an expression

Replicates the MapLibre example Create a gradient line using an expression.

The complete document

create-a-gradient-line-using-an-expression.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-gradient-line-using-an-expression/
# lineMetrics: true makes line-progress available; line-gradient rides it.
type: map
id: create-a-gradient-line-using-an-expression
config:
  center: [-77.035, 38.875]
  zoom: 12
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: gradient-line
    type: line
    source:
      type: geojson
      lineMetrics: true
      route:
        name: Potomac sweep
        coordinates:
          - [-77.044211, 38.852924]
          - [-77.045659, 38.860158]
          - [-77.044232, 38.862326]
          - [-77.040879, 38.865454]
          - [-77.039936, 38.867698]
          - [-77.040338, 38.86943]
          - [-77.04264, 38.872528]
          - [-77.03696, 38.878424]
          - [-77.032309, 38.87937]
          - [-77.030056, 38.880945]
          - [-77.027645, 38.881779]
          - [-77.026946, 38.882645]
          - [-77.026942, 38.885502]
          - [-77.028054, 38.887449]
          - [-77.02806, 38.892088]
          - [-77.03364, 38.892108]
          - [-77.033643, 38.899926]
    layout:
      line-join: round
      line-cap: round
    paint:
      line-width: 10
      line-gradient:
        - interpolate
        - ["linear"]
        - ["line-progress"]
        - 0
        - "blue"
        - 0.1
        - "royalblue"
        - 0.3
        - "cyan"
        - 0.5
        - "lime"
        - 0.7
        - "yellow"
        - 1
        - "red"

What to notice

• lineMetrics: true on the source unlocks line-progress; the gradient interpolates along it.
• The source pairs lineMetrics with the route: sugar — source options and sugar compose.