Wildfire map using QGIS, Google Maps, Angular.
Google Maps is a powerful, convenient, and affordable mapping tool; it’s hard to imagine our life without it. Almost each public geographical object or landmark in your city can be found using Google Maps.
That is why a map is an excellent tool for data visualization. Meteorological, statistical, and other types of data become more readable and understandable to the average user when all data is presented as a geographical map with additional layers.
In this article, I would like to talk about how you can visualize statistical data using Google Maps and some tools for processing this data.
QGIS
QGIS is a free cross-platform geo-information system that allows you to create different complex and detailed maps. I would say that for easy work you need a PC that has at least 16GB of RAM and SSD. I also recommend installing an outdated version 2.18, because all existing plugins work with this version (version 3. * some plugins do not support).
The main workspace looks like this:
The left part includes a list of data sources you can work with, and the right section consists of a map drawn per all settings and configurations.
Getting Started
You can find a big amount of US statistic data available publicly. To build a wildfire map, you can use the information on this link, which every year publishes the United States Department of Agriculture.
Unpacking the archive, go to the Data folder -> whp_2018_classified -> whp2018_cls, where there is a file w001001.adf, we will work with it. Dragging this file into the QGIS Layers Panel we get the following result:
Layers Panel is not empty now and contains a layer with information about wildfires. In the right part of the screen, a map drawn per the Layers Panel and all additional configurations. In our case, this is a black and white map of the United States. To zoom in or out, you can use the “Magnifying Glass” icons with plus and minus signs, which you can see at the top of the screen. On a reduced scale, the map looks like this (map of California):
Work with Layers
Layers Panel contains all the layers of our map. Combination of all layers in the right order makes it possible to create the desired visualization and prepare it for further rendering.
Now the whole map consists of a single layer whp2018_cls. This layer contains information about the probability level of a fire in a particular area. For simplicity, the probability of a fire is divided into 6 levels: from very low (1) to very high (5). By default, a black and white gradient is used to visualize this data, where black is the low probability of a wildfire. Under the layer, you can see information about the borders of the gradient. Such visualization is not readable and requires additional efforts from the user to understand the level of fire in a given area. Therefore, you need to choose the right color scheme, which will help user intuitively and easily read the map.
To change the color scheme, go to the Layer Styling menu by clicking on the first icon on the left in the Layers Panel. A separate menu will open on the right side of the screen:
As I mentioned, a black and white gradient is used for rendering. To change the render configuration, instead of Singleband gray, select Singleband pseudocolor. Now change the minimum and maximum values to 1 and 5, respectively. According to the classification of the wildfire probability in the United States, Class 6 is an area that does not fall under the risk of forest fires. Leave the interpolation unchanged (Linear). In the Color field, select the color scheme. I chose the gradient RdYGn. Below you need to set the colors that will correspond to the corresponding class. Since the default gradient is from red to green, I’ve manually reordered the colors. You can use the Invert option, which will do this automatically. At the very end, you need to drop the classes that are out of the configured range. This can be done using the Clip out of range values option. The result is such a card:
Reading such a card is much more comfortable, isn’t it?
To check if this layer will look right on a live map, for example, Google Maps, you need to add Google Maps to the list of Tile Servers. To do this, right-click on the Tile Server (XYZ) which is located in the Browser Panel list. The only action available on the list is Add New Connection. In the window that opens, you need to enter:
and press OK:
If we drag Google Maps into the Layers Panel, we get this map:
In this case, the Google Maps layer is below the whp2018_cls layer. The appearance of your map directly depends on the order of layers in the Layers Panel. If you put Google Maps higher, then it will completely cover the layer whp2018_cls. In the screenshot above, you can see that the whp2018_cls layer is a bit transparent. You can also set the transparency of the layer in the Layer Styling menu by setting the corresponding value for the Global Transparency parameter, as in the screenshot below:
Map Preparation for Web Applications
If this is your first time working with Google Maps, here you can read about how Google Maps and the JavaScript API work. For most of the geodata visualizations, we only need information about a specific area. Therefore, to increase productivity, the map provider loads data for the area which is required.
That’s why the map together with all additional layer — is a set of small pictures called tiles. Each tile has its coordinates. Google map loads only the tiles required for visualization.
To prepare our forest fire map for publication and work in the Web application, you need to divide it into a set of tiles for all available scales. Fortunately, there is a specific QTiles plugin for this that automates this task.
Before the QGIS installation remember:
QTiles does not work with version 3. * QGIS.
QGIS has a convenient plug-in manager, which can be opened by menu Plugins-> Manage and Install Plugins:
After installation QTiles plugin will be available from the Plugins menu. After starting the plugin, the configuration window will be opened:
Before you press Run, you will have the opportunity to configure the rendering.
Rendering is a term in computer graphics that denotes the process of obtaining an image from a model using a computer program.
In Output section, you can configure the location to store the generated tiles and appropriate folder name.
In Extent section — you can configure the rendering area:
- Canvas Extent — area that is directly visible on the QGIS screen at the moment;
- Full Extent — the entire map will regardless of the visibility on the screen;
- Layer Extent — only the selected layer;
In Zoom section — you can indicate the scale for rendering. Higher Maximum Zoom value means longer the rendering process and larger overall size of the rendered map.
In Parameters section — you can configure some general features of the tiles, their size, quality, etc.
To render information about forest fires exclusively, I recommend disabling the layer with Google Maps in the Layers Panel.
After the configuration is completed, you can start rendering by pressing the Run button. QTiles plugin will generate a folder with all the tiles and a ready-to-use structure.
Usage example
You can find an example project here. I’ve used Angular 7 and Angular Google Maps (https://angular-maps.com/) on the frontend, as well as an http-server to simulate the tile server for Google Maps with an appropriate layer.
In this example, I use only one component that contains a container for Google Maps:
This is the component itself and the code that is responsible for connecting the corresponding layer.
Please pay attention to the setMapInstance method. This method is called when the card is fully loaded. Since the Angular Google Maps package does not provide convenient tools for working with layers, we use an object that will receive the setMapInstance method after loading the map. The resulting object contains the Google Maps JavaScript API, which will help us to configure and connect a new layer.
Directly connecting a new layer occurs using the following line:
this.mapInstance.overlayMapTypes.insertAt (0, this.getLayer ());
In the getLayer method, we specify the identifier of the layer(URL of the layer) and the dimensions of the grid.
To run my example, you need to execute two commands:
- npm run serve — to start a server with a rendered layer (do not forget to unzip wildfire.zip in the maps folder first)
- ng serve — to run the application
The result of this code will be such a card:
