Skip to content
Branch: master
Clone or download
Latest commit 533c1cf Mar 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
challengesite changes to video and 30 sec video Apr 30, 2016
now2geojson all missing zapp Jun 27, 2018
src Update places.js Mar 5, 2019
talk challengesite video material Apr 29, 2016
.babelrc add gh-pages deploy Apr 23, 2016
.eslintrc.js refactored all Nov 22, 2016
.gitignore gitignore build output Dec 13, 2016
.travis.yml Update .travis.yml Jan 27, 2019
README.md Update README.md Feb 19, 2019
config.js.dist
gulpfile.babel.js add gh-pages deploy Apr 23, 2016
index.html betterplace button resized Feb 27, 2019
package.json data.json moved to map server Dec 8, 2018
plot_video.md

README.md

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:

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.