Mapbox possibilities

Mapbox is a powerful service for map rendering. You can get your account and API key here. Their official documentation is great. However, I find myself having to wiggle around with the solutions to make it fit my use cases sometimes. Since there are moving parts (Google API, AWS permissions) things might change slightly and code needs to be adjusted.

This will show you how to pull location data from a published Google Sheet, save it to a CSV file in an AWS bucket with a Lambda function, and then render the map with the locations to a website. I’ll use Github pages to host the website.

There are many possibilities to improve and add functionality to the map after. You can implement directions for the user, geo-location to pinpoint the user on the map or style it with Mapbox Studio.

Avoid CORS issues

The main issue I ran into following the official docs was CORS related. Some headers in the response from Google Sheets were not accepted for CORS reasons in the web app. This seems to be a known and ongoing Google issue. I also had issues with redirects, getting response code 307 — temporary redirect. It took some time adjusting the code as needed.

Get started

The official tutorial is here. This uses caching of the data in a S3 bucket. You can also follow the simple tutorial here that does not cache data but pulls directly from Google Sheets to the website. I started with the simple version, but had the CORS issues and the cached version solved it as I could request the data from a CORS enabled bucket to the front-end.

You can mostly follow the official docs. I’ll just mark in red what I had to do differently

publish

share

At the end of the link to the published sheet, the official docs say to include:

retry-false

This leads to the 307 temporary redirect error:

retry-error

I needed to set:

retry-true

Done

Your map will render with the locations you have set in your sheet, and adjust for any updates done in the sheet according to your Lambda schedule.

map

Next steps

Next you can start looking at customizing the look to fit your organisation or project.