Map Route
Animated GeoJSON route line on a map.
PrimitiveMaps & deviceAdvanced
map-route30fps · 960×540
Install
$ npx remotion-ui@latest add map-routeAnimates a GeoJSON line reveal on an existing MapLibre instance. Pair with map-canvas or map-flight.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/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
Example
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. |