As Killed By Google dramatically illustrates, Google frequently creates and then shuts down products and APIs. This culture of rapid evolution can leave folks behind if they are not paying attention. Today, I'm taking a look at how this could happen for a nice tool from Mapbox and how to quickly avoid it.
In the spring of 2020, Mapbox introduced Sheet Mapper, a tool that displays points of interest (POI) on a map. That covers the mapper part; for the sheet part, the tool uses Tabletop.js to read POI data from a Google Sheet. All told, a quick and dirty visualization tool that requires little programming background to get started.
Subsequently, Mapbox revised Sheet Mapper with Sheet Mapper Advanced, adding caching with S3 and Lambda. In Sheet Mapper Advanced, the app reads POIs from CSV files on S3 using the D3.js library. A more scalable and robust solution for sure.
However, the original Sheet Mapper is still a fun tool that unfortunately is going to break as of September 2020 when Google turns off the version of the Sheets API that Tabletop.js uses. The creator of Tabletop.js has a short section in the readme with a workaround using the Papa Parse library.
I created a repo in Github, replacing Tabletop.js with D3.js to follow Sheet Mapper Advanced. The changes were minimal, copied from Sheet Mapper Advanced, including publishing the Sheet as CSV and using d3.csv() to load the data.
You can see the result online at https://phm200.github.io/sheetmapper-d3/ and check out the repo for more details.
phm200
/
sheetmapper-d3
Mapbox's Sheet Mapper using D3.js instead of Tabletop.js
sheetmapper-d3
Mapbox's Sheet Mapper using D3.js instead of Tabletop.js
Mapbox's Sheet Mapper impact tool is a quick way to:
Create a live-updating map that displays the locations of all of your POIs or events, powered by a simple spreadsheet.
Mapbox's code template (as of publishing this repo on May 13th, 2020) uses Tabletop.js to read data from a Google Sheet.
As of September 2020, Google is retiring v3 of the Sheets API and Tabletop.js will no longer work. The creator recommends using the Papa Parse library instead.
Given that Mapbox uses D3.js for the Sheet Mapper Advanced impact tool, I updated Sheet Mapper to follow suit and published this code as reference.
See a live preview at: https://phm200.github.io/sheetmapper-d3/
NOTE: With the change to D3.js, this sample cannot be run directly from an HTML file on your local disk. You need to run it off a server, local or online
Top comments (1)
Thanks so much for pointing this out, @phm200 ! We've updated the Sheetmapper tutorial and template to use csv2geojson now instead of tabletop. Also noting that we've experienced some issues with CORS errors using the previous spreadsheet URL formatting, so we've updated the tutorial to a less error-prone format. It looks like your demo map might be having the same issue, so sharing here in case it can resolve that error.
https://docs.google.com/spreadsheets/d/{key}/gviz/tq?tqx=out:csv&sheet={sheet_name}(Replace {key} with your Google Sheet ID and {sheet_name} with the name of your sheet.)