Web Mapping Tutorial in QGIS

Web Mapping might be a difficult thing to do for most GIS user, because it needs web programming skills such as Javascript, HTML, PHP, etc. On the other hand web mapping is a nice tool to visualize GIS information and can be shared and accessed easily by many people through a web page. This tutorial will discuss how to make a simple web mapping without any single code in QGIS. For this tutorial I am using QGIS 2.18.

Installing Web Mapping Plugin

The magic behind this web mapping tutorial is QGIS2Web Plugin which will export map layers in QGIS canvas into a web page. Therefore, firstly we have to install this plugin. To install QGIS2Web plugin can be done as follow.

1. In the toolbar menu. Open Plugin > Manage and Install Plugins. As in figure 1.
  

Figure 1. Manage and Install Plugins

2. In the search toolbar, type qgis2web. The plugin in will appear and then check it. Clik Install Plugin at the right bottom of Plugins window.

Figure 2. Install qgis2web plugin

Add Data to QGIS Map Canvas

In this tutorial, I used earthquake data that can be downloaded from USGS Earthquake Catalog. Download the data in csv format or geojson. Add the data into QGIS map canvas as in figure 3.

Figure 3. Earthquake point dataset

Open layer properties and do some styling styles. For example I classified the magnitude of earthquake into five classes. So it looks like in figure 5. Furthermore you can make a heatmap or add another data to the map.

Figure 4. Layer Properties Window

Figure 5. Earthquake point classification based on magnitude

Create A Web Mapping Application

If the map is ready, then it's time to build a web mapping application using qgis2web plugin. The plugin can be found in the web menu, as in figure 6. Soon you will see the plugin window like figure 7.

Figure 6. qgis2web plugin

Figure 7. Export to web map window

There are some main sections in this plugin, in particular in the export tab.

1. Layers and Groups section. It control how a layer will be displayed in the web map, including the pop up fields option. In this part we can also cluster a set points. 
2. Data Export. This part gives some options for exporting the map into a web map, such as: Location of exported web map files, mapping library location, minify GeoJSON file, etc.
3. Scale/Zoom.  This section control the map extent including zoom setting.
4. Appearance. In this section we can add some tools to the web map such as: address searching, layer list, measure tool, pop up, user geolocation. Moreover we can set the extent of the web map in this part.

Export to web map window is our playing field to set some parameters for web mapping application. Must be remember, every time you change or set a parameter, you must click Update Preview button to see the result. Now let's play!

1. Firstly we have to choose web mapping library OpenLayers or Leaflet. For this case I used Leaflet because I think it is lighter and faster.
2. Our web mapping does not have any basemap. Let's pick one by choosing a basemap. For example I chose Open Street Map (OSM) in the list at right bottom. Then clicked Update preview. The web map will show like figure 8. There are some basemap available, just explore them and see the result which is fitted with your purpose.

Figure 8. Web Mapping with OSM basemap

3. In layers and group section. I want to limit some fields to show in the pop up window. Unfortunately we can't do it directly in qgis2web plugin. So go back to QGIS main window and hide the field. You can hide fields in the layer properties. In this case I just want to show time, earthquake magnitude and location/place. Therefore I hide all other fields, except those three one. (To go back to QGIS main window, you don't have to close qgis2web window, just switch it)

Figure 9. Hide a fields in layer properties

4. After done in QGIS main window for hiding some fields. Switch back to qgis2web plugin window. Set the visible fields from no label to inline label, to give each field's name in the pop window. To see the result clik Update preview. The result as in figure 10.

Figure 10. Web map with pop up window

Other parameters could be set as below.
Data export
Exporter : Export to Folder
Mapping library location: Local
Minify GeoJSON files: Checked (True)
Precision: Maintain

Scale/Zoom
Extent: Fit to layers extent
Max zoom level: 28
Min zoom level: 1
Restric to extent: Checked (True)

Appearance
Add address search: Checked(True)
Add layer list: Expanded
Layer search: place (Field name)
Measure tool: Metric
Template: Fullscreen

In figure 11 can be seen those settings in the plugin window. You can play with them and don't forget to click Update preview to see the result.

Figure 11. Final qgis2web plugin setting for web mapping

If you satisfy with the setting and how the map looks like. Last step click Export button. The exported web map will be opened in a browser as in figure 12 below.

Figure 12. Web Mapping is ready

That's all the tutorial how to create a web mapping application in QGIS. It's quite easy and no coding at all. The web map is working smoothly. See the action in the video below. If you want to explore more about qgis2web plugin, visit the plugin github wiki page here

 QGIS Tutorial web GIS