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.