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 and links all work. Add images with the image button, or paste or drop them straight into the text; they upload as you go, and Preview shows the chapter as readers will see it.
- A location, which sets where the map flies to.
- A camera position — more on this below.
- A marker: none, a dot, the chapter number, or an icon, in any color.
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.
- Fly time — how long the move takes. Slower for long distances, faster for short hops.
If sliders feel indirect, Set view on map lets you drag, zoom and tilt the map itself and keep the view you land on; Preview plays the move.
Each chapter also picks how the camera travels: Glide (the default) moves straight there, Fly pulls out and dives back in along an arc — good for long jumps — and Jump cuts. Orbit slowly circles the place once the camera arrives, which suits a landmark or a summit.
The story map reference lists the ranges for each.
A practical rule: match fly time 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: Draw the route
For a journey, turn on a route to join the chapters in order. Straight line draws each leg as a direct line; Follow roads routes it by car, bike or on foot. Road routes are worked out in the editor when you add or move a chapter and saved with the story, so readers never wait for them. A leg too long for the travel mode — over 1,500 km by car, 300 km by bike or 50 km on foot — or one with no road between the two places is drawn as a dashed straight line, and any single chapter can be set to a straight line or no line at all.
Highlight travelled path draws the route bold up to the current chapter and faint after it, so the line itself shows how far the story has come.
Step 6: Tune the scroll
How the thing feels comes down mostly to each chapter's fly time and how long its text is. One story-wide setting helps:
- The progress indicator shows how far through the story the reader is, with previous and next buttons. On a long story it's genuinely reassuring; on a five-chapter one it's noise.
Readers can also move with the keyboard — the arrow keys, Page Up and Page Down,
Home and End — and every chapter has its own link: add #chapter-3 to the
story's address to send someone straight to chapter 3.
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 7: Style and publish
The text panel takes one of four themes — Light, Dark, Glass, or Minimal — plus an accent color and a font: the default sans-serif, Inter, a serif, or monospace. Layout puts the map on the left or the right and sets the title size, the card style and corners, and a compact spacing for text-light stories.
One thing worth checking before publishing:
- Contrast. Glass sets white text on a dark, slightly see-through panel — striking beside satellite imagery, but read a chapter or two in it before committing; on a long text-heavy story Light or Dark is easier going.
The story is live at mapji.com/map/your-map — add a subdomain or custom
domain if you want one — and you can 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. Upload it straight into the chapter text (PNG, JPEG, GIF or WebP); large photos are scaled down for you.
- 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.