qgis2web settings
Layers and Groups
Appearance
Export

qgis2web WIKI

First steps

Installation

Installation Screenshot Install From Zip

Usage

Prepare your QGIS map with simple symbologies. You can improve your webmap like this:

Run qgis2web from the Web menu, or via its icon in Web toolbar

The panes lets you set options to export your map. All options are written to your QGIS project, so save your project if you want to keep these settings.

When you first start qgis2web, you will see a preview of your webmap in the plugin's dialog box.

This preview does not update automatically when you change settings within the dialog. Click Update preview to see your changes *

When you switch output format, by changing selection between OpenLayers and Leaflet, the preview does automatically update.

* You can disable the initial automatic preview on the Settings tab

** The preview window will automatically be disabled if you have a layer with more than 1000 features

Project settings

Set QGIS project

In QGIS, open Project > Project Properties... > General. The following settings will affect your webmap:

Project Selection and Backround

and open Metadata. The following settings will affect your webmap:

Project Title and Abstract

Project title and Project abstract are visible in your exported webmap; they can be positioned upper left, upper right, bottom left or bottom right

Project Title and Abstract Example

Selection color is used as the highlight colour if Highlight on hover is checked:

Highlight on Hover Screenshot

Set Layers

Give your layers human-friendly names in Layer properties > Source

Single quotes ' and quotation marks " are supported but try not to use them

Layer Properties Screenshot

These will appear in your map's Layer list , grouped or not :

Layer Title in Layers List Screenshot

Set your layers' scale-dependent visibility, if required:

Set Scale-Dependent Visibility Screenshot

Alias

Give your layer fields human friendly names via Layer > Properties > Attributes Form > Select Field > Alias

Single quotes ' and quotation marks " are not supported

Field Alias Screenshot

Hidden Fields

Hide the field if you don't want to export it, by changing their Widget Type to "Hidden". As a result, the information will not appear in the popup:

Hide Field Screenshot

Media (Image or Video)

If you want to show images or video in popup you must set Widget Type to "Attachment" and do not change other values. Only the Absolute path is supported:

Photo Screenshot

Set the absolute path as the field text:

Absolute Path Screenshot

The result in your map will look like this

Image Screenshot

or this, for video

Video Screenshot

Attach documents

To attach documents and open them in another browser window, create a text field in your layer and write a string like this:

<a href="NTA_ENTE.pdf" target="_blank">NTA_ENTE.pdf</a>

Attach Document Screenshot

Insert your document into exported folder

Save Document Screenshot

Popup will show the link as clickable and when clicked it will open a new browser tab showing Document (for supported format), or Download it

Popup Attach Example Screenshot

Set Styles

No symbol

Data will not be drawn on the map. Useful if you want to show only labels.

Single symbol

Single Symbol Renderer

Categorized

Categorized Symbol Renderer

Graduated

Graduated Symbol Renderer

2.5D

  • only a single 2.5d layer will render per map
  • 2.5d layers only appear when zoomed in to building scales
  • 2.5D Symbol Renderer

    More complex 2.5D styles are also possible, such as categorized:

    2.5D Categorized Symbol Renderer

    Dash Line

    Dash Line

    Dot Line

    Dot Line

    Dash Dot Line

    Dash Dot Line

    Dash Dot Dot Line

    Dash Dot Dot Line

    SVG Marker (for point layers only)

    Supported customization:

  • Size
  • Fill color
  • Stroke color
  • Stroke width
  • SVG Marker SVG Categorized or Graduated

    Supported customization for all svg's in simbology:

  • Size
  • Fill color
  • Stroke color
  • Stroke width
  • SVG Categorized or Graduated

  • Only openlayers export: Multiple use of the same svg icon with different properties
  • Multiple Same SVG Screenshot

    Transparency

    Vector Layer

    Change color's opacity, not layer's opacity

    Vector Layer No Yes Transparency

    Vector Layer Transparency

    Raster Layer

    Raster Layer Transparency

    WMS Layer

    WMS Layer Transparency

    Set Labels

    Layers labelled in QGIS will be labelled in your webmap. The following formatting will be exported:

    Labeled Features

    Note

    Set Basemaps using XYZ Tiles

    As of QGIS 3.0 and qgis2web 3.0 basemaps are now handled through the XYZ Tiles data source in QGIS.

    Basemap Sources:

    OpenStreetMap

    http://tile.openstreetmap.org/{z}/{x}/{y}.png

    OpenTopoMap

    https://tile.opentopomap.org/{z}/{x}/{y}.png

    Google Hybrid

    https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}

    Google Satellite

    https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}

    Google Road

    https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}

    Bing Aerial

    http://ecn.t3.tiles.virtualearth.net/tiles/a{q}.jpeg?g=1


    XYZ Tiles can be accessed from menĂ¹ on top:

    Browse XYZ

    Then put in a name for basemap and the aforementioned URL

    Add new XYZ

    Then click to "add" to put in Map

    Add XYZ to map

    Notes

    qgis2web settings

    Layers and Groups

    "Set all" input

    The settings shown on this page can be set massively for all layers using the "Set all" input. The entries dedicated to the checks first insert them all, then remove them, then insert them etc...

    Set all input

    Export Layers

    When you launch qgis2web all activated layers in your qgis project will be checked as exportable. If you want to export all the layers of your project, turn them on before launching qgis2web or use the "Set all" input

    Visible

    Select whether the layer will be visible on map load. This only determines visibility - the layer will be loaded regardless of this setting:

    Set layer title

    Popups

    Select whether a layer should show a popup and respond or whether the layer should not listen to click events.

    OpenLayers popup will show all features information present in a click point, showing layer's name relating to queried feature

    OpenLayers Popup

    Leaflet popup will only show information for one feature at a time

    Leaflet Popup

    Popup fields

    Specify how each field will be labeled in pop-ups

    No Label Inline Label Header Label
    no label inline label header label

    The options will have the following result in the popup:

    Encode to JSON

    If unchecked, WFS layers will remain remote WFS layers in the webmap. If checked, the layer will be written to a local GeoJSON file

    Cluster

    Cluster point features:

    Cluster point features

    GetFeatureInfo

    If checked, the wms layers will be queryable with popup

    GetFeatureInfo

    Appearance

    Title

    Add a info window in the webmap which shows the projects title

    Abstract

    Add a collapsible info window in the webmap which shows the projects metadata abstract

    Layers list

    Include list of layers (with legend icons, where possible)

    Attribute Filter

    Only for Leaflet export: Allows you to choose multiple fields and will show the graphical possibility of filtering the data visible on the map

    Geolocate user

    Show user's location on map
    Note: Chrome now blocks geolocation unless your map is hosted securely (HTTPS)

    Measure tool

    Include interactive measuring widget - choose metric or imperial units

    Address search

    Add field to allow searching for address locations (geocode)

    Layer search

    Add option to search for values in layer field values

    Note: Layer search does not work in leaflet export if a point layer with symbols other than circle is used

    Note: Layer search does not work in openlayers export if cluster is active in that layer

    Show popups on hover

    Show popups when mouse hovers over features

    Highlight on hover

    Highlight features on mouseover

    Match project CRS

    Create webmap in same projection as QGIS project, otherwise the webmap is projected in EPSG:3857

    Template

    Select HTML template for webmap - add your own templates to /qgis2web/templates directory in your current QGIS3 profile folder

    Widget Icon

    Choose controls main color

    Widget Background

    Choose controls background color

    Extent

    Either match the current QGIS view or show all contents of all layers (only local GeoJSON and rasters, not WFS/WMS)

    Max zoom level

    How far the webmap will zoom in

    Min zoom level

    How far the webmap will zoom out

    Restrict to extent

    Prevent panning or zooming beyond the selected extent

    Export

    Export folder

    The folder where the webmap will be saved

    Exporter

    How your map will be exported - currently supported are `Export to folder` and `Export to FTP site`: Click the `...` button to configure the export settings

    Minify GeoJSON files

    Remove unnecessary whitespace from exported GeoJSON to reduce file size

    Precision

    Simplify geometry to reduce file size. Note that 1 is the most aggressive simplification and 15 the least, for polygons a setting of 4 is probably about the right compromise between data size and quality

    Limitation & Bug

    Current limitations

    QGIS, OpenLayers, and Leaflet are all different mapping technologies. This means that their respective functionality differs in many ways. qgis2web does its best to interpret a QGIS project and to export HTML, Javascript, and CSS to create a web map as close to the QGIS project as possible.

    However, many elements of a QGIS project cannot be reproduced, and many are only possible in either OpenLayers or Leaflet. qgis2web tries its best to produce a publish-ready map, but you can always manually edit the output code to achieve what qgis2web cannot.

    The limitations are described in the body text of this WIKI

    Reporting bugs

    Please report any problems you have with qgis2web. Without this feedback, I am often completely unaware that a problem exists. To ensure no time or effort is wasted in bug reporting, please follow these steps:

    1. Make sure you are using the latest release of qgis2web
    2. Check the issues on Github to see whether the bug has already been reported, and if so, read through all the comments on the issue, and add any additional information from your experience of the bug
    3. Make sure you can reproduce the bug reliably
    4. Reduce the complexity of your bug conditions as far as you can, especially by reducing the number of layers, ideally to one
    5. Raise a Github issue in github.com/qgis2web/qgis2web/issues, including:
      • only one bug per Github issue
      • the qgis2web version (or make it clear you are using Github master branch)
      • any Python error text/stack trace which occurs
      • browser JS console errors - press F12 in qgis2web to open the developer toolbar and find the console
      • screenshot of your settings
      • screenshot of the output
      • a link to the data you used, if possible

    The stability of qgis2web relies on your bug reports, so please keep them coming.