GISRSStudy » QGIS » QGIS2Web

QGIS2Web Tutorial

What is QGIS2Web

QGIS2Web is a plugin for allows you to export your map. If you don’t have your own web server, then QGIS Cloud offers this service with a free version available.

QGIS plugin to export your project to an OpenLayers, Leaflet, or Mapbox GL JS webmap, so you can view it interactively on the web without any programming skills.

Usage

  • Set your project title, and background and highlight colours.
  • Give your layers, and layer columns human-friendly names in the Layers Panel.
  • Hide the columns you don’t want to appear in your popups by changing their Edit widget to ‘Hidden’.
  • If any of your fields contain image filenames, change their Edit widget to ‘Photo’ to have the images appear in popups.
  • Style your layers, and set their scale-dependent visibility (if required).

QGIS2Web Plugin

First, you need to download and install the QGIS 2 Web plugin.

1. Go to Plugins Menu > Manage and Install Plugins.

2. In the Plugins Window, search for qgis2web, then click Install button.

Install QGIS2Web Plugin

After installation process is complete, you should be able to find qgis 2 web in the main menu under Web.

There are 4 important tabs available in qgis 2 web panel:

  1. Layers and Groups
  2. Appearance
  3. Export
  4. Settings

QGIS2Web Tutorial

1. First of all Add the Data in QGIS Layer panel, and map canvas.

Also you can add the Basemap (OpenStreetMap).

2. Now Open QGIS 2 Web, go to Web > QGIS2Web > Create web map.

open QGIS2Web

3. QGIS 2 Web panel appear, show all the added data in the Layers and Groups tab.

4. Now choose the web format which you went export your map; OpenLayers, Leaflet, or Mapbox GL JS.

QGIS2Web Tutorial

[Note: You can also select the destination folder, as you want to export the web map, in the Export tab]

5. Finally click Export button, for build a web map package to the folder location you select.

After it finishes exporting, image, layers, resources, and styles, all of the file HTML that gets presented on the screen.

Scroll to Top