Animate a Line
To animate a line drawing itself across the map, you maintain an array of coordinates and add one point per animation frame before calling setData on the GeoJSON source. Each requestAnimationFrame call extends the line by one step until the full path is drawn. Use this technique to replay a recorded route, show a network spreading, or visualize a path being traced in real time.
const API_KEY = 'YOUR_API_KEY';
// Build a sine-wave path across Austria
const steps = 500;
const coords = [];
for (let i = 0; i <= steps; i++) {
const t = i / steps;
const lng = 9.5 + t * 8;
const lat = 47.5 + Math.sin(t * Math.PI * 4) * 1.0;
coords.push([lng, lat]);
}
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [13.5, 47.5],
zoom: 6,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
const geojson = { type: 'Feature', geometry: { type: 'LineString', coordinates: [] } };
const DRAW_DURATION = 5000; // draw the full line over 5s, frame-rate independent
let animId;
function runAnimation() {
cancelAnimationFrame(animId);
let startTime;
function frame(now) {
if (startTime === undefined) startTime = now;
const t = Math.min((now - startTime) / DRAW_DURATION, 1);
const count = Math.max(1, Math.floor(t * coords.length));
geojson.geometry.coordinates = coords.slice(0, count);
map.getSource('line').setData(geojson);
if (t < 1) animId = requestAnimationFrame(frame);
}
animId = requestAnimationFrame(frame);
}
map.on('load', () => {
map.addSource('line', { type: 'geojson', data: geojson });
map.addLayer({
id: 'line-animation',
type: 'line',
source: 'line',
paint: { 'line-color': '#ee8a65', 'line-width': 3 }
});
runAnimation();
});
document.getElementById('replay').addEventListener('click', runAnimation);<!DOCTYPE html>
<html lang="en">
<head>
<title>Animate a Line - Maptoolkit Maps JS</title>
<meta property="og:description" content="Animate a line by progressively adding coordinates to a GeoJSON source." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
#replay {
position: absolute;
top: 10px;
left: 10px;
padding: 10px 20px;
background: #ee8a65;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
}
</style>
</head>
<body>
<div id="map"></div>
<button id="replay">Replay</button>
<script>
const API_KEY = 'YOUR_API_KEY';
// Build a sine-wave path across Austria
const steps = 500;
const coords = [];
for (let i = 0; i <= steps; i++) {
const t = i / steps;
const lng = 9.5 + t * 8;
const lat = 47.5 + Math.sin(t * Math.PI * 4) * 1.0;
coords.push([lng, lat]);
}
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [13.5, 47.5],
zoom: 6,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
const geojson = { type: 'Feature', geometry: { type: 'LineString', coordinates: [] } };
const DRAW_DURATION = 5000; // draw the full line over 5s, frame-rate independent
let animId;
function runAnimation() {
cancelAnimationFrame(animId);
let startTime;
function frame(now) {
if (startTime === undefined) startTime = now;
const t = Math.min((now - startTime) / DRAW_DURATION, 1);
const count = Math.max(1, Math.floor(t * coords.length));
geojson.geometry.coordinates = coords.slice(0, count);
map.getSource('line').setData(geojson);
if (t < 1) animId = requestAnimationFrame(frame);
}
animId = requestAnimationFrame(frame);
}
map.on('load', () => {
map.addSource('line', { type: 'geojson', data: geojson });
map.addLayer({
id: 'line-animation',
type: 'line',
source: 'line',
paint: { 'line-color': '#ee8a65', 'line-width': 3 }
});
runAnimation();
});
document.getElementById('replay').addEventListener('click', runAnimation);
</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.
Use the Maptoolkit Connector. Create an interactive map with zoom level 6, centered around [13.5, 47.5]. Animate a sine-wave line drawing progressively across Austria, with a replay button.