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.