Blog GIS & Territories

How to communicate your work under QGis to work partners who do not have GIS tools? The most relevant option is as an html page searchable with any Internet browser.

The QSGis2Web plugin provides an easy way to distribute and visualize your QGIS work as a web map using OpenLayers or LeafLet without having to master them.

With this plugin, in a few clicks you export your QGis project as an html page. You create a directory containing the index.html page and sub directories with everything needed to visualize your map, as well as the data used.
A typical QGIS project contains different data: vector and raster. QGIS2WEBf exports vector layers in GeoJSON format, creates the base of the web map using the current version of Leaflet or OpenLayers (optional). In addition, the plugin adds raster data as an overlay of images with an opacity cursor.

Install the QGis2Web plugin from the plugin manager ( Extensions -> Manage / Install Extensions ).

The plugin is accessible from the Internet menu -> QGis2web

Overview

You can choose from several base map layers and define the initial extent of the map, as well as the dimensions of the map in your HTML document. To make it easier to export bulky layers, you can disable the automatic data loading option in your QGis project, or uncheck the layer view. Since the generated web map has a display control layer, you will be able to activate it once the creation of the map has been completed. If your layer has more than 1000 records, it will not be displayed in the preview window, but it will be included in the exported data.

The plugin interface qgis2web

You will find 4 panels, 3 tabs and a tool bar.

Let’s start with the last one

The toolbar

The plugin has  two options for the code library to generate the HTML page. If you intend to use the plugin to create a base map and you intend to enrich or modify it later, you will obviously choose the option that suits you best. If not, it depends on the characteristics of your project. Indeed, the plugin tries to reproduce as best as possible your project (symbology, labels, transparency, …). But when using it, you will notice that not everything can be reproduced. Leaflet and OpenLayers do not have the same possibilities, depending on the case your project will be better reproduced by one or the other.

If you change the option in the interface, the view of the preview window is updated automatically, and you will see the result with the new code library. On the other hand, for all the other modifications in the other panels, the preview update will only be performed if you click on the Update preview button .

The Export button generates the html page and exports the data as Json.

The preview window.

You can see a preview of the final return in this window. Do not forget to click the Update preview button to see the changes made to the plugin settings. Not all elements will necessarily be on the final scale. As you can see in the previous image, the legend bar has the final size, but not the map itself.

This window is not just an image, it responds as the final page will do (clicks, highlights, etc …)

The panel layers and groups.

This panel allows you to configure two things:

• the fact that the layer can be displayed by default or not: if you check the Visible box, the layer will be displayed as soon as the HTML page is loaded. If the box is not checked, your layer will appear in the legend bar and you will have to check its box in the HTML page to display it.
• the popup return windows with entity attributes: this option will only be applied in case you check Show popups on hover in the plugin general settings panel.

Group management does not always work. If you have gathered the layers and you do not see them in this panel, separate the layers in your project.

The three options for shaping tool tips provide the following results:

The general settings panel

Data export settings

You can export the result either to a directory on your computer, on an ftp site on your server. According to the case considered, click on the button… to define either the directory or the connection parameters.

The Mapping library location allows you to load the OpenLayers or Leaflet library into the directory that will be created, or to put a line of call for these libraries online. The first option is more bulky but safer for operation.

The Minify GeoJson files option eliminates unnecessary spaces in GeoJson files. If your data is bulky, it’s a way to reduce their size.

The other way to reduce the size of the data is to play on the level of detail of the geometries. Precision option allows generalizing geometries of line and polygon type. The maintain option does not change the geometries. The values ​​from 1 to 15 determine the degree of generalization made to the geometries, before their export. The value 1 corresponds to the highest generalization, the value 15 to the smallest.

Scale and zoom settings.

Extent allows you to define the dimension of the map when it is displayed. Canvas extent takes the dimension of the current view of your QGis project. Fit to layers extent will display the dimension of the map corresponding to the extent of the largest layer. This is calculated only on local layers, whether they are vector or raster, not on the possible layers coming from WFS or WMS connections.

Max and min zoom level define the zoom range allowed for the map.

Restrict to extent, if checked, prevents it from exiting the defined frame of the map.

Appearance settings

• Add address search adds a field to enter an address and position the map on it, using address geocoding.
• Add layers list adds the layer legend bar.
• Geolocate user places a button that allows, by clicking on it, to center the map on the position of the user. Be careful, with Chrome this option only works if your map is hosted in HTTPS.
• Highlight on hover Highlights entities when you move the mouse.
• Layer search allows you to configure a search field on an attribute of one of the layers. Once a value is entered in this field, if the value is found in the attribute table, the map is centered on the entity
• Match project CRS set the coordinate system of the output map. If the box is checked, the system used by the map will be the same as that of the QGis project. By default, if the box is not checked, it is the spherical Mercator system (EPSG: 3857) that will be applied.
• Add measure tool adds a measurement tool to the resulting map.
• Show popups on hover, if checked, displays a tool tip with attributes
• Template allows you to choose the output map template. The full-screen option will create a map that will have the size of the user’s screen; canvas-size will create a map of the same size as your map window in your QGis project. You can add other templates to the user / name / .qgis2 / qgis2web / templates directory.

The background map control panel

This panel allows you to define one or more base maps. You can make a multiple selection by pressing the CTRL key and clicking an item of the list. The result on the map produced will be a block in the legend to activate the desired background.

Preparation of the QGis project.

Part of the returning  final map must be prepared directly in your QGis project.

In the Project-> Project Properties-> General tab you have three properties of the map to configure: project title, highlight color and background color.

The title will only appear if you select Leaflet as your library

In Layer Properties -> General you can change the name text of the layer, which will appear in the legend bar of your map, to make it more understandable, as well as define the scales between which the layer will be displayed.

In Layer Properties -> Style you can set the style of your layer among a single, categorized or graduated symbol. According to the designers of the plugin, the 2.5D style should also work, but I did not succeed … To follow.

In properties of the layer-> fields you can define the name that will be displayed for each field, filling the column Alias.

The Edit Tool field controls what will appear in the tool tips if you select the Show popups on hover setting. If you click on the value of a box in the Edit Tool you will have the following window:

You can choose one of the following three options (the others have no effect on the generated map):

• Hidden: the field will not appear in the tool tip
• Edit text: the default option, displays the value of the attribute field in the tool tip
• Photo: If your field contains a link to an image, the image will be included in the tool tip.

An example of the last option is shown here:

Finally, the labeling of your QGis project will be exported to the resulting map, with some limitations:

• The expressions for labels are not supported,
• The buffers around labels are only exported with OpenLayers 3,
• The backgrounds and borders are only exported with Leaflet
• The export indicates the font used, but does not include them in the exported directory. If the user does not have the font used, the label will not appear.

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !

Atilio Francois