Create a gradient line using an expression | UNL Map JS Docs

Use the line-gradient paint property and an expression to visualize distance from the starting point of a line.

Note

If you want to test this example, edit it in JSFiddle or CodePen and replace the "YOUR-OWN-API-KEY" and "YOUR-OWN-VPM-ID" placeholders with your actual api key and vpm id.

<!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://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.js"></script>
<link href="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.css" rel="stylesheet" />
<link
href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.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>
var map = (window.map = new UnlSdk.Map({
container: "map",
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
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": "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>