Create a gradient dashed line using an expression

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

The complete document

create-a-gradient-dashed-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-dashed-line-using-an-expression/
# line-gradient and line-dasharray compose on one layer.
type: map
id: create-a-gradient-dashed-line-using-an-expression
config:
  center: [-77.035, 38.875]
  zoom: 12
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: gradient-dashed-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.04264, 38.872528]
          - [-77.03696, 38.878424]
          - [-77.030056, 38.880945]
          - [-77.026946, 38.882645]
          - [-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: 8
      line-dasharray: [0, 4, 3]
      line-gradient:
        - interpolate
        - ["linear"]
        - ["line-progress"]
        - 0
        - "#2b83ba"
        - 0.5
        - "#abdda4"
        - 1
        - "#d7191c"

What to notice

• line-gradient and line-dasharray compose on one layer, exactly as upstream.