https://github.com/opendata-stuttgart/feinstaub-map

https://github.com/opendata-stuttgart/feinstaub-map

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/opendata-stuttgart/feinstaub-map
• Owner: opendata-stuttgart
• Created: 2016-04-23T14:37:08.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-05-09T02:51:58.000Z (over 5 years ago)
• Last Synced: 2024-06-22T09:42:11.480Z (6 months ago)
• Language: HTML
• Homepage: http://opendata-stuttgart.github.io/feinstaub-map/
• Size: 11.4 MB
• Stars: 154
• Watchers: 33
• Forks: 50
• Open Issues: 33
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# feinstaub-map

## [Live Version](http://opendata-stuttgart.github.io/feinstaub-map/)

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](https://github.com/opendata-stuttgart/sensors-software/commit/58ff3fc409eb353f7f1e25051d55f153be9601b7)

* enable push GPS data to Django API (changes for GPS measurements see [commit](https://github.com/opendata-stuttgart/feinstaub-api/commit/6b0a1d20685b5e9dd3dcb351e9b0b8860465e8df)) 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 

### Django API changes

mfa provided the changes to the API (see [commit](https://github.com/opendata-stuttgart/feinstaub-api/commit/3ebbce1b70d6454ff1371112fe14385c3d475b4b))

### Map application

The map background is based on [OpenStreetMap](http://openstreetmap.org/) provided via [mapbox](https://www.mapbox.com/).

The application itself was created in JavaScript on top of a [leaflet](http://leafletjs.com/) layer.

The implemetation makes use of various frameworks and is on ECMA6 language level.

Used frameworks are:

* [leaflet](http://leafletjs.com/) (mapping framework)

* [d3](https://d3js.org/)

* [lodash](https://lodash.com/) (map, reduce, reorder data sets)

* [vue](http://vuejs.org/)

* [webpack](https://webpack.github.io/) 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://\map.luftdaten.info/?nooverlay\<#zoom/lat/lon\>  

  

i.e. https://stuttgart.maps.luftdaten.info/?nooverlay#11/48.8000/9.2000