remotion-maps

Remotion で作る動画に、地図を動かして入れたいときに効きます。経路が伸びていく、国境が引かれて色が付く、山あいを飛ぶように進む、といった場面です。

SKILL.md の大きさ（2026-10-23 時点）

1,030 バイト

同梱ファイル（2026-10-23 時点）

31 件

選べる地図の手法

5 つ

frontmatter の版（2026-10-23 時点）

4.0.538

SKILL.md は短い振り分け表です。撮りたい絵から手法をちょうど 1 つ選び、その手法の TECHNIQUE.md だけを読め、と書かれています。手法ごとのフォルダはそれぞれで完結していて、ほかを消しても壊れないつくりです。

5 つの手法の選び分け

静止画がいちばん小さい

静止画の手法は、最終の縦横比で書き出した地図の画像を public/ に置き、CanvasImage と staticFile() で敷くだけです。資料は、最も小さく、速く、毎回同じ絵になる手法だと位置づけています。

印や文字は、ふつうの Remotion の要素として上に重ねます。重ねる要素の書き方は remotion-interactivity と remotion-markup の決まりに従え、とあります。

Mapbox と MapLibre は経路の動き

2 つの資料はほぼ同じ文面で、地図の描画が違うだけです。距離・大圏航路・線の切り出しのような地理の計算は @turf/turf に任せ、自前で書くなと定めています。

例は、チューリッヒからニューヨークへの大圏航路を少しずつ切り出して伸ばし、カメラがその先端を追う 1 本です。線・印・地名は地図側の GeoJSON の層で描き、HTML の印は使いません。

座標は [経度, 緯度] の順です。緯度を先に書く癖があると、ここで取り違えます。

MapTiler は解説の地図

国が順に光る、川が流れるように描かれる、といった「説明する地図」の手法です。同梱の例は、ヤルンツァンポ川（ブラマプトラ川）が上流から下流へ描かれ、川が国に入るたびに国境が引かれ、塗りが広がり、国名が浮かぶ流れです。

1. 要素ごとに出どころを決めるMapTiler の地図データにあるものはそれを使い、無いもの・争いのあるもの・順に描くものは GeoJSON にする
2. 地理データを焼くscripts/prep-geo.mjs で川の線・国境・国ごとの情報を作る
3. 雑多な層を消す読み込んだら地名の層と内側の行政界を外す
4. コマごとに色と線を変えるsetData と setPaintProperty で、時刻から描き進める
5. 国名は HTML で重ねる地図の座標を毎コマ画面の位置に直して置く

地図データの線は、タイルの境目で切れています。始点から終点へ順に描く動きに意味があるなら、先に 1 本の GeoJSON にまとめよ、と資料は繰り返しています。

CesiumJS は立体の飛行

landscape と city の 2 つの使い方があります。風景は MapTiler の地形と衛星写真、街並みは Google Photorealistic 3D Tiles を使います。

同梱の CesiumFlythrough.tsx をそのまま写して、経路・高度・先読みの距離を渡す形です。経路の角は 3 回の角の丸め（Chaikin 法）でならし、カメラは一定の速さで進み、曲がるときは機体のように傾きます。

建物の輪郭を立ち上げただけの立体は、街の飛行には使うなとしています。質感の無い箱が並ぶだけになるためです。

振り分け役か remotion-markup をもう入れているとき

この 31 件は、振り分け役の remotion-best-practices と remotion-markup の中にも remotion-maps/ として入っています（2026-10-23 確認）。違いは静止画の資料の最後の 1 行で、ほかのスキルへのリンクが付くかどうかだけです。

どちらかを入れているなら、地図の中身はもう手元にあります。単体で入れる意味は、地図の作業だけで呼びたいときに限られます。

Remotion を使っていないとき

useCurrentFrame() でコマを進め、delayRender() で地図の読み込みを待つ、Remotion 前提の書き方です。ふつうの Web ページに地図を置く用途には合いません。

地図を 1 枚の背景として見せるだけのとき

カメラも地理データも動かないなら、手法の選び分けは要りません。静止画の手法の中身は、画像を敷くだけの短い 1 枚です。動画づくり全体の決まりは remotion-markup のほうが広く扱っています。

外へ取りに行くものが多い

地図の絵はすべて外のサービスから取ってきます。資料と例のコードに出てくる取り先は次のとおりです。

• Mapbox の地図（mapbox://styles/mapbox/standard）
• MapLibre の試し用の地図（demotiles.maplibre.org）と、描画を手伝う部品の unpkg からの読み込み
• MapTiler の地図・衛星写真・地形（api.maptiler.com）
• CesiumJS 本体（cesium.com の配布元。試した版は 1.143）と Google のタイル（tile.googleapis.com）

部品は npm i mapbox-gl @turf/turf のように入れ、描き出しは remotion render をシェルで動かします。prep-geo.mjs と prep-cesium-path.mjs は手元の Node.js で動かし、JSON をファイルに書き出します（スキルを入れる前に確認すること）。

鍵は組み立てたコードから読める形で渡す

Mapbox のトークンは、組み立てた Remotion のコードから読める環境変数で渡せ、と書かれています。MapTiler のキーは制限の無いキーを使えと指示しています。ドメインを絞ったキーは、画面を持たないブラウザでの描き出しで 403 になるためです。

制限の無いキーは、漏れたときに誰でも使えます。動画を作るためだけのキーを分けて作り、使う量の上限を提供元の側で確かめてください。

描き出しは 1 本ずつ、--gl=angle で

静止画以外は WebGL で描くので、--gl=angle を付け、並列は --concurrency=1 にせよとあります。地図の読み込みを待つため、Cesium では待ち時間を 60〜120 秒に延ばす指示もあります。並列で速く回すことはできない前提で、時間を見積もってください。

カメラを毎コマ動かすと地図がちらつく

平面の地図で map.jumpTo() を毎コマ呼ぶと、画面を持たない描き出しで地形の陰影や衛星写真が揺れることがある、と資料は書いています。直し方は、大きめの地図を 1 枚だけ描いて止め、CSS の移動と拡大でカメラの動きを見せる方法です。

この安定化の資料は Mapbox・MapLibre・MapTiler の 3 か所に同じものが入っていて、文面は MapTiler 向けです。Mapbox と MapLibre の例は毎コマカメラを動かす形なので、短い MP4 を描き出してちらつきを確かめてから使え、とあります。

Studio の再生だけで判断しない

静止画以外の資料は、Studio の再生ではなく描き出した絵を見て確かめよと書いています。Mapbox・MapLibre・CesiumJS は、必要な縦横比のすべてで確かめることも求めています。Cesium では、全体の前に途中の 1 コマを静止画で描き出します。

帰属表示の決まりと例のコードが食い違う

Mapbox・MapLibre・CesiumJS の資料は、提供元の帰属表示（著作権の表記）を見えるように残せ、と書いています。ところが Mapbox と MapLibre の例のコードは、地図の表記の欄を attributionControl: false で切っています。

MapTiler の資料はさらに、ロゴと表記を CSS で隠す手順を載せています。例をそのまま写すと表記が消えるので、帰属表示を画面に残すよう依頼文で指定してください。

境界は作る側で確かめる

自前で描いた地理や、境界に争いのある地域は、出典と時点を記録せよと資料にあります。国境の引き方は国や地域で扱いが分かれるので、公開する動画では依頼する側で確かめてください。

ライセンス

このスキルのリポジトリにはライセンスの明示がありません。再配布や商用利用の前にリポジトリを確認してください。Remotion 本体を業務で使うときの費用は別で、remotion-best-practices の解説に規約の要点をまとめています。

API キーを用意せずに試せますか

試せます。静止画の手法と MapLibre はキーが要りません。MapLibre の例は試し用の無料の地図を使い、経路が伸びてカメラが追う動きまで再現できます。立体の建物は出ません。

Mapbox と MapLibre はどう選べばいいですか

資料の書き分けでは、Mapbox のトークンを持っていて、その見た目や立体の建物が欲しいなら Mapbox、鍵を使わず無料で済ませたいなら MapLibre です。2 つの資料はほぼ同じ文面で、カメラの動かし方の補助が少し違うだけです。

山の中を飛ぶような映像は作れますか

CesiumJS の手法の landscape が担当です。MapTiler の地形と衛星写真を使い、川沿いの経路を飛ぶ例と、その経路を作るスクリプトが同梱されています。例の値は 13 km を 24 秒で進む、ゆっくりした速さです。

振り分け役の remotion-best-practices を入れていれば要りませんか

中身は同じです。振り分け役と remotion-markup の両方に、この本文と 31 件の資料がほぼそのまま同梱されています（2026-10-23 確認）。地図の作業だけで呼びたいときや、/remotion-maps と名前で呼びたいときに単体で入れる意味があります。

対応しているエージェントはどれですか

Claude Code と Codex です。公開元の README が「Claude Code・Codex などの AI エージェントで役立つ」と書き、Codex 向けの設定ファイル（agents/openai.yaml）も同梱しています（2026-10-23 確認）。当サイトは公開元が明記しているものだけを「対応」として表示する方針です（指標の意味と限界）。