Creating an Interactive Web Map using QGIS and Folium

Overview

The goal of this tutorial is to provide a step-by-step process for developing an interactive web map using open datasets, QGIS, GeoPandas and the python library Folium.

Introduction

While this might seem like a daunting task at first, this guide will hopefully demonstrate that the workflow is rather simple once the steps are described in an easy to follow way. Now, you might be wondering, what’s the point? But this process will illustrate several skills that are broadly relevant to Geomatics, as it will provide an opportunity to practice in many different aspects of GIS knowledge, such as data preparation, its manipulation in a Python environment, as well as the integration of modern web mapping techniques.

By the end of this tutorial you should be able to:

• Successfully acquire and prepare GIS open datasets so that they are well organized and ready for your intended use.
• Utilize core QGIS tools and applications to load, analyze, and manipulate data (should it be necessary).
• Integrate QGIS projects into a Python environment and understand the workflow that facilitated this process.
• Develop a personalized interactive web map using the Folium library and your processed QGIS data.
• Visualize your data in an appealing format using modern web mapping techniques.
• Be confident in your ability to engage with new geospatial skills and refine your core GIS competencies.

Software

This guide will mostly rely on QGIS and Folium for its data development and map creation. These are both free, open source software's that are easily accessible and provide a variety of tools at your disposal.

If you do not already have QGIS downloaded it can be found here. QGIS version 3.44.3 'Solothurn' will be used in this tutorial, though other versions should work without issue. It will be assumed that at this point you already have a general understanding of GIS practices, but some guidance will be provided on how to properly import and organize your data. Additional information on QGIS and all of its applications can be found on the official QGIS Resources page.

Following this, we will delve into Folium. Given that it is based in a Python library, there are many ways to access Folium, all with their own strengths and weaknesses. For this tutorial, we will be using Google Colab, leveraging the advantages of its convenience and support for coding. Should you at any point run into an error, Google Colab has a built-in assistant that can explain the problem and offer solutions. Additionally, Google Colab has an abundance of information, guides, and datasets on its resources page, capabilities further. If you want to use other approaches to access Folium, such Command Prompt or Jupyter Notebooks, feel free!

Data

For this guide, users will be developing a map of Ottawa’s tree inventory and ward boundary data found on the Open Ottawa portal. This is an excellent source for acquiring publicly accessible information regarding the city, as it covers a variety of topics, is continuously updated, and can be exported in numerous file formats.

The tree inventory can be downloaded here using the shapefile option, and the ward boundary shapefile can be downloaded here.

Tutorial

Organizing Data in QGIS

Once your software is installed and your data is downloaded in the correct location, you will open QGIS and start a new project.

Using “Data Source Manager” on the upper toolbar, add the tree inventory/ward boundary vector shapefile.

Figure 1. Data Source Manager icon

Figure 2. Vector data import window that opens

Once the data has loaded, your QGIS project should look something like this.

Figure 3. QGIS project with Ottawa tree inventory, ward boundaries, and basemap.

Don’t worry if it doesn’t look exactly the same, as the point colours are determined randomly by QGIS once the data is loaded, and this project features a basemap added by the HCMGIS plugin. Neither of these will affect the final output of this guide.

Before moving on, ensure that the points line up over Ottawa correctly and double check it has the correct assigned coordinate reference system by opening the source tab in the layer properties. It should look like this:

Figure 4. QGIS layer Source tab.

Next, you will want to inspect and clean the data of unnecessary fields. While this isn’t completely necessary, it will ensure that supplementary data isn’t being displayed accidentally in the final web map. To do so, we will first right click the layer and select the tree inventories attribute table, before identifying the key fields we will be retaining. What you consider important for your project is up to you, but in this case we will be using OBJECTID, TREEID, ADDSTR (street address), SPECIES, DBH (tree diameter in cm), X_COORD, Y_COORD.

Figure 5. Open Attribute Table location

Figure 6. Attribute table for tree inventory data

To delete all other columns, you will first open the “Processing Toolbox” by clicking “Processing” on the upper toolbar and selecting “Toolbox”. This will open a window on the right side of QGIS, in the search bar enter “Drop Field” and select the option that appears under “Vector Table”.

Figure 7. Processing Toolbox location

Figure 8. Drop Field(s) tool

“Drop Field(s)” should automatically load the tree inventory layer. From there you will select the “...” icon next to the “Fields to drop” section.

Figure 9. Drop Field(s) menu with icon outlined.

This will open a table with all the columns for the tree inventory. From here, you just simply select all columns that are not our key fields that we identified earlier.

Figure 9. Drop Field(s) menu with our key fields unchecked.

Now, select “Run”. This should create a new temporary layer named “Remaining fields” which only has our key columns in its attribute table.

This tree inventory is massive, at the time this tutorial is being written it contains just under 300,000 entries. While there are ways to work this large quantity of data, it does become more difficult and doing so would extend past the scope of what this guide is trying to demonstrate. As such, we will use our Ottawa ward boundaries shapefile to select only trees that fall within certain wards, making the data much more manageable.

To do so, we will first highlight the wards using the “Select Features” tool in the upper toolbar and holding the Control button while clicking on the key urban wards we will be using in this project. Alternatively, you could also use the “Select Features by Value” tool here if you prefer. For the purpose of the project, these wards will include Capital, Kitchissippi, Alta Vista, Rideau-Vanier, Somerset, and River. These wards can be seen in the screenshot below, but if you’re unsure if you have picked the right polygons, open the attribute table and verify your selection.

Figure 10. Select feature tool.

Figure 11. The selected urban wards.

Figure 12. The corresponding attribute table with selected data.

Now you will export the chosen wards so that they are saved in their own shapefile. Right click the wards shapefile click “Export”, then “Save Features As”, and export it to your project folder. Be sure to check the “Save only selected features box” before exporting. You should now have a new layer in your project containing only the urban wards.

Next, use the search bar in “Processing Toolbox” to search for the select by location tool, it should appear under “Vector Selection”.

Figure 13. Select by location in the Processing Toolbox.

Open the tool and fill out the fields so that we are selecting features from our “Remaining fields” layer that “are within” our three “exported urban wards” layer. It should look something like the screenshot below:

Figure 14. Select by location tool with proper fields filled out.

After running the tool, the trees within these wards will be selected. To finish, simply export these trees in the same way we did the urban wards (eg. click “Export”, then “Save Features As”, and export it to your project folder). Your project should now resemble this:

Figure 15. Urban trees and wards visualized in QGIS.

We are almost done using QGIS for this tutorial. To finish, we will simply right click on the new “Exported Trees” and the “Chosen Wards’ layers, click “Export”, then “Save Features As”, and export it as a GeoJSON file, so that Folium can access it directly and efficiently.

CRUCIAL STEP: Before you hit export, change the CRS to EPSG:4326 - WGS 84, as Folium requires an unprojected latitude/longitude in degrees to properly function.

Ensure that the files are exported to the same location as the rest of your data, with a recognizable name, in the correct format. As a final check, ensure that the CRS is still correct in this window.

Figure 16. Save Features As window with correct file format and CRS.