Exporting web maps from QGIS#

This short tutorial introduces qgis2web, a plugin for exporting your projects as OpenLayers or Leaflet -based web maps.

Prerequisites#

Plugins#

qgis2web: For exporting projects as web maps files.
QuickMapServices: For adding base maps.

Data#

One dataset is used in this tutorial. Download it from the link below or from the data folder:

provinces_population_2023.gpkg. Population data in Finnish provinces (maakunta) by Statistics Finland. Metadata on the variables is available here.

QGIS files#

This notebook has one QGIS-style file.

provinces_population_style.qml
You can download all the files from this link.

Exporting a web map#

Creating a project#

The guiding principle in qgis2web is to make everything as ready as possible in terms of symbology, colors, labels etc. within QGIS and then export it.

We’ll explore try out qgis2web with a very simple choropleth map.

Import provinces_population_2023.gpkg and explore the data.

Apply a graduated style on field ika_65_p (% proportion of population over the age of 65).
- Rename the layer Proportion of population over 65
- Add labels using the field Name
  - Enable text buffer.

Add a background map from Web > QuickMapservices. For example OSM > OSM Standard.

Your map should look a bit like this.

The provinces layer uses the style:

provinces_population_style.qml

Provinces pop example

Qgis2web#

Map outlook#

Next, let’s start exporting our map-

Open the export dialog from Web > qgis2web > Create web map.
Look around the different tabs and options; there’s a lot!
- For documentation, look at the Wiki tab
Then press Update preview at the bottom to see how the map will be rendered in the HTML version.

It’s a pretty close match! Impressive, considering we’re basically seeing a port to a completely different visualization system.

Small oddities are visible, though. Notice how the text buffer is barely visible on the web version. To make it more useful, you may exaggerate it to, e.g., 3 mm on QGIS’s layer symbology, then update the preview.

Layer options#

The majority of options are related to which layers are included in the output, whether there’s a pop-up and so forth.

Let’s set a few of these options.

In the tab Layers and groups
- Start modifying Popup field visibility.
  - Have the following fields set at inline label - always visible
    - name
    - vaesto
    - vaesto_p
    - ika_65_
    - ika_65_p
  - Hint: instead of clicking through every field, set features to all fields at once from the bottom of the screen.
    - Set Al: Popup fields to: hidden field, then modify the ones you need to.
In the tab Appearance
- Add layers list Expanded
  - Select ika_65_p on the list (this will add a legend).
- Enable Layer search on provinces_population_2023:name
- Enable Show popups on hover.
- Enable Match project crs.
- Set zoom levels:
  - Max: 10
  - Min: 6

Exporting#

We could keep fine-tuning, but let’s move on to exporting.

First select between Openlayers and Leaflet libraries on the bottom of the screen. Either should work, so you may keep the default option.
On the Export tab:
- Select a suitable folder. Folder(s) with your web maps will be created in this location.
Export.

With that, you should have a folder that contains everything needed for the web map. You can open it locally from the index.html file.

If you want to host it online, check out the instructions on the publish-interactive-maps.ipynb notebook.

Check out the example map hosted on GitHub pages #

Notice that you will need the whole folder qgis2web exported.

Exporting web maps from QGIS

Contents