Spatial
Map Canvas
Deterministic MapLibre map mount.
PrimitivespatialAdvanced
Install
npx remotion-ui@latest add map-canvasLow-level MapLibre mount with delayRender until the map is idle. Use as the foundation for custom map animations.
Advanced — installs maplibre-gl. Render with --gl=angle --concurrency=1.
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add map-canvasImport after install
@/remotion/primitives/map-canvas- Use when: map scenes, routes, markers, and spatial storytelling.
- Customize: center, zoom, onMapReady, 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 { MapCanvas } from "@/remotion/primitives/map-canvas";
<MapCanvas center={[8.54, 47.38]} zoom={7} onMapReady={setMap} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| center* | [number, number] | — | Map center [lng, lat]. |
| zoom | number | 7 | Initial zoom level. |
| onMapReady | (map: Map) => void | — | Called when map is idle. |