RustProof Labs: blogging for education (logo)

qgis2web to export and share interactive maps

By Ryan Lambert -- Published February 20, 2020

QGIS is an open-source GUI for working with GIS data, both for spatial analysis and creating beautiful maps. One of my favorite components of QGIS is its qgis2web plugin that makes it quick and easy to convert a styled QGIS map into a browser-based slippy map that can be easily shared. qgis2web currently supports generating output in three (3) popular formats: OpenLayers, Leaflet, and MapBox GL JS. This post covers the basic process of preparing a QGIS project to generate polished interactive maps via qgis2web.

I discovered QGIS a few years ago. Over time it has become my go-to desktop GUI for GIS work.

Click here for the interactive map.

QGIS Project

I setup an example project in QGIS that uses an OpenStreetMap base layer (from QuickMapServices plug-in) plus two layers of U.S. Census Bureau data loaded from a PostGIS database I had handy. One layer provides boundaries and labels for the counties in Colorado, the other visualizes population density by block group.

The following screenshot shows the layers and map as seen in QGIS. The red polygons show the population density with darker reds indicating more densely populated areas.

Screenshot showing source QGIS project for  Population Density by Block Group

Project Title

In the QGIS Project Properties (Project > Properties), I set the project title on the meta-data tab. This title will be displayed on the Leaflet version of the map and is the title of the page, displayed on the browser tab.

Screenshot showing QGIS Project properties meta-data to set Title.

Layer Attribution

Attribution is important when sharing data. It is always good (often required) to give credit to your data sources. In QGIS we can define attribution in each layer's Layer Properties dialog. The attribution is available under the "QGIS Server" tab (lower left).

Screenshot showing QGIS Server properties for Attribution in the Layer Properties dialog

The title value is displayed and the URL hyperlinked as part of attribution bar in the lower-right corner of the qgis2web-generated map. The map output includes the attribution added for the U.S. Census Bureau, as well as the OpenStreetMap Contributors. I did not have to manually add the OSM attribution, the OSM basemap layer used added this information by default.

Screenshot showing attribution output from qgis2web in Leaflet format.

Using qgis2web

The qgis2web plugin is available through the Web menu. The Create Web Map option opens the dialog with multiple tabs for settings.

Screenshot of the menu path to create web map with qgis2web.

Layers and Groups

Layers and Groups is the first tab and controls default visibility and pop-up behavior. For pop-ups, I like the look of inline labels most of the time. It seems to be good to only enable pop-ups on only one layer, otherwise the displayed output gets cluttered.

Screenshot of the dialog to create web map with qgis2web.  Layers and Groups tab

Appearance

In the Appearance tab, set Add Layers List to Collapsed, this allows the user to toggle layers. If this is left to the default of None, the default layer visibility (under Layers and Groups) is the only layer visibility. Lower in the tab I change the Template to full-screen.

Screenshot of the dialog to create web map with qgis2web.  Appearance tab

Export

The export tab allows defining the output directory for the generated files. There is a Minify GeoJSON option plus an option to reduce Precision if desired, both intended to reduce the final output size. When reducing precision, you will want to test and experiment with your data to ensure it does not reduce quality too far.

Screenshot of the dialog to create web map with qgis2web. Export tab

Output examples

Below are examples of the three output formats in my preferred order. Select your desired output at the bottom of the Create web map dialog.

Leaflet output

The Leaflet output ended up being my favorite at this time. The main reasons are because it seems to most-closely tracks the styling in QGIS, displays the project title at the top right, and the attribution font is a readable size.

Screenshot showing output from qgis2web in Leaflet format.  Population Density by Block Group

OpenLayer output

I like the OpenLayer output almost as much as the Leaflet. It seems to run a little faster than Leaflet, but does not display the project's title. For my cases I prefer having the title prominent and visible.

Screenshot showing output from qgis2web in OpenLayer format.  Population Density by Block Group

MapBox output

I have used MapBox GL JS for a few web maps and been quite happy with it. However, the generated output from qgis2web has a couple issues. First, the generated output doesn't handle transparency from QGIS properly. It seems the solution is manually hacking the HTML. I could go that route, but with the other two options working with transparency by default I wasn't sold on the manual steps. Also, the attribution details do not include the copyright details like the other two map formats.

Screenshot showing output from qgis2web in MapBox format.  Population Density by Block Group.  Output is not visually friendly due to the lack of transparency for the polygons, blocking the base layer.

Interactive Map

The fully interactive map Leaflet format, is available here, click to open and explore in a new tab. The output from qgis2web is an index.html file and a set of folders containing GeoJSON, JavaScript and CSS files. If you have a web server handy, you can host the files that way. It's easy enough to put them into a .zip and share that way, this allows essentially a zero-overhead method of distribution.

Screenshot showing the files generated by the Leaflet output from qgis2web.

Summary

This post illustrated the basics of how to export an interactive map from QGIS using qgis2web. The interactive nature of these generated maps can allow end users a great way to explore the data, beyond static outputs such as PDF or PNG format. With a variety of easy distribution methods, this makes it much easier to share the interactivity!

Need help with your PostgreSQL servers or databases? Contact us to start the conversation!

By Ryan Lambert
Published February 20, 2020
Last Updated February 20, 2020