Appearance
To build a historical story map you write a tightly-scoped narrative, break it into 6-12 steps, and bind each step to a map state — a location, zoom, and layer — so the map changes as the reader scrolls. The distinctive move for history is using a georeferenced historical basemap so readers see the past landscape under the story. You can build one with Esri StoryMaps, or stay free and open with Knight Lab's StoryMapJS or Leaflet plus Scrollama. This guide walks the open route step by step.
What makes a story map "historical"?
A generic story map drops modern pins on a modern basemap. A historical one does two things differently:
- It uses a georeferenced period map as the backdrop, so the geography matches the story's date.
- It treats change over time as the spine — a route taken, a town's growth, a boundary redrawn — not just a tour of locations.
If your map could be replaced by a slideshow of photos, it is not yet using its spatial power.
Step 1 — Plan the narrative before touching software
Write the story first, as plain text, in numbered beats. For each beat note: the one point it makes, the place it concerns, and the map state it needs.
text
Step 1 Intro whole county, 1851 OS basemap
Step 2 The mill zoom to Saltaire, pin + photo
Step 3 Workers'... pan to the model village streets
Step 4 Railway show the rail line layer appear
Step 5 Growth swipe 1851 vs 1893 footprint
...Six to twelve beats is the sweet spot. This plan is your storyboard and prevents the commonest failure — a map that wanders without an argument.
Step 2 — Prepare the georeferenced basemap
Georeference your historical sheet (see the georeferencing guide), then publish it as web tiles so it loads fast:
bash
gdal2tiles.py -z 10-16 -w leaflet \
saltaire_1851_27700.tif ./tiles_saltaire/Host the tiles_saltaire/ folder on any static server. In Leaflet you then add it as an L.tileLayer('tiles_saltaire/{z}/{x}/{y}.png'). Avoid serving a single huge GeoTIFF to the browser — it will be slow and may not display at all.
Step 3 — Choose your build tool
| Tool | Cost | Best for |
|---|---|---|
| Esri StoryMaps | hosted, tiered | quick polish, institutional accounts |
| StoryMapJS (Knight Lab) | free | simple point-to-point narratives |
| Leaflet + Scrollama | free, open | full control, custom historical basemaps |
For a reproducible, lock-in-free historical project, Leaflet plus the Scrollama scrollytelling library is the strongest choice. It is more work but you own every layer and tile.
Step 4 — Wire scroll steps to map states
With Scrollama, each text block has a data-step. As it enters the viewport, you fly the map to the matching state:
javascript
const steps = {
1: { center: [53.838, -1.789], zoom: 11 },
2: { center: [53.838, -1.790], zoom: 16 },
5: { center: [53.838, -1.789], zoom: 13, layer: 'footprint_1893' }
};
scroller.onStepEnter(({ element }) => {
const s = steps[element.dataset.step];
map.flyTo(s.center, s.zoom, { duration: 1.2 });
if (s.layer) showLayer(s.layer);
});Keep flyTo durations around 1-1.5s — fast enough to feel responsive, slow enough not to disorient.
How do I keep it accessible and fast?
This is where most story maps fail their readers. Do all of the following:
- Real alt text on every image; the narrative must still make sense with the map hidden.
- Compress images and serve tiles, not multi-megabyte rasters.
- Check contrast meets WCAG AA against your historical basemap, which is often busy.
- Test keyboard scrolling and that nothing depends on hover alone.
Step 5 — Cite, document and publish
The story map is the presentation layer, not the archive. Cite every source inline, link to the underlying GIS data in a documented repository, and note the georeferencing accuracy. Then deploy the static folder to any host. A historical story map that cannot be traced back to its sources is a nice animation, not scholarship.
Key Takeaways
- A story map binds a scrolling narrative to changing map states; for history, use a georeferenced period basemap.
- Plan 6-12 numbered beats as text before opening any software.
- Publish historical basemaps as web tiles with gdal2tiles; never serve one huge GeoTIFF to the browser.
- Free/open builds: StoryMapJS or Leaflet plus Scrollama; Leaflet gives full control.
- Wire each scroll step to a map fly-to and layer change with ~1.2s transitions.
- Make it accessible: alt text, AA contrast, keyboard scrolling, a narrative that reads without the map.
- Cite sources inline and link the underlying data so the map is reproducible.
Frequently Asked Questions
What is a historical story map?
A story map is a scrolling web narrative that pairs text and images with a map that pans, zooms and changes layers as the reader scrolls. For history it ties a written argument to specific places, routes and changes on the ground.
Do I need ArcGIS to build a story map?
No. Esri's StoryMaps is the best-known tool but it is hosted and tiered. Free and open alternatives include StoryMapJS (Knight Lab), Leaflet with the scrollytelling library Scrollama, and KnightLab tools, all of which avoid subscription lock-in.
How many map steps should a story map have?
Aim for 6-12 well-chosen steps. Each step should make one clear point and move the map meaningfully; more than about a dozen and readers fatigue, fewer than five and a static map with captions would do the job.
Can I use a georeferenced historical map as the basemap?
Yes, and it is what makes a historical story map distinctive. Publish your georeferenced map as XYZ tiles or a GeoTIFF service and set it as the basemap so readers see the past landscape, not a modern one.
How do I keep a story map accessible and fast?
Provide real alt text for every image, ensure the narrative still reads with the map removed, compress images, and serve map tiles rather than huge rasters. Test keyboard scrolling and that text contrast meets WCAG AA.
Should the story map host my data or link out?
Keep the narrative self-contained but cite and link sources. Store the underlying GIS data in a documented repository so the map is reproducible; the story map is the presentation layer, not the archive.