Skip to content

Scroll-driven story map, with point markers and narrative text in GeoJSON, using Leaflet and jQuery

License

Notifications You must be signed in to change notification settings

slead/leaflet-storymap

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

85 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

leaflet-storymap

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

This is a fork of the original from https://github.com/JackDougherty/leaflet-storymap and has been updated to use a Handlebars template to configure the individual story elements.

Demo

http://slead.github.io/leaflet-storymap/index.html

Features

  • 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 http://geojson.io 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+.

HTML template

See the section labeled handlebars template in index.html and adjust the HTML within this Handlebars template as required.

The variables within this template are injected at run-time via script.js:

var output = {
    "containerId": 'container' + feature.properties['id'],
    "chapter": feature.properties['chapter'],
    "imgSrc": feature.properties['image'],
    "srcHref": feature.properties['source-link'],
    "srcText": feature.properties['source-credit'],
    "description": feature.properties['description']
}

Add corresponding sections to the HTML template and script to add new elements.

Compare with

Requires open-source libraries

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

Credits

Create your own storymap

See easy-to-learn instructions in the Leaflet Templates section of Data Visualization for All book at http://DataVizForAll.org

Examples with Added Features

Code contributions welcome

  • Submit GitHub pull requests to the dev branch

About

Scroll-driven story map, with point markers and narrative text in GeoJSON, using Leaflet and jQuery

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 44.4%
  • CSS 31.9%
  • HTML 23.7%