Create a gradient line using an expression

Use the line-gradient paint property and an expression to visualize distance from the starting point of a line. See the example: https://docs.mapbox.com/mapbox-gl-js/example/line-gradient/

by cs09g

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css">
<div id="map"></div>

CSS

body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

mapboxgl.accessToken =
  "pk.eyJ1IjoiY3MwOWciLCJhIjoiY2s0N3Uxemp5MGVzcjNrcGE3bG1uaWs1MCJ9.3-rt7AqzSgxkKKOWR3TEFQ";
var map = (window.map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/light-v10",
  center: [-77.035, 38.875],
  zoom: 12
}));

var geojson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        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]
        ],
        type: "LineString"
      }
    }
  ]
};

map.on("load", function() {
  // 'line-gradient' can only be used with GeoJSON sources
  // and the source must have the 'lineMetrics' option set to true
  map.addSource("line", {
    type: "geojson",
    lineMetrics: true,
    data: geojson
  });

  // the layer must be of type 'line'
  map.addLayer({
    type: "line",
    source: "line",
    id: "line",
    paint: {
      "line-color": "grey",
      "line-width": 14,
      // 'line-gradient' must be specified using an expression
      // with the special 'line-progress' property
      "line-gradient": ["interpolate-hcl", ["linear"], ["line-progress"], 0, "blue", 0.5, "red"]
    },
  });
});