Try It Yourself: Create a Leaflet Storymap with Google Sheets

This tutorials shows how to create a Leaflet Storymap with Google Sheets. The tutorial is taken from the step-by-step guide in Hands-On Data Visualization. The Leaflet Storymaps code template is designed to show a point-by-point guided tour, with a scrolling narrative to display text, images, audio, video, and scanned map backgrounds.

You can view the online Google Sheet template that feeds data into the default version of the Leaflet Storymaps demo.

Requirements

You will need a Github account and a Google account to copy and use this storymap.

Storymaps

There are some great free & commercial tools that do very nice storymaps. The creators of this version caution the use of free or proprietry tools that ‘lack data portability, meaning that you can’t easily export any data or images you enter’.

Here’s version we created for a researcher wanting to create a interactive map that documents Shakespearean landmarks and key places in Melbourne Australia using this method. This tool met the research objective as it was freely available and the researcher was able to edit and maintain the data themselves without the need for a backend database or reliance on technical support.

Steps

For this exercise we’ll use the code from http://HandsOnDataViz.org to create our own version of the a live web map using Leaflet and Google sheets. Read ‘Leaflet Storymaps with Google Sheets’ for the full step-by-step guide.

1. Go to the GitHub code template and in the upper-right corner, click the green Use this template button to make a copy of the repository in your GitHub account.

2. Give your new copy a name and Save. Click on Settings, scroll down to the GitHub Pages area, select Master and select Save. This step tells GitHub to publish a live version of your map on the public web, where anyone can access it in their browser, if they have the web address.

1. Copy the URL for the new site, go back to the main page, click on README.md, replace the link to the current live site, and paste in the link to your site, hit Save.

2. See the instructions on HandsOnDataViz.org for copying and updating the Google sheet containing the data behind the map.