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.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Create a gradient line using an expression</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><div id="map"></div> <script>goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = (window.map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json',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 truemap.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': 'red','line-width': 14,// 'line-gradient' must be specified using an expression// with the special 'line-progress' property'line-gradient': ['interpolate',['linear'],['line-progress'],0,'blue',0.1,'royalblue',0.3,'cyan',0.5,'lime',0.7,'yellow',1,'red']},layout: {'line-cap': 'round','line-join': 'round'}});});</script> </body></html>