Scroll-driven story map, with point markers and narrative text in GeoJSON, using Leaflet and jQuery
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
img revised content Mar 30, 2016
markers redesigned sample w numeric markers Jan 11, 2016
LICENSE Initial commit Oct 25, 2015 Update Oct 17, 2017
index.html HTML accessibility Oct 17, 2017
map.csv Add alt field Oct 17, 2017
map.geojson Add alt field Oct 17, 2017
script.js Add alt tag to image on-the-fly Oct 17, 2017
style.css Update style.css Aug 8, 2016


Leaflet storymap with scroll-driven navigation for narrative and point markers from easy-to-learn template, with GeoJSON data file



  • Scroll-driven navigation, using screen swipe, trackpad, or keyboard down-arrow. Initial map displays all point markers.
  • Viewers can pan and zoom the map independently of the narration, or click on any point to go directly to that chapter.
  • Easy-to-learn template to create your own storymap. Upload text, point coordinates, zoom levels, and image links to a CSV generic spreadsheet, and drag into to create a GeoJSON data file.
  • Images can be stored in local subfolder or pulled from an external URL.
  • Works in modern browsers: Chrome, Firefox, Safari, Internet Explorer 9+.
  • Accessible tested using the WAVE and aXe tools.


  • Due to GeoJSON data limitations, there is no easy way to insert hyperlinks inside the 'description' text. They must be created outside, in fields such as "source-link".
  • Images must contain an alternative text, or alt tag description of the photo to maintain accessibility using the alt field in the csv/geojson.

See also

Compare with

Requires open-source libraries

  • Leaflet.js
  • leaflet.extra-markers
  • jQuery
  • Font Awesome


Create your own storymap

See easy-to-learn instructions in the Leaflet Templates section of Data Visualization for All book at

Examples with Added Features