---
id: gh-remotion-maps
name: "remotion-maps"
url: https://skills.yangsir.net/skill/gh-remotion-maps
author: remotion-dev
domain: multimedia
tags: ["remotion", "map-animation", "video-production", "geospatial", "data-visualization"]
install_count: 166700
rating: 4.80 (120 reviews)
github: https://github.com/remotion-dev/skills/tree/main/skills/remotion-maps
---

# remotion-maps

> 此技能帮助在 Remotion 中高效制作地图动画，支持多种地图服务（Mapbox、MapLibre、MapTiler、CesiumJS）和静态卫星图，可用于数据可视化、旅行视频等场景，节省开发时间。

**Stats**: 166,700 installs · 4.8/5 (120 reviews)

## Before / After 对比

### 创建30秒地图动画所需时间

**Before**:

在没有此技能之前，用户需要手动编写地图动画代码，从零开始集成地图服务，调整样式和动画参数，通常需要数小时。

**After**:

该Skill提供了现成的技术方案和最佳实践，只需选择合适的技术并传入数据即可快速生成高质量地图动画，大幅缩短开发时间。

| Metric | Before | After | Change |
|---|---|---|---|
| 时间 | 180分钟 | 20分钟 | -89% |

## Readme

# Remotion Maps

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](techniques/static-map/TECHNIQUE.md)

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

## [Mapbox](techniques/mapbox/TECHNIQUE.md)

- 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](techniques/maplibre/TECHNIQUE.md)

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

## [MapTiler](techniques/maptiler/TECHNIQUE.md)

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

## [CesiumJS](techniques/cesium/TECHNIQUE.md)

- Flythroughs through terrain and mountains
- "Flight simulator" perspective


---
*Source: https://skills.yangsir.net/skill/gh-remotion-maps*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-remotion-maps/markdown*