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 Demo
- The map is hosted by GitHub and can be found at http://datavizforall.github.io/leaflet-storymaps-with-google-sheets/index.html
- Google Sheets template https://docs.google.com/spreadsheets/d/1AO6XHL_0JafWZF4KEejkdDNqfuZWUk3SlNlQ6MjlRFM/
Create Your Own
- See step-by-step tutorial in Data Visualization for All https://datavizforall.org/leaflet-storymaps-with-google-sheets.html
Credits
Developed by Ilya Ilyankou and Jack Dougherty with support from 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. Uses a Google Sheets template.
Built Using These Libraries
| Library | Version | License | Notes |
|---|---|---|---|
| Leaflet | 1.4.0 | BSD-2-Clause | https://leafletjs.com |
| jQuery | 3.3.1 | MIT | https://code.jquery.com |
| leaflet-providers | 1.1.15 | BSD-2-Clause | Manually updated for Carto https https://github.com/leaflet-extras/leaflet-providers |
| Leaflet.awesome-markers | 2.0.4 | MIT | https://github.com/sigma-geosistemas/Leaflet.awesome-markers |
| Single Element CSS Spinner | May 31, 2016 | MIT | https://github.com/lukehaas/css-loaders |
| Tabletop | 1.5.1 | MIT | Fetches data from Google Sheet template. https://github.com/jsoma/tabletop |
| Google Sheets Geocoder | 1.0 | No License | By Ilya Ilyankou and Jack Dougherty https://github.com/jackdougherty/google-sheets-geocoder |
| jQuery-CSV | 0.71 | MIT | https://github.com/evanplaice/jquery-csv |
| Leaflet.ExtraMarkers | ? | MIT | https://github.com/coryasilva/Leaflet.ExtraMarkers |
| FontAwesome | 5.8.1 | Font Awesome Free License | https://fontawesome.com |
License
MIT
