CLOSE X
Get in Touch
Thank you for your interest! Please fill out the form below if you would like to work together.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Air Quality Web App

May 17, 2021
Click to view live map

There are a lot of usable GIS data layers published using ArcGIS technology freely available online but not everyone can afford the price of ArcGIS products to make simple web applications with additional capabilities.

This web app aims to demonstrate how open-source mapping library such as Leaflet can be used to visualize data published by commercial products, especially ArcGIS.  The source information is the OpenAQ community which reports measured concentrations of PM2.5* (µg/m³) on a global scale by aggregating station data from national networks of air quality. Aside from the air quality data, it also shows additional weather-related layers (wind-speed, air temperature) from OpenWeather.

*small particles of 2.5 micrometers or less

Map library used:

- Leaflet JS - open-source JavaScript library used to build web mapping applications

- Esri Leaflet - a lightweight set of tools for using ArcGIS services with Leaflet

- OpenWeather Leaflet plugin  - an independent JavaScript library for including OWM's layers in Leaflet based maps

Data:

- Live air quality feature service (updated every hour)

- Open Weather Map tile layers (wind speed, air temperature)

- Czech districts published in Github usinggeojson.io

Map Features:

- Custom navigation bar – For easier navigation, includes home/default extent, previous and forward extent, in addition to the default leaflet nav buttons

- Air Quality level filter – filters the point data based on the level of air quality displayed on the map

- Layer TOC – contains three basemaps and the four operational layers

- Legend - Points were symbolized using a graduated symbol and color to distinguish the air quality level easily.

Interactivity Functions added:

- Displays Czech district names as tooltip when hovering

- Zooms to point ground monitoring points when double-clicked

- Customized pop-up showing actual air quality level and the city where the station is located. Also shows the date/time of last data update.

Let's Work Together
Contact Me