MapFlyTo
Heavy — ~45KBAn interactive map that flies between locations as the reader scrolls. Each 'chapter' of your story is tied to a place on the map — when the reader reaches that chapter, the map smoothly flies to the new location, zooming and rotating to frame the scene.
River journey in three chapters
A fly-to map that follows the Murray-Darling river system from headwaters to mouth across three scroll-triggered chapters.
Skip map
Interactive map flying along the Murray-Darling river system from headwaters to mouth
Headwaters — Northern Basin
Headwaters — Northern Basin
When to use
- Stories that follow a geographic journey — along a river, across a region, between cities
- When location context matters — showing where events happened on a real map
- 3-5 locations that tell a story in sequence
When NOT to use
- If you just need a static map image — a simple image in a Section is lighter
- Stories with no geographic element — the map adds weight without value
- More than 6-7 chapters — the map becomes a slideshow. Consider splitting into multiple maps
Configuration
- Map style: the visual appearance of the map — street maps, satellite, terrain, or a custom style
- Chapters: each chapter defines a location (latitude/longitude), zoom level, and optional camera angle (pitch and bearing)
- Speed: how quickly the map flies between locations — slow for dramatic effect, fast for quick transitions
- Interactive: whether the reader can pan/zoom the map themselves (default: view-only)
- Overlay: custom content layered on top of the map — labels, annotations, or a legend
Limitations
- Requires an internet connection to load map tiles — maps won't work offline
- Map backgrounds depend on a free tile server. If the server is unavailable, maps show a blank background
- WebGL required — very old browsers or devices without GPU acceleration won't render maps
- On devices preferring reduced motion, shows a static map placeholder instead of flying animations