Make a scrollytelling map
A scrollytelling map keeps one map fixed on the screen while the reader scrolls through chapters of text. Each chapter carries a map beat: a camera position, the layers that are visible, a filter, and any highlights. As the reader moves down the page the camera flies to the next beat and the layers cross-fade, so the map answers the words instead of sitting beside them.
In Spatly you author this in a chapter timeline. Click a chapter and the map jumps to its beat; set the view by moving the map, then press Save beat. Camera and layer opacity interpolate against scroll progress, not only on chapter snap, so a reader watching a fault line or a plume sees it grow as they read. The example below is a real published story running live on this page: scroll it, and the map follows.
Reduced-motion readers get an instant jump instead of a flight, every chapter deep-links with #ch=3, and the whole story publishes as a link, an embed, or a set of slides.
Kahramanmaraş 2023, a six-chapter story on the USGS aftershock sequence. This is a real published Spatly surface, not a screenshot.
How to make a scrollytelling map
- Step 1
Bring your places
Drop a GeoJSON or a CSV with coordinates, or point at a URL that refreshes. Spatly ingests it, samples the fields for ramps and categories, and drafts a first chapter.
- Step 2
Set beats per chapter
Move the map to frame each moment, press Save beat, and choose the visible layers, filter and highlight. Duplicate a beat and nudge it to build a sequence quickly.
- Step 3
Publish and embed
Publish public, unlisted, password-protected or domain-restricted. Copy the embed snippet, or present the same beats as slides.
Bring the data you already have
Spatly ingests it into PostGIS, samples the fields for ramps and categories, and serves GeoJSON or vector tiles depending on size. Every source keeps its refresh policy, cache and health.
Embed this exact surface
Paste one script tag into any page. The map mounts where the tag sits, resizes to its content, and needs no build step.
<script src="https://spatly.io/embed.js" data-spatly="hpecnx3B9Y" data-height="640"></script>
Posts spatly:ready, spatly:resize, spatly:expand and spatly:select. Embed docs
Good to know
- What is a scrollytelling map?
- A map that stays fixed on screen while the reader scrolls through chapters of text, with the camera, layers and filters changing per chapter so the map illustrates the narrative.
- Do I need to write code?
- No. You set each chapter's map beat by moving the map and pressing Save beat. There is a full expression escape hatch for power users, but the first story needs none.
Make a scrollytelling map in Spatly.
Start from a basemap and a file, or open a template and take it apart. Every plan includes Spatly embeds, the REST API and the MCP server.
41.0082°N 28.9784°E · z 11.3 · ⟂ 0°