Customize Leaflet maps with a linked Google Sheets template and GeoJSON data on GitHub
Customize Leaflet maps with a linked Google Sheets template or CSV files and GeoJSON data on GitHub
See step-by-step tutorial in Hands-On Data Visualization https://handsondataviz.org/leaflet-maps-with-google-sheets.html
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
csv
subfolder in your GitHub repo
google-doc-url.js
See Steps G or H in the tutorial https://handsondataviz.org/leaflet-maps-with-google-sheets.html
If you used our code to create a map prior to October 2020, you will need to update your version before January 26, 2021 for it to continue to work. Google announced that it will migrate from Google Sheets API v3 to v4 in Jan 2021, and we updated our code to v1.2 on September 29th to address Google's changes.
Four options to update your code:
Option A: Use your existing code and pull your data from CSV files rather than a linked Google Sheet. This avoids the need for a Google Sheets API key, but does not take advantage of our other code updates.
csv
in your GitHub repo, by selecting Add file > Create a file and typing in csv/
. The forward slash indicates it is a folder, not a file.csv
subfolder.google-doc-url.js
file, scroll to the bottom of the page, and delete it.
Now the code automatically searches for data in your CSV folder, rather than your Google Sheet. If desired, you can continue to use the Google Sheet to edit your map content and upload those changes to the CSV folder each time, or edit the CSV files directly.OR
Option B: If you understand (or are willing to learn about) GitHub Desktop, use it to move copies of the newer code (index.html, scripts folder, style.css, etc.) into your repo via your local computer. In the google-doc-url.js
file, copy and paste the Google Sheets API key that appears in the lower half of our code, but keep your own Google Sheets ID that appears in the upper-half of your code.
OR
Option C: If you originally "forked" a copy of our code, create a GitHub "pull request" to update your repo with our code revisions, including the Google Sheets API key. We recommend this option only if you understand (or are willing to learn about) GitHub pull requests, and can deal with resolving conflicts between your code and our updated code. Warning: Since this operation might overwrite some of your code, go to Code > Download ZIP to make a backup to your local computer.
OR
Option D: Start over with a brand-new repo, and migrate your existing map content. Make a copy of our newer code by clicking the green 'Use template' button. Migrate any media folder or geodata folder content from your old repo to your new repo, by downloading to your local computer and uploading to GitHub. Reconnect your Google Sheet ID to the google-doc-url.js
file in your new repo.
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)
We use Google Sheets API version 4, with these open-source components: