Introduction
In this blog post, I will be presenting the React.js application that I started working on during my internship with AppSaloon. Using today's popular javascript frameworks and libraries, like node.js, react.js with redux, REST api's and leaflet.js, we developed an application that will show you the air quality around Belgium at a glance.
But why?
Of course this is not the first application to show this kind of data, but necessity is the mother of all invention. There was a problem which warranted the development of this app: Voluntary organizations and governments have put air quality sensors wherever they can, but with little coordination. So there are several data sources available from which you can track these sensor readings. Because these sources are largely independent from each other, we used their respective REST api's to put all the different data together on one map!
What kind of air quality data is available?
This application fetches live data provided by the Belgian Interregional Environment Agency (irCELine), and by Luftdaten, a worldwide network of volunteers, based in Germany. Although Luftdaten tracks sensors as far as Beijing, we restricted this app to sensors located in Belgium. These different data sources also track very different information like temperature, humidity, Ozon, Nitrogen Dioxide, and particulate matter. But we chose to display only the data that Luftdaten and irCELine sensors have in common, namely temperature, humidity and particulate matter.
Particulates are very tiny pieces of a solid or liquid that are carried floating in a gas. When the tiny pieces are solid, it is called a smoke. When the tiny pieces are liquid, it is called an aerosol. Aerosols can be naturally found in clouds and geysers. There are also artificial aerosols such as haze and some air pollutants. Smokes can be found naturally in wildfires and volcanoes. Artificially, they can be found in cigarettes, factories and power plants. Both of them can cause air pollution and climate change.
Our application displays the density of two types of particulates, PM10, which are coarse particles with a diameter of up to 10 micrometers. And also the far more hazardousPM2.5, which are fine particles with a diameter of up to 2.5 micrometers. According to studies, PM2.5 is particularly deadly, with a 36% increase in lung cancer per 10 μg/m3 as it can penetrate deeper into the lungs than PM10 particles, which also cause a 22% increase in the lung cancer rate for every increase of 10 μg/m3 in PM10. There really are no safe density levels for either of these subtypes of particulate matter. [wikipedia] This is why it is so important to keep track of our air quality.
Let's talk about "how"?
As a part of my internship at AppSaloon, I needed to learn modern front-end javascript technologies such as React.js. This project was a good way to train my proficiency in these modern JS frameworks and libraries because it is a single page application (SPA), fetching data from REST api's. SPA's built with React.js provide a smooth desktop-application-like user experience. But not only the user benefits from the use of React. Developing in React means that you can build components and reuse them as many times as needed, which is perfect for any user interface! I chose to use the popular state manager Redux, which makes complex React structures much less cumbersome. Redux makes it easy to share state variables between components anywhere on the page. Developing often means testing and troubleshooting, and redux makes this a lot easier too. With the state undo/redo time-travel capabilities provided by the redux DevTools plugin, every action saves its state in a history which can be reverted to at will.
Besides the powerful React/Redux combination, I also used leaflet.js. Leaflet is a popular and free mapping API with a lot of features. However, leaflet alone is not enough to actually display a map on your screen. A map tile provider is also necessary, and in this project, I used data from OpenStreetMap. The geolocation data of sensors provided by the Luftdaten and irCELine API's will display clickable markers for every sensor on the map. The application is configured to refresh API data every minute for Luftdaten, and every 10 minutes for irCELine.
When a user pans the map to a certain location, or clicks any of the markers, the shareable URL will update with the sensor ID or geolocation for the map's current center. If you want to know more about a sensor tracked by Luftdaten or irCELine, you can easily access it by setting the 'id' url parameter.
The source code for any React application needs to be compiled using tools like Babel or Create-React-App before it can be served as a webpage. I used a Dockerfile, which incorporates these tools and then automates the entire build process. The result is a deployable docker image of the application.
The combination of these frameworks and libraries enables the application to load and keep working without the need for a single page refresh.
Conclusion
This app has been deployed at map.influencair.be, so if you want to know how your area compares to the rest of Belgium in terms of air quality, go play around with our app!
If you are curious how everything works under the hood, go take a look at the git repository which can be found on github.
While this app is finished, the communities viewing this map every day may still be able to find bugs or request new features. The github page is perfect for a wide range of users to contribute to this project.
