GIS Tools

Language

Made withfor the GIS community

Story Map Generator

Create narrative maps with slides and notes

Analysis

Slides

1. Introduction

Edit Slide 1

Add GeoJSON to slide

Click map to set slide location

Center: 0.0000, 20.0000 | Zoom: 2.0

About Story Maps

  • β€’ Create sequential slides with titles and descriptions
  • β€’ Add GeoJSON data to each slide to highlight features
  • β€’ Switch to Present mode to navigate through your story
  • β€’ Export and share your story map as JSON

What Is a Story Map?

A story map is an interactive, narrative-driven presentation format that combines maps, text, images and media into a sequence of slides or sections. The reader scrolls or clicks through the story; each step focuses the map on a new location, adds or removes layers, zooms to a different extent or highlights specific features. The result is a guided tour through a spatial dataset β€” a bridge between static cartography and fully interactive GIS analysis. Story maps are how journalists, conservation NGOs, historians, scientists and educators present complex spatial information to non-expert audiences.

The Story Map Generator on gis.tools lets you build a story map from a collection of map views and slide content in the browser. People search for "story map", "arcgis story map alternative", "narrative map", "scrollytelling gis" and "map slideshow tool" because Esri's ArcGIS StoryMaps is the best-known tool in this category but requires an ArcGIS account, and there is real demand for a free, open, no-account-required alternative for educational, advocacy and lightweight journalism use cases.

A good story map is not just a sequence of maps β€” it is a narrative where the map changes serve the story. Location, scale and layer changes should be meaningful, not arbitrary. When done well, a story map turns a dataset into an argument.

How Story Maps Work

A story map has three structural elements: slides (or sections), map states and narrative content.

Slides / Sections

Each slide is a step in the narrative. Slides have an order, a title and a body of rich text and media. Readers advance through them either by scrolling the page (scrollytelling) or by clicking next/previous buttons.

Map States

Each slide is bound to a map state: a saved combination of viewport (center and zoom), active layers, layer styling, highlighted features and basemap choice. Moving to a new slide transitions the map to the new state, typically with a smooth animation.

Narrative Content

Each slide's body can contain headings, paragraphs, images, video embeds, captions, pullquotes and optional interactive annotations (click a term to highlight a map feature). Markdown is the usual authoring format.

Transitions

Smooth camera transitions between slides are critical for legibility. Abrupt jumps disorient the reader. Typical transitions include pan, zoom, fly-to (bezier camera curve) and layer fade in/out.

Embedded Charts and Media

Complementary charts, photographs and videos often sit alongside the map. A story about deforestation might pair a map of forest loss with a before/after photo and a chart of annual loss rates.

Mobile Responsiveness

A good story map adapts to phone, tablet and desktop viewports. Text and map regions reflow; transitions adjust for touch interaction.

Key Parameters and Options

Slide Order

The reading sequence of the story. Drag-and-drop reordering is standard.

Map State Binding

For each slide, define the viewport center, zoom, active layers, styling and selection. The tool saves these as a serialisable state object.

Narrative Content

Markdown or rich text for each slide's body. Supports headings, paragraphs, lists, links, images and blockquotes.

Transition Style

Pan, zoom, fly-to or jump-cut between slides. Fly-to is usually the most visually engaging.

Basemap Selection

Different slides can use different basemaps β€” satellite for visual context, muted for data-driven maps, dark for dramatic effect.

Layer Visibility

Per-slide layer on/off toggling lets you reveal information progressively.

Aspect Ratio

Square, landscape, portrait or full-page layout. Choose based on target audience (mobile-first vs desktop-first).

Practical Applications

Environmental Journalism

A reporter writes a story about wildfire impacts over the past decade. The story map starts with a wide view of the western United States, then progressively zooms into specific fires, showing burn scars, evacuation zones, air quality data and before/after aerial photography. Each scroll advances the narrative and focuses the map on a new incident.

Historical Cartography

A historian builds a story map of a medieval trade route, with each slide exploring one city along the route. Slides combine historical maps, period images, archaeological findings and modern street views. Readers travel the route without leaving the page.

Conservation Advocacy

An NGO tells the story of a specific endangered species: habitat range, threats, observation points and successful conservation areas. The map changes as the story moves from background to crisis to intervention to outcomes.

Scientific Outreach

A marine biologist presents a research expedition with daily ship positions, dive sites, sample points and photos. The story unfolds chronologically, letting readers experience the expedition day by day.

Urban Planning Public Consultation

A city planning department presents a proposed development to the public via a story map: the existing site, the proposed design, transit access, impact zones and mitigation measures. Each slide addresses one concern and the map updates accordingly.

Educational Lessons

A geography teacher builds story maps to teach about continental drift, river systems, climate zones or cultural regions. Students explore the maps as guided tours rather than open-ended exploration.

Disaster Response Documentation

An emergency management agency documents the timeline of a natural disaster β€” ignition, spread, evacuation, containment, recovery β€” with each slide showing a map state corresponding to one day.

Travel and Tourism

A travel blogger creates a story map of a hiking trip with daily trail segments, photos, campsites and elevation profiles. Readers can follow along without needing to load a separate map for each day.

Step-by-Step Workflow in gis.tools

  1. Open the Story Map Generator page on gis.tools.
  2. Load your map data (GeoJSON, KML, Shapefile, CSV via the GeoJSON, KML, Shapefile & GIS File Viewer).
  3. Add the first slide. Write the title and body text in markdown. Upload images as needed.
  4. Set the map state for slide 1: pan and zoom to the starting location, toggle layers, style features.
  5. Click "Capture State" to save the viewport, layer visibility and styling into the slide.
  6. Add subsequent slides. For each, adjust the map view and capture the new state.
  7. Choose a transition style (pan, zoom, fly-to) and per-slide basemap.
  8. Preview the story map in play mode and scroll through all slides to verify transitions.
  9. Adjust slide ordering, narrative text and map states iteratively.
  10. Export the story map as a portable JSON project file via the GIS Notebook, or share a read-only URL with embedded state.

Worked Example: A Decade of Arctic Sea Ice Change

You want to tell the story of Arctic sea ice loss from 2014 to 2024. You load ten annual sea ice extent polygons, each tagged with the year. Slide 1 shows the full Arctic with the 2014 extent and introduces the topic. Slide 2 fades in the 2024 extent alongside 2014 with a transparency comparison. Slide 3 zooms into the Beaufort Sea to highlight the largest regional change. Slides 4-8 tour specific locations: the Northwest Passage opening, new shipping routes, polar bear range contraction, indigenous community impacts. Slide 9 returns to a wide view with a summary chart. Slide 10 ends with a call-to-action linking to further resources. You preview the story, tweak transitions and export the project for publication on the climate NGO's website.

Common Pitfalls and Gotchas

  • Too many slides overwhelm readers β€” aim for 6-12 slides for most stories.
  • Abrupt jump cuts between distant locations disorient the viewer; use fly-to transitions for long geographic moves.
  • Slides that change too little between steps feel padded; every slide should add something meaningful.
  • Heavy images slow loading β€” compress images to screen resolution before embedding.
  • Very large map data layers delay initial render; pre-simplify with GeoJSON Simplifier.
  • Mobile viewports need shorter narrative text and larger tap targets.
  • Colour choices must be accessible β€” test against WCAG contrast guidelines.
  • A story map that cannot be understood without audio or external context is not a self-contained story.

Tips for Best Results

  • Write the narrative first, then design the maps to support it. The story leads; the map serves.
  • Use fly-to transitions for smooth geographic movement between slides.
  • Keep each slide's narrative short (100-250 words) so readers progress without fatigue.
  • Use consistent styling across slides β€” repeated colours, fonts and layer conventions build coherence.
  • Pre-simplify any vector layers that render slowly.
  • Include a clear call-to-action at the end: more reading, a map to explore, a petition to sign.
  • Test the story map on a phone to confirm touch interactions work.
  • Save incremental versions as you build so you can roll back if needed.

Comparison with Other GIS Approaches

Esri's ArcGIS StoryMaps is the best-known commercial story map platform β€” polished, feature-rich, integrated with Living Atlas data. Mapbox Storytelling is an open-source code template for building story maps on Mapbox GL JS. Uber's kepler.gl supports timelines but not true narrative slides. Google Earth Tours once filled this niche but the feature was retired. The Story Map Generator on gis.tools sits between the polished commercial offering and the raw code template β€” no account, no code, but also fewer bells and whistles. The advantage is zero friction: load data, write text, save slides, share.

Performance Considerations

Browser performance depends on the total data load across all slides. Large vector layers slow initial rendering even if they are only visible on one slide. Pre-simplify layers, compress images, use tile-based basemaps and limit the number of features in view at any moment. A story map with 8-10 slides and modest data loads smoothly on a mid-range laptop.

Data Privacy and Browser-Based Processing

All story map data lives in the browser. Slides, map states, narrative text and uploaded images are held in page state and serialised to a local JSON project file. No upload to third-party servers, no telemetry, no tracking of reader behaviour. This is essential for sensitive stories β€” an NGO documenting rights abuses, a journalist working with protected sources, a teacher presenting material subject to institutional data policies.

Related GIS Concepts

Scrollytelling: A web-journalism technique where scrolling triggers visual changes. Story maps are the spatial form of scrollytelling.

Dashboard vs Story Map: Dashboards allow exploration across an entire dataset; story maps lead the reader through a pre-defined narrative.

Bookmark State: A saved viewport and layer configuration, the building block of story map slides. See Bookmarkable Map States.

Narrative Cartography: The discipline of designing maps that tell stories rather than present raw data.

Map Choreography: The art of sequencing map movements, layer transitions and camera changes to support a narrative.

Frequently Asked Questions

How many slides should my story map have?

Six to twelve is typical. Fewer feels thin; more feels exhausting. Longer stories work better as multiple chapters.

Can I embed videos or audio?

Yes β€” embed media URLs in slide narrative text, and they render inline.

What file formats does the tool accept for map data?

GeoJSON, KML, Shapefile, GPKG, CSV (with lat/lon columns) and GeoTIFF for raster overlays.

Can I share a story map without an account?

Yes β€” export the project as a JSON file, host it anywhere and share the URL. Readers load the JSON in the gis.tools viewer.

How do I preview the story before publishing?

The preview pane shows the full slideshow with live transitions. Iterate, save, preview and repeat.

Can I edit a published story map later?

Yes β€” load the project file, make changes and export a new version.

Related Tools on gis.tools

100% client-side processing - your data stays private and never leaves your device