Some stories are inherently geographic — a journey, an expedition, the spread of something, the history of a neighborhood. Told as a slideshow they fall flat, because each slide throws away the reader's sense of where they are. A story map keeps one continuous map underneath the text and moves it as the reader scrolls, so the geography carries the narrative instead of interrupting it.
What a story map is
A story map is a scroll-driven presentation. As the reader scrolls, a text panel moves through your chapters while the map flies to the location each one is about. The technique is often called scrollytelling.
The critical difference from a slideshow is continuity. When the map flies from one chapter's location to the next, the reader watches the transit — they see how far it was, which direction, what lay in between. That spatial relationship is information, and a cut between two static images destroys it.
When to use one
Story maps work when the sequence matters:
- A route, journey, or expedition
- Change over time in one place
- A guided tour of several sites
- A field report or investigation with a geographic thread
- Anything you'd otherwise write as an article with a map dropped in the middle
They're the wrong tool when readers need to explore freely or look themselves up. If someone's core question is "what's near me?", build a store locator instead. A story map sets the pace deliberately; that's a feature for narrative and a bug for search.
Step 1: Write first, map second
The most common mistake is building the map first and writing captions to fit it. Do it the other way round.
Draft the story as plain prose and break it into chapters. Each chapter should have one location and one idea. If a chapter needs the map in two places, it's two chapters.
Six to twelve chapters is a comfortable range. Under four and the format isn't earning its keep; past fifteen, scroll fatigue sets in.
Step 2: Build the chapters
Create a Story Map and add a chapter per section. Each takes:
- Text, written in Markdown — headings, bold, italics, lists, links, and
images (
) all work. - A location, which sets where the map flies to.
- A camera position — more on this below.
- Optional marker styling: color, icon, size, whether to show a number.
Step 3: Use the camera deliberately
Each chapter stores its own camera, and this is where a story map goes from functional to genuinely cinematic. Four settings:
- Zoom — how close. Vary it. Opening wide for context and then diving in gives the story a rhythm; ten chapters at identical zoom feel monotonous.
- Bearing — which way is up, 0–360°. Rotating so a valley or a street runs vertically up the screen can make a route far easier to follow than forcing north-up.
- Pitch — the tilt, 0–85°. At high pitch with 3D terrain enabled, mountains and valleys actually read as terrain rather than as brown shading.
- Duration — how long the flight takes. Slower for long distances, faster for short hops.
The story map reference lists the ranges for each.
A practical rule: match flight duration to distance. A jump across a continent that takes the same 800ms as a hop across town feels wrong, because the reader's eye can't follow it.
Step 4: Choose animations
Chapters can enter with one of several presets — fade, slide up, slide left, scale in, blur in, or a spring. Each chapter can also carry its own delay.
Pick one and use it throughout. Mixed entrance animations look like a template demo. The animation should be barely noticeable; its job is to soften the arrival of text, not to be the thing the reader watches.
Step 5: Tune the scroll
Two settings determine how the thing feels:
- Scroll offset controls how far down the viewport a chapter must be before it triggers. Around the middle is a good default — trigger too early and the map moves before the reader has arrived at the text.
- The progress indicator shows how far through the story the reader is. On a long story it's genuinely reassuring; on a five-chapter one it's noise.
Then read the whole thing top to bottom at normal speed, on a phone. Most timing problems are only visible when you stop editing and start reading.
Step 6: Style and publish
Story maps use the shared UI customization controls, so the text panel can be themed to match your site — accent color, panel and card colors, font, corner radius, card style, and panel width.
Two things worth checking before publishing:
- Contrast. Text over a satellite basemap needs a solid panel background, not a translucent one.
- Panel width. Narrow enough that the map stays visible, wide enough that the text isn't a column of two words. Somewhere near the middle of the range usually works.
Then publish to your subdomain or custom domain, and embed it if it belongs inside an existing article.
Things that make story maps better
- Add images to chapters. A photograph of the place you're flying to anchors it far better than prose alone. There's no separate image field — drop a Markdown image into the chapter text, pointing at a URL you host.
- Turn on 3D terrain for anything mountainous. Combined with pitch, it's the single biggest upgrade for outdoor stories.
- Keep chapter text short. If a reader has to scroll twice within one chapter, the map sits still and the effect dies.
- Give the last chapter somewhere to go. End wide, with a link.
Build a story map — free to start.