feinstaub-map
Live Version
Challenge: Aircheck https://2016.spaceappschallenge.org/challenges/earth/aircheck
Goals and ideas
- 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
Mobile sensor
- 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
Visualisation
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
Django API changes
mfa provided the changes to the API (see commit)
Map application
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
Usage
Installation
Please make the appropriate changes to index.html (activate Google fonts API instead of proxied version) and map.vue (openstreetmap instead of proxied version)
NPM should be version 3.10.x
npm install
cp config.js.dist config.js
Develop
npm start
Publish
npm run build
npm run ghpages
Including the map in another page
If you plan to use the map as an iframe and want to disable the Betterplace image use the following link:
https://<city name.>map.luftdaten.info/?nooverlay<#zoom/lat/lon>
i.e. https://stuttgart.maps.luftdaten.info/?nooverlay#11/48.8000/9.2000