Challenge: Aircheck https://2016.spaceappschallenge.org/challenges/earth/aircheck
- visualise recent sensor data on a map
- identify and add existing air quality data from external sources
- gather air quality data on-the-go, develop a mobile solution, measure tracks
- visualize the track data on a map, too
- add GPS to existing sensor setup, see commit
- enable push GPS data to Django API (changes for GPS measurements see commit) and/or via MQTT
This map visualisation was hacked during the NASA Space-Apps challenge 2016 https://2016.spaceappschallenge.org/locations/stuttgart-germany
The necessary steps were:
- adapt the django API: request to get the latest measurement values
- create a map visualisation based on the API inputs
Repository is located at https://github.com/opendata-stuttgart/feinstaub-map
mfa provided the changes to the API (see commit)
The map background is based on OpenStreetMap provided via mapbox. The application itself was created in JavaScript on top of a leaflet layer.
The implemetation makes use of various frameworks and is on ECMA6 language level. Used frameworks are:
- leaflet (mapping framework)
- d3
- lodash (map, reduce, reorder data sets)
- vue
- webpack is used for deployment
npm install
cp config.js.dist config.js
npm start
npm run build
npm run ghpages