Map Canvas
Deterministic MapLibre map mount.
PrimitiveMaps & deviceAdvanced
map-canvas30fps · 960×540
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.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/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
Example
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. |