Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
map
 
 
 
 
 
 

Heatmap with Google Forms

A custom HTML form that stores data in a Google Form, and uses this information to generate a heatmap using Leaflet and Leaflet.heat.

Set-up

Create a config file by duplicating the file config.sample.js and calling it config.js.

Customise the three blocks of values:

Map

  • lat, lon and zoom: These are the default position for the map.
  • minOpacity, radius and max: These values change how the heatmap is rendered - see the Leaflet.heat docs for an explanation.

Form

Create a new Google Form.

The 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
  • 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.
  • Attendees: This will be a number, probably between 1-10.

The four inputs must be in this order: postcode, lat, lon, attendees.

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 entry.xxxxx.

Spreadsheet

Create a Google Spreadsheet from the Google Form responses.

Make the spreadsheet visible publicly - read only.

The id field in the config should come from the URL of the spreadsheet.

Sign up for a new Google Spreadsheet API key - see their documentation for detail. You don't need a Client ID, just the API key.

While setting this up, it's worth restricting its use to specific domains, and only the Google Sheets API.

The 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 Form%20Responses%201.

The range field in the config should include the fields that are populated by the form, for example C2:E10000.

Logo

Add an image file in the root called logo.png in order to add a logo to the front page of the form.


Maintenance and support

No Maintenance Intended


License

This work is free. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2, as published by Sam Hocevar. See http://www.wtfpl.net/ for more details.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.

About

A custom HTML form that stores data in a Google Form, and uses this information to generate a heatmap using Leaflet and Leaflet.heat

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published