honzajavorek / map

Map

A prototype of a static website hosted on GitHub Pages, which contains an OpenStreetMap map rendered by Leaflet from a GeoJSON file cron-generated by Travis CI from data in Google Sheets.

Installation and Usage

1. Have a Google Spreadsheet like this:

   Name	Location	Web
   FÆNCY FRIES	Přívozská 9, Ostrava	https://faencyfries.cz/
   Garage	Křižíkova 58, Praha	http://poutine.cz/

   Set its URL as an environment variable:

   export SHEET_URL='https://docs.google.com/spreadsheets/d/1wvEgQtTtXVbkcq2sCis3T6P3AHMJXOzylkshH8sC2s0/edit?ouid=107119873943551212790&usp=sheets_home&ths=true'

2. Head to Google Developers Console and create a new project.

   1. In the navigation menu (top left corner) go to APIs & Services and Library.

   2. Find Google Sheets API, enable it.

   3. Find Geocoding API, enable it.

   4. In the navigation menu (top left corner) go to APIs & Services and Credentials.

   5. Click New Credentials and choose API key.

   6. Edit the key. Name it (e.g. Geocoding)

   7. Restrict the key only to the Geocoding API: Key restrictions » API restrictions

   8. Set the key as an environment variable:

      export GEOCODING_API_KEY=aBcdE...

   9. Click New Credentials and choose Service account key.

   10. Service account: New service account

   11. Service account name: e.g. Sheets Reader

   12. Role: Project » Viewer

   13. Download it as JSON.

   14. Set the contents of the JSON file as an environment variable:

       export SHEETS_API_KEY=$(cat map-sample-12345678900a.json)

3. Go to your Google Spreadsheet and invite the email from the JSON file's client_email field to be able to view the document.

4. Have Python 3.7 and pipenv. Clone the project and install dependencies:

   $ pipenv install --dev

   Now you can use following to develop the website locally and to preview it in your browser:

   $ pipenv run serve

5. Go to your GitHub settings and generate a new token with the public_repo scope. Save the token, you'll need it in the next step.

6. See the .travis.yml file. Go to Travis CI, sign in with GitHub and add a new project with this repository. Go to settings page for the repository (for admins of honzajavorek/map it's here.

   1. In the Environment Variables section add all the environment variables from above: SHEET_URL, SHEETS_API_KEY, GEOCODING_API_KEY. Be sure to set the SHEETS_API_KEY quoted with apostrophes '{ ... }'.
   2. Add the GitHub token from previous step as a GITHUB_TOKEN environment variable.
   3. Set a cron job to build the website daily.

7. Once the build is passing on the master branch, go to the project GitHub Pages, e.g. https://honzajavorek.github.io/map/, and see the result.