Animated route map videos — travel reels from a GPX file

If you run a travel account, a delivery service, a cycling team, or anything that involves moving across a map — you have made a route map video. You have also probably made it in Mapbox Studio, exported a screen recording, and watched the frame rate stutter on a corner of the map you cared about most.

There is a cleaner build: SVG path tracing, a marker that rides the path, a distance counter that ticks up alongside, and a basemap that stays still. All in one HTML file. From a GPX file or a JSON of coordinates, render any number of routes to MP4.

What an "animated route" actually is

Three pieces:

1. A basemap — either a static tile screenshot or a simplified SVG world. Doesn't move.
2. A path — the route polyline, rendered as an SVG <path> with stroke-dasharray-based tracing.
3. A marker — a circle or icon riding the path's endpoint at any given time.

The illusion of "the map is being explored" comes from the path tracing, not from camera motion. Resist the urge to pan the basemap; it makes the video harder to follow.

The path-trace primitive

Same primitive as an animated line chart: set stroke-dasharray equal to the path length, set stroke-dashoffset from that length to zero. Animate stroke-dashoffset and the path draws.

For a route, the trick is converting GPS coordinates to SVG coordinates. Two steps:

1. Project lat/lng to a flat plane. Web Mercator is fine for most distances.
2. Scale the projected points to fit the SVG viewBox.

Once the path is an <svg><path d="M...">, it animates the same way any other SVG path does.

The <animateMotion> element rides the marker along the path — synchronized with the trace, since both use the same duration. SVG handled the hard part for you in 2008; we just forgot.

The basemap question

Three options, in increasing complexity:

• Solid color or radial gradient. Looks "designed," not "geographic." Use for stylized travel content.
• Static Mapbox screenshot as a PNG layer. Real, recognizable, costs an API call.
• Simplified country/region SVG rendered behind the route. Recognizable as geography without the tile-server cost.

For a video that lives on social, option 1 is usually the right call — the route shape is what people see, the basemap is just texture. For a brand that needs the route placed in geographic context (a delivery service showing "we cover the bay area"), option 2 or 3.

Distance / elevation counter

The number in the corner does heavy lifting. It tells the eye how far along the route is, ticks up alongside the trace, and gives the video a stable focal point.

Compute it the same way as the trace: cumulative distance along the path, scaled by the current t value. At t=0.5, show half the total distance.

For multi-day routes, add an elapsed-time counter too — "Day 3, 14:22 elapsed." Two numbers max; more than that and the lower-third gets noisy.

From GPX to SVG path

A GPX file is XML with a list of <trkpt> elements, each with lat and lon. Parse, project, simplify, render:

import { parseString } from "xml2js";

const points = parseGpx(gpxXml); // [{ lat, lon }, ...]
const projected = points.map(webMercator);
const simplified = douglasPeucker(projected, 0.001);
const fitted = fitTo({ w: 520, h: 340, padding: 40 })(simplified);
const d = `M ${fitted[0].x} ${fitted[0].y} ` + fitted.slice(1).map(p => `L ${p.x} ${p.y}`).join(" ");

The douglasPeucker simplification matters — a raw GPX track has thousands of points, most of them redundant. Simplification gets you a path that renders cleanly without losing the route's character.

Use cases

• Travel reels — daily routes from a tour, weekly summaries.
• Delivery coverage maps — "we drove 4,200 km this week."
• Cycling / running clubs — Strava-style highlight reels.
• Sales / business — "our team visited these 14 cities in Q2."

For each, the template is the same; only the path data and the labels change.

Batch from a coordinate file

The same template + a coordinates JSON renders N route videos. For a travel brand publishing a video per trip, the variant cost goes from "an afternoon in After Effects" to "the time it takes the encoder to write the file."

Open the playground, drop in a coordinate array, watch the marker ride the trace.