Spatial
Map Route
Animated GeoJSON route line on a map.
PrimitivespatialAdvanced
Install
npx remotion-ui@latest add map-routeAnimates a GeoJSON line reveal on an existing MapLibre instance. Pair with map-canvas or map-flight.
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add map-routeImport after install
@/remotion/primitives/map-route- Use when: map scenes, routes, markers, and spatial storytelling.
- Customize: map, route, progress, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { MapRoute } from "@/remotion/primitives/map-route";
<MapRoute map={map} route={targetRoute} progress={0.5} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| map* | Map | null | — | MapLibre map instance. |
| route* | Feature<LineString> | — | GeoJSON line to animate. |
| progress | number | — | Route reveal progress 0–1. |