Skip to content
Skip to contents
Skip to reading controls

Search skills⌘K

Setting the chapter. One moment.

Remotion Maps · remotion-dev/skills · Skills Docs

remotion-dev
/
remotion-dev/skills

Issue No. 17 · Remotion Maps

↖Back to the cover

Skills · Remotion…

Remotion Best Practices
Remotion Captions
Remotion Create
Remotion Docs
Remotion Interactivity
Remotion Maps
- OpenAI
- Cesium Path
- Cesium Flythrough
- City Path

12 chapters · 16 min

06 / 12Remotion Maps

Skills

Chapter 6 of 12

Remotion Maps

Remotion Map animation knowledge

1 minute · 104 words · 5 sections

Choose exactly one technique from the intended shot, then load only that technique’s TECHNIQUE.md. Every technique directory is self-contained and may be removed without breaking the others.

Static map (opens in a new tab)

Requires you grab a satellite image and mount it in a <Img> tag, and animate on top

Mapbox

On this page

Static map
Mapbox
MapLibre
MapTiler
CesiumJS
Appendix

This chapter

Position: 6 of 12
Reading time: 1 min
Words: 104
Bundled files: 31 files

Source

View SKILL.md(opens in a new tab)

6.5

Example Root · assets

6.73d Data Sources

6.83d Flyover Architecture

6.93d Troubleshooting

6.10Prep Cesium Path

6.11TECHNIQUE · cesium

6.12Render Stability · references

6.13TECHNIQUE · mapbox

⋯15 more in the appendix

07Remotion Markup

08Remotion Multimedia

09Remotion Render

10Remotion Saas

11Remotion Studio

12Remotion Upgrade

(opens in a new tab)

Requires a Mapbox key
Nicer styles by default
Map can display a round globe when zoomed out
Includes nice 3D buildings such as the Eiffel tower

MapLibre (opens in a new tab)

Requires no API key, fully free
Does not include 3D building

MapTiler (opens in a new tab)

Uses MapTiler
Annotations can be drawn on top of geographic features: borders, rivers, labels

CesiumJS (opens in a new tab)

Flythroughs through terrain and mountains
“Flight simulator” perspective

Install this repository

$ npx skills add remotion-dev/skills

Skills install per repository, not per chapter — the CLI has no documented per-skill form, so we do not print one.

Typesetting note

Removed “Remotion Maps”, a leading h1 that duplicated the chapter title.

Agent Skills specification

Chapter 05Remotion Interactivity Chapter 07Remotion Markup

Colophon for this issue

Colophon

How this issue was made

Source

github.com/remotion-dev/skills, branch main, last pushed 7 August 2026.

Licence

All rights reserved — view on GitHub — with no detectable licence, this issue links rather than republishes: the chapters are omitted from the agent manifest and from the whole-book markdown.

Discovery

12 chapters found by walking the repository tree for SKILL.md, not by matching a directory convention. One layout observed: skills/*/SKILL.md.

Issue colours

Resolved from a curated brand profile — hue 254°, chroma 0.190. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.

Heading repairs

1 repair applied to this chapter so the document has one h1 and no skipped levels:

Removed “Remotion Maps”, a leading h1 that duplicated the chapter title.

Spec compliance

Every chapter satisfies the Agent Skills specification’s frontmatter rules.

Images

Images inside a chapter come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.

Signal

Install counts come from skills.sh. They measure downloads, not quality, and an unranked repository is not an unread one.

Agent surfaces

The whole issue is available as one markdown document at /remotion-dev/skills.md, and each chapter at its own .md URL.

Publication

Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.

remotion-dev/skills

(opens in a new tab)

Markdown for agents

Appendix 6.1–6.28

31 files · 476 KB

Everything this skill ships beside its prose. 28 of them are set here as subchapters of chapter 6; the other 3 are described rather than reproduced.

Assets1 file

Templates, schemas and fixtures the skill draws on.

Remotion IconNot shown here — 1 KB PNG imageGitHub (opens in a new tab)

Also bundled30 files

Everything else published alongside the skill.

agents/1 file · 293 B

6.1OpenAIagents/openai.yamlYAML · 293 B

techniques/cesium/assets/5 files · 23 KB

6.2Cesium Pathtechniques/cesium/assets/cesium-path.jsonJSON · 12 KB
6.3Cesium Flythroughtechniques/cesium/assets/CesiumFlythrough.tsxTypeScript · 9 KB
6.4City Pathtechniques/cesium/assets/city-path.jsonJSON · 223 B
6.5Example Roottechniques/cesium/assets/example-Root.tsxTypeScript · 923 B
6.6Flight Pathtechniques/cesium/assets/flight-path.tsTypeScript · 1 KB

techniques/cesium/references/3 files · 16 KB

6.73d Data SourcesUse MapTiler for both layers:Markdown · 1 KB
6.83d Flyover ArchitectureDeep detail behind TECHNIQUE.md: provider loading, the camera-path pipeline, per-frame camera math, and the proven…Markdown · 8 KB
6.93d TroubleshootingCesium’s globe will not draw in a standalone headless Playwright/Chromium harness.Markdown · 7 KB

techniques/cesium/scripts/1 file · 5 KB

6.10Prep Cesium Pathtechniques/cesium/scripts/prep-cesium-path.mjsJavaScript · 5 KB

techniques/cesium/1 file · 4 KB

6.11TECHNIQUEInstructions for achieving map animations with “flight-simulator” perspective in Remotion.Markdown · 4 KB

techniques/mapbox/references/1 file · 4 KB

6.12Render StabilityRead this reference before building a moving 2D MapTiler scene or diagnosing a wavering Remotion render.Markdown · 4 KB

techniques/mapbox/1 file · 13 KB

6.13TECHNIQUEUse Mapbox GL JS for rendering maps in Remotion when the user wants Mapbox styles or higher-fidelity map visuals…Markdown · 13 KB

techniques/maplibre/references/1 file · 4 KB

6.14Render StabilityRead this reference before building a moving 2D MapTiler scene or diagnosing a wavering Remotion render.Markdown · 4 KB

techniques/maplibre/1 file · 13 KB

6.15TECHNIQUEUse MapLibre GL JS for rendering maps in Remotion.Markdown · 13 KB

techniques/maptiler/assets/5 files · 17 KB

6.16Country Labeltechniques/maptiler/assets/CountryLabel.tsxTypeScript · 2 KB
6.17Example Roottechniques/maptiler/assets/example-Root.tsxTypeScript · 1 KB
6.18Map Tiler Vector Elementtechniques/maptiler/assets/MapTilerVectorElement.tsTypeScript · 2 KB
6.19River Revealtechniques/maptiler/assets/RiverReveal.tsxTypeScript · 11 KB
6.21Tokenstechniques/maptiler/assets/tokens.tsTypeScript · 1 KB

techniques/maptiler/assets/sample-data/1 file · 13 KB

6.20Yarlung Flowtechniques/maptiler/assets/sample-data/yarlung-flow.jsonJSON · 13 KB

techniques/maptiler/references/4 files · 19 KB

6.22Map Data SourcesChoose the source independently for every story element.Markdown · 5 KB
6.23Map Explainer ArchitectureDeep detail behind TECHNIQUE.md: the timing model, the river reveal + electric head, the per-country sequence, and…Markdown · 7 KB
6.24Map Geo PrepHow the basemap is cleaned and how ../scripts/prep-geo.mjs bakes the per-country data the component reads.Markdown · 4 KB
6.25Render StabilityRead this reference before building a moving 2D MapTiler scene or diagnosing a wavering Remotion render.Markdown · 4 KB

techniques/maptiler/scripts/1 file · 7 KB

6.26Prep Geotechniques/maptiler/scripts/prep-geo.mjsJavaScript · 7 KB

techniques/maptiler/1 file · 4 KB

6.27TECHNIQUEMapTiler is a good solution for map animations where geographics features should be drawn as annotations on top of…Markdown · 4 KB

techniques/static-map/1 file · 1 KB

6.28TECHNIQUEUse a static image when the map only provides location context.Markdown · 1 KB

Sample RiverNot shown here — 6 KB GEOJSONGitHub (opens in a new tab)
Country MetaToo long to set here — 325 KB JSONGitHub (opens in a new tab)