Code Monkey home page Code Monkey logo

gpsform's Introduction

#Data Collection using Google Forms & Leaflet

This is a simple web app that uses Google Forms and Leaflet to allow data collection using just a modern web browser. Check out the demo and start collecting! Here's a fullscreen demo.

##Instructions

  1. Dowload the app.
  2. Create a Google Form with Latitude (Short answer), Longitude (Short answer) and Description (Paragraph) fields/questions.
  3. Connect your form resposnes to a spreadsheet.
  4. Publish your response sheet to the web.
  5. Pre-fill the form to get the appropriate variables for the app.

The prefilled form will look something like this:

https://docs.google.com/forms/d/formId/viewform?entry.field1=39.01&entry.field2=-81.26&entry.field3=description

These are the variables you need to change in index.html:

 var formId = 'Your Form Id';
 var formLat = 'Longitude id from prefilled form';
 var formLng = 'Latitude id from prefilled form';
 var formText = 'Description id from prefilled form';
 var gsheet = 'sheet id';
  1. Upload the app to a webserver or just fork this repository and create a gh-pages branch.
  2. You may also want to change the meta tags at the beginning of the page to reflect your app.
  3. Start Collecting!

##Notes

  1. Working with Bluetooth GPS Provider app for mock locations on Android/Chrome.

##Enhancements Could be added but I wanted to keep this app as simple as possible.

  1. Add styling using Awesome Markers, Maki Markers or other plugins.
  2. Add search.
  3. More basemaps.
  4. Layer selector.
  5. Figure out a way to collect pictures taken with the device, and push that url to the google sheet. This would take much more coding than is in the initial app. I suggest this be accomplished manually.
  6. Add some sort of accuracy setting.

gpsform's People

Contributors

reyemtm avatar arahmandc avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.