debug/line-gradient.html

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox GL JS debug page</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
    <style>
    body { margin: 0; padding: 0; }
    html, body, #map { height: 100%; }
</style>
</head>

<body>
    <div id='map'></div>

    <script src='../dist/mapbox-gl-dev.js'></script>
    <script src='../debug/access_token_generated.js'></script>
    <script>
    var map = window.map = new mapboxgl.Map({
        container: 'map',
        zoom: 12.5,
        center: [-77.01866, 38.888],
        style: 'mapbox:https://styles/mapbox/light-v9',
        hash: true
    });

    const gj = {
        "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', () => {
        map.showTileBoundaries = true;

        map.addSource('line', {
            type: 'geojson',
            lineMetrics: true,
            data: gj
        });

        map.addLayer({
            type: 'line',
            source: 'line',
            id: 'line',
            paint: {
                'line-color': 'red',
                'line-width': 14,
                'line-gradient': [
                    'interpolate',
                    ['linear'],
                    ['line-progress'],
                    0, "rgba(0, 0, 255, 0)",
                    0.1, "royalblue",
                    0.3, "cyan",
                    0.5, "lime",
                    0.7, "yellow",
                    1, "red"
                ]
            },
            layout: {
                'line-cap': 'round',
                'line-join': 'round'
            }
        });
    });

</script>
</body>
</html>