Spreadsheet Sorcery: Making a map with SheetseeJS & Google Spreadsheets

For the November 2015 meetup we learned how to make map pulling feature data from a Google Spreadsheet. This page is meant to help you walk through the process of making a map of Lexington-area beer establishments as compiled in this list by LexBeerScene.com

What we'll make

What we'll be using



  • mapboxJS/LeafletJS - Setting up map and map interaction
  • SheetseeJS - Pulling data from Google Spreadsheets, transforming data to GeoJSON, data driven templates
    • TabletopJS - Pull the data from the Google Spreadsheet
    • HandlebarsJS - Templates for our table and info pane
    • ICanHazJS - Mediates moving the data pulled from Google Spreadsheets into a Handlebars template
  • jQuery - Interaction
our map's architecture Adapted from "Anatomy of Webmap"

Setting up

Download project files

  • Either clone the project spreadsheet-sorcery repo or download it as a ZIP. If you do the latter, you'll need to unzip the project file.

Start up a local server

  1. If you don't have it, download Python 2.7.x
  2. Open up Command Prompt (Windows) or Terminal (OSX, Linux)
  3. Navigate to the directory where you saved the project files
  4. Start local server:
    python -m SimpleHTTPServer
  5. In your browser, navigate to:
    You'll use this to navigate around the various stages of the project we're working with.

Note: We recommend using the versions of the various JavaScript libraries included in the project repo. We've had some trouble getting everything to work with the most up-to-date versions of these libaries.


00 - Starter

01 - Basic Map

02 - Custom Marker for Points

03 - Add Table

04 - Wire the Map & Table Together

05 - Add Infopane

06 - Add Option to Reset Map