Heatmap with Google Forms
Create a config file by duplicating the file
config.sample.js and calling it
Customise the three blocks of values:
zoom: These are the default position for the map.
max: These values change how the heatmap is rendered - see the Leaflet.heat docs for an explanation.
Create a new Google Form.
id field in the config should come from the URL of the form.
The form should have four fields:
- Postcode: This should be a text field
- Attendees: This will be a number, probably between 1-10.
- Lat and Lon: These fields should be optional. They won't be filled in by any users. Instead, Postcodes.io is used to geocode the postcode and retrieve a latitude and longitude.
Find out the IDs for these four input fields to add to the config. The easiest way to do this is to use the browser's webdev inspector. See this link for detail. They will probably be named
Create a Google Spreadsheet from the Google Form responses.
Make the spreadsheet visible publicly - read only.
id field in the config should come from the URL of the spreadsheet.
While setting this up, it's worth restricting its use to specific domains, and only the Google Sheets API.
sheet field in the config should come from the name of the spreadsheet tab - this will be created automatically by the Google Form. Replace any spaces with %20, for example the value may be
range field in the config should include the fields that are populated by the form, for example
Add an image file in the root called
logo.png in order to add a logo to the front page of the form.