This project provides the power for the ESL Map.
It uses a simple Google form to gather the data, and gets the data for display by calling the Google spreadsheet json endpoint. It's hosted here on Github Pages, and requires only Github and Google accounts, both of which are free.
# optionally, install handy webserver to use in dev npm install -g live-server # clone the repo git clone https://github.com/mnhrc/mnhrc.github.io # do work cd mnhrc.github.io live-server . # or your preferred method for hosting local frontend projects
Please open a Pull Request to submit your changes.
Please open an Issue (with screenshots and/or sample code and error messages) to report bugs or other problems.
Deploy for Your Locale
If you'd like to repurpose this app for your area, you'll need to make changes to the client code and provide your own infrastructure (Google Form, Google Sheet, hosting).
Enable Google Sheets API
- Google account
- Go to Google Developers Console
- Go to Library (left sidebar nav)
- Search for Sheets in the API library and open the link to the Google Sheets API console
- Enable the Sheets API (see the Enable button)
- Go to Credentials (left nav)
- Click Create Credentials and create an API key
- Copy the API key and close the dialogue
- Click on the name of the API key in the table to view the config screen for the key
- Under the Key restriction heading, select the HTTP Referres (web sites) option
- Add the domain on which you'll be hosting the app (and from which the client api library will be making ajax requests)
- Optionally, add your local dev address (
http://localhost:8080or what have you)
- You should remove that dev alias after you finish working and deploy
You should now have an API key scoped to the domains on which the client code will run, and you should have enabled the Google Sheets API for your account.
Create Google Form and Google Sheet
- Google account
Rather than describe the schema of the form and resultant spreadsheet, link to examples here.
Update Client Code
- API key from Enable Sheets API section
- Spreadsheet ID of spreadsheet created in Create Google Form and Google Sheet section
- Locate and replace the API key in the client codebase
- Locate and replace spreadsheet ID in client codebase
- Locate and replace the center lat and lng values to define the initial center point of the map on load
As of this writing, all of these values are kept at the top of the
map_controller.js file for ease of access.
Deploy to Host of Choice
The application is completely contained as a simple website and requires only to be hosted as such.
For example, we host it for free on Github Pages.