Leaflet Storymaps with Google Sheets

Customize your Leaflet story map with linked Google Sheets template and scrolling narrative. Supports images, audio and video embeddings, and Leaflet TileLayer/geojson overlays.

Live links

Leaflet Map https://digitalcarleton.github.io/leaflet-storymaps-with-google-sheets-2022/
Google Sheets template https://docs.google.com/spreadsheets/d/1UYCTzjsEPgsi5y2itAGyZbhxtFya5AOHRstNeEBS30Q/edit#gid=0

Create Your Own

See step-by-step tutorial in Hands-On Data Visualization https://HandsOnDataViz.org/leaflet-storymaps-with-google-sheets.html

Geocode your address data with Google Sheets add-on

To geocode (find latitude and longitude coordinates), we recommend installing the free Geocoding by SmartMonkey add-on for Google Sheets. Insert your addresses in place of the samples in the Geocoding Details tab, then use Add-Ons > Geocoding > Geocode Details menu. Learn more in Hands-On Data Visualization https://handsondataviz.org/geocode.html

To finalize your map, you need to either:

Download each Google Sheets tab as a CSV file and upload into a csv subfolder in your GitHub repo
- OR
Get your own Google Sheets API Key to insert into google-doc-url.js

See more in the tutorial https://handsondataviz.org/leaflet-storymaps-with-google-sheets.html

Credits (and licenses)

Developed by Ilya Ilyankou and Jack Dougherty with support from Connecticut Humanities and Trinity College, CT. Inspired by Code for Atlanta mapsfor.us (2016) https://github.com/codeforatlanta/mapsforus (BSD-3-Clause). Adapted from MUX Lab, Map Effects 100: https://github.com/muxlab/map-effects-100, see http://muxlab.github.io/map-effects-100/Leaflet/11_scroll-driven-map-navigation.html.

We use Google Sheets API version 4, with these open-source components:

Leaflet v1.7.1 https://leafletjs.com (BSD-2-Clause)
jQuery v3.5.1 https://code.jquery.com (MIT)
PapaParse v5.3.0 to parse CSV with JavaScript (MIT)
Font Awesome v5.8.1 https://cdn.fontawesome.com (MIT, SIL OFL 1.1)
leaflet-providers (v1.10.2) https://github.com/leaflet-extras/leaflet-providers (BSD-2-Clause)
Leaflet.awesome-markers (v2.0.4), manually updated to svg to allow hex and material icons https://github.com/sigma-geosistemas/Leaflet.awesome-markers (MIT)
Leaflet.ExtraMarkers (v1.0.5) https://github.com/coryasilva/Leaflet.ExtraMarkers (MIT)
jQuery-CSV (v1.0.11) https://github.com/evanplaice/jquery-csv (MIT)
Single Element CSS Spinner (31 May 2016) https://github.com/lukehaas/css-loaders (MIT)
Lightbox by Lokesh Dhakar (v.2.11.3) https://github.com/lokesh/lightbox2 (MIT)

DigitalCarleton / leaflet-storymaps-with-google-sheets-2022