How to Make a Web Map with QGIS using the qgis2web plugin

GIS software makes it possible to create maps that contain a lot of powerful and important information. However, sharing those maps and information with non-GIS users can be difficult, especially when maps contain multiple layers. Others may not have GIS software or know how to use it, and an image of a map may not provide enough information.

This is where saving your GIS project as a web map can be very useful. By converting your map and data to code that can be displayed in any web browser you can share your map with anyone that knows how to use the internet. They will be able to view all the data and symbology you have created without the hassle of professional software.

In QGIS it is very easy to create custom, shareable web maps using the qgis2web plugin. This tutorial will walk you through exactly how to create your own web map with QGIS.

Install the qgis2web plugin

To make a web map in QGIS you need to install the ‘qgis2web’ plugin. Installing plugins in QGIS is very simple.

1. From the QGIS Main Menu select Plugins > Manage and Install Plugins
2. Make sure you have selected the ‘All’ tab on the left of the Plugins window to see all (both installed and not-installed plugins)
3. Enter ‘qgis2web’ in the search bar
4. In the search results window click on ‘qgis2web’
5. Click the option to install the plugin

The qgis2web plugin is now installed. You can access it from the QGIS Main Menu by selecting Web > qgis2web > Create web map. Before creating a web map you’ll need to have some layers displayed in QGIS.

Create a map in QGIS

The qgis2web plugin will export the layers you have displayed in QGIS as a web map, so you’ll want your layers to be symbolized and edited as you want them to appear on the web.

In the map below, I am displaying a transparent fill of Idaho state with points showing cities in Idaho. The basemap is the standard Open Street Maps basemap that is available in QGIS. If you are interested in using other basemaps, read this article about adding basemaps to QGIS.

Web map settings

Once you have your layers displayed and symbolized in QGIS you can use qgis2web to create the web map. The qgis2web plugin has many settings for exporting your web map. I will describe how the settings can be adjusted to customize your web map interface and display.

Export method

At the bottom of the ‘Export to web map’ window are options to export the web map using OpenLayers, Leaflet, or Mapbox GL JS. These are three different Javascript Libraries for creating web maps. You can choose your preferred library. If one doesn’t work, try another. I usually use OpenLayers and haven’t had any problems.

Visible layers

On the ‘Layers and Groups’ tab (see image below) you can set the layers you wish to display in your web map. Checked layers will appear on the map. To remove a layer from the web map, simply uncheck it in the ‘Layers and Groups’ tab.

Attribute labels

Here (Layers and Groups tab) you can also choose how feature attributes will be displayed. When you click on a feature in the web map a pop-up will be generated that shows the features attributes (you can turn pop-ups off by unchecking the ‘Popups’ box when the layer is expanded. By default, attribute labels will not be shown and only the attribute values will be displayed. This is not very informative. For each attribute, you have the option to choose ‘no label’, ‘inline label’, or ‘header label’. The differences between in-line and header labels are shown in the images below.

Appearance

In the ‘Appearance’ tab you can add additional features to the web map. Here you have options to add a search bar (for addresses), display the user’s location, add a tool to measure distances, and control how popups are shown.

There are also options to change the minimum and maximum zoom levels, change the background color, filter attributes, or restrict the map to a specific extent. These appearance changes are very easy to make, most only require checking (or unchecking a box).

Other settings

The rest of the web map settings are pretty minimal. You can specify the maximum number of features to show in the preview and where and how to export the web map. These features are easy to understand.

Save the web map

Once you are happy with your web map’s appearance and are ready to save it, select the directory where you want to save the completed web map in the ‘Export’ tab. If you do not choose a directory the map will be saved to a default directory. After export, the map will automatically be opened in your default web browser.

If you forgot to choose a directory, the web map file location will be shown in the URL bar of your web browser. You can navigate to the file location to access the exported web map.

Open the web map

After you save the web map it will open automatically in a browser window. However, if you need to access the web map after closing the browser, simply navigate to the directory where you save the web map and double-click the ‘index.html’ file to open the web map in your default browser. The directory will have a name something like this: ‘qgis2web_YYYY_MM_DD-XX_XX_XX_XXXXXX’. The structure inside of the directory will be similar to the image below, where ‘index.html’ is the webpage that will display the map and the other directories contain the map resources.

Sharing a web map

You can share the web map you have created with someone else by giving them access to all the files in the default directory. If you are emailing the map you’ll need to compress the exported directory (e.g., to a zip file) first. The output qgis2web directory contains all the code and data required to display the web map, but if any files are missing it will not display properly.

Now you can send the compressed file to anyone you want to share the map with. They will just need to extract (i.e., decompress) the file you sent. Then they can open ‘index.html’ to display the map in their browser. They won’t need to have any software installed (except for a web browser) to view the map.

Conclusion

If you’re looking for a better way to share maps and geographic data than images and passing large files, qgis2web may provide a simple solution for you. Generating a web map from QGIS using qgis2web doesn’t require any programming and the resulting maps can be shared by email or by posting to a web page.