Create a Gradient Dashed Line Using an Expression in Maptoolkit Maps JS
Dashed lines and color gradients can be combined in Maptoolkit Maps JS by setting both line-dasharray and a line-gradient expression on the same line layer. The gradient is defined using an interpolate expression along the line’s progress from 0 to 1, while the dasharray controls the dash and gap lengths. Use this technique to style routes, boundaries, or paths with visual progression, such as a trail that transitions from green to red to indicate elevation gain.
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [-77.035, 38.875],
zoom: 12,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
const geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
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]
]
}
}]
};
map.on('load', () => {
map.addSource('line', {
type: 'geojson',
lineMetrics: true,
data: geojson
});
map.addLayer({
id: 'line',
type: 'line',
source: 'line',
paint: {
'line-color': 'red',
'line-width': 14,
'line-gradient': [
'interpolate', ['linear'], ['line-progress'],
0, 'blue',
0.1, 'royalblue',
0.3, 'cyan',
0.5, 'lime',
0.7, 'yellow',
1, 'red'
],
'line-dasharray': [10, 2.4]
},
layout: {
'line-cap': 'round',
'line-join': 'round'
}
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Create a Gradient Dashed Line Using an Expression - Maptoolkit Maps JS</title>
<meta property="og:description" content="Create a dashed line with a gradient color along its length." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [-77.035, 38.875],
zoom: 12,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
const geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
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]
]
}
}]
};
map.on('load', () => {
map.addSource('line', {
type: 'geojson',
lineMetrics: true,
data: geojson
});
map.addLayer({
id: 'line',
type: 'line',
source: 'line',
paint: {
'line-color': 'red',
'line-width': 14,
'line-gradient': [
'interpolate', ['linear'], ['line-progress'],
0, 'blue',
0.1, 'royalblue',
0.3, 'cyan',
0.5, 'lime',
0.7, 'yellow',
1, 'red'
],
'line-dasharray': [10, 2.4]
},
layout: {
'line-cap': 'round',
'line-join': 'round'
}
});
});
</script>
</body>
</html>Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.
How it works
This combines two line properties that are usually shown separately: line-dasharray for the
pattern and line-gradient for the colour along the line.
line-gradient reads ['line-progress'], which runs 0 to 1 along the feature, and needs
lineMetrics: true on the source. Without that flag the gradient silently does nothing.
line-dasharray is in line widths, not pixels, so [2, 1] means a dash twice the line
width followed by a gap of one width. Change line-width and the dash pattern scales with
it, which is usually the behaviour you want and surprising the first time.
Dash arrays do not interpolate across zoom levels the way colours do, so a pattern tuned at one zoom can look dense or sparse at another.
Next steps
Dashes conventionally mean something provisional: a planned route, an unpaved section, a ferry leg. Using them that way rather than decoratively is the next step, which usually means two layers, solid for confirmed and dashed for not.
Combining that with data-driven colour gives you a line that shows both status and value at once, and the Routing API returns per-segment information to drive it from.