How to publish a layered web map with open source software

November 11th, 2019, Published in Articles: PositionIT

This article shows how a web-based GIS provides a platform to distribute beekeeping suitability information to beekeeping industry stakeholders in the Amathole District Municipality in the Eastern Cape of South Africa, and how the authors set out to build the platform. It provides a low-cost method of disseminating geospatial information.

The beekeeping suitability maps of Local Municipalities in the Amathole District Municipality illustrates the importance of the capability to generate web GIS sites with grouped layers. This article shows how tools were developed to enhance the visualisation of grouped layers and managing their visibility on the layerswitcher. It also demonstrates easy-to-follow steps for adding the tools on to the qgis2web generated maps. This provides a low-cost method of disseminating beekeeping suitability information to diverse stakeholders in the beekeeping industry. The open source geospatial solutions are useful to other applications with grouped layers.

Background to the problem

QGIS and other geographic information system software organise layers into one or more groups. In QGIS, for example, there is a tool on the layers list to create groups.

Fig. 1: The layers organised into three groups. The groups comprise of data layers related to climate, geology and vegetation.

The qgis2web plugin creates web GIS sites by exporting QGIS projects to html pages. The user creates data in QGIS and style it, as it will appear on the web GIS site. The generated html pages simulates the appearance of GIS layers in QGIS. The plugin allows users to access geospatial information in a similar way to GIS software through web browsers. Since the plugin generates html pages automatically, users with minimal programming skills can publish spatial data on the web.

However, to export QGIS project with grouped layers comes with several setbacks. Firstly, it results in a distorted qgis2web dialog window. If there are grouped layers on the canvas the menu to select pop-up fields do not appear on the dialog window. It is therefore impossible to specify the pop-up fields for projects with grouped layers. Despite the missing menu, it generates the web GIS site, but there are important graphical user interface elements missing on the exported html page. It lacks check boxes used to control the visibility of a particular group. There are also no option buttons to hide/show the layers of a group. Therefore, the layerswitch is always longer than required because of the inability to collapse or expand the legend symbols of a layer and the inability to hide or expand the layers of a group. The exported html page also does not have a status bar similar to the QGIS project, and the generated site does not show the required geographic coordinates with the mouse hover-over.

Solutions and its relevance to open source

Using commercial proprietary software could be a solution to provide web GIS sites with grouped layers. The Nelson Mandela Bay Metro for example has a GIS website which uses Esri software and features layers arranged into groups [1].

Another option was to use open source mapping libraries and develop a web-based GIS with the required interactive characteristics from scratch. Given the cost difference between the proprietary and open source software, the authors opted to continue using open source software, in part because the qgis2web plugin yielded  encouraging results. The project exploited the nature of open source software to add missing graphical user interface elements and functions. It was beneficial to find a solution to the plugin’s limitations and, moreover, it required minimal programming skills.

The nature of geographical data requires group layers, a function which has been realised in desktop GIS software. This function is important if web GIS sites are to extend the role of desktop GIS. The majority of online GIS sites and geoportals in South Africa have grouped layers. It was therefore important to extend the functionality of the plugin to improve web-based GIS visualisation. Due to the popularity of grouped layers on GIS sites, the availability of free and open source tools to publish grouped layers will greatly facilitate more publishing of geospatial data on the web due to the reduced development time and costs.

The tool’s development process

The project required the web-based GIS to have a similar appearance as the QGIS project. The authors identified missing elements by comparing the complimentary graphical user interface components on the web GIS to the QGIS project, and created for the missing elements and the logic to implement these functions. This was followed by opening the scripts of elements and hosting the missing components in a text editor to determine the suitable location to place the tool. We developed the scripts to add the missing elements using the JavaScript programming language.

Fig. 2: All the groups collapsed to the left and three groups expanded in the right column.

The project added the capability to collapse and expand a group so that a user can hide and show grouped layers on the layerswitcher. The webpage loads with the grouped layers hidden, and if the user clicks on the button, the group expands. The user can also click an expanded group to hide the layers.


Fig. 3: The status bar at the bottom left corner on the web page.

The exported html page now features check boxes to control the visibility of a particular layer on the map. A check box was added next to the group so that a user can control the visibility of a particular group instead of individual layers only. We managed to control the visibility of a group by taking the script controlling the visibility of an individual layer and implement it for a group. Furthermore, we ensured that the web page had a status bar showing the coordinates of the mouse hover location on the map.


Using the news tools

Adding layers

It is advisable to use a text editor such as Notepad, which numbers each line of a program code to insert the developed tools. We have developed the script to collapse and expand group layers on the layerswitcher (see Fig. 4). To enhance the layerswitcher:

  • Open the folder created by the created by the qgis2web plugin and navigate to the folder named “Resources”.
  • In the Resources folder, open the ol3-layerswitcher.js file.
  • Scroll down and paste the hideShowLayerGroup script on line 175.
  • Add the “addCheckBox” script immediately below it.

Fig. 4: The script to collapse and expand group layers on the layerswitcher.

Adding coordinates on mouse hover

  • Copy the “writecoords” file to the “Resources” folder.
  • Open the qgis2web file and add the script in Fig. 5 at the top.
  • Add the function to retrieve the coordinates from the map.
  • Open the index file and create elements to write the coordinates (Fig. 5).
  • Add the line in the index file to link the writecoords file (Fig. 5).
  • Refresh the index file.

Fig. 5: The code for adding coordinates on mouse hover (inset), and how to create elements to write the coordinates.

Fig. 6: Specifying the pop up fields.

Activate the pop up fields

  • Open the layers folder.
  • Open the layers.js in the text editor.
  • Scroll down to the lines with field labels.
  • At first the field labels lines appear.
  • Add the script in Fig. 6 to specify the pop up fields.

Only add the text inside the curl brackets. Take note, the first text refers to the field select to pop up. In our case, it was a label, and this differs with datasets.

Case study: Amathole online beekeeping system

We developed the Amathole Online Beekeeping system to provide a platform for distributing interactive maps of beekeeping suitability for each local municipality in the Amathole District Municipality. The project was a collaboration between the Fort Hare University and stakeholders in the beekeeping industry including farmers, beekeepers, local authorities and foresters. The project created beekeeping-suitability map layer based on temperature, water and vegetation for each local municipality in QGIS using the Easy AHP function. The online GIS required the interactive maps to show the suitability of each factor in order to determine the limiting factor at each location. The online system had to show four maps, one for each local municipality.

The Amathole Beekeeping project had ten group layers which the qgis2web dialog window could not provide to configure the web maps to pop up the suitability at the clicked location. The web GIS also lacked several functions required for the interactivity of the maps. The automatically generated web GIS do not have check boxes either for controlling the visibility of a particular local municipality, and the layerswitcher is always unnecessarily long because of the inability to hide and expand the legend symbols of a layer. The generated maps could also not show the geographic coordinates of the mouse location as requested for the interactive maps.

Using the new tools to enhance the Amathole Beekeeping system

The web GIS for distributing beekeeping information comprises a map which displays beekeeping suitability of each local municipality in the Amathole District Municipality (Fig. 7). The layerswitcher is located to the right of the map, and acts as a legend to the map (Fig. 8). It shows the groups and layers in each group. The first group shows the contextual data, which are towns and boundaries of local municipality in the Amathole District Municipality. The other groups represent the local municipalities. There are four layers in each group; the top layer is the beekeeping suitability layer followed by the factors used to determine the beekeeping suitability (temperature, vegetation and water). It is possible to control the visibility of a group and/or a particular layer.

Fig. 7: The web GIS for distributing beekeeping information.

The checkbox next to a group or layer has the ability to control the visibility of that layer. The layerswitcher also have buttons to hide and show the layers of a particular group. The web GIS hides layers of a group by default; the user has to click the button to expand the group. Expanded groups allow the user more options to control the visibility of beekeeping suitability maps and to manage the appearance of layers.

Fig. 8: The layerswitcher.

The geographical coordinates of the mouse location on the map appear at the bottom left corner of the page when the mouse moves over the map. The appearance of the coordinates enhance the site as it mimics the familiar desktop GIS function. The site also has a search function that allows users to type in the name of a local municipality. The searched-for local municipality appears at the centre of the map and the user can control the visibility of datasets using the layerswitcher.

Lessons learned

Zavala-Romero et al outlined the typical steps of creating web GIS sites [2]. The three-step process begins with the creation of data layers for the site, followed by loading of the data onto a map server. Afterwards, the web designers and programmers develop the website used for accessing the data. Developing a web GIS using QGIS is slightly different from the process outlined in Zavala-Romero et al [2]. They differ in the order of execution of the second and third step. In QGIS, you create the data and automatically generate the html and JavaScript codes required. The last step is loading a folder with the data and the generated programs on to a server.

The process to enhance the qgis2web plugin generated html pages to match the QGIS project is iterative. It involves efforts to determine the optimum algorithm, writing JavaScript programs, and testing and embedding the artefact to the qgis2web-generated scripts. Furthermore, the plugin automatically generate the html pages and the scripts required to run the Beekeeping Suitability web GIS. We only added the missing elements to achieve the required functions on the web maps, which reduced the duration of the web GIS development compared to using another tool and starting from scratch.

The functions to control layer visibility make it easier to match displayed map data and the legend symbols. After enhancing the html page, it was possible to hide other layers and leave the displayed layer legend symbols expanded on the layerswitch.

Future work could include extending the functions to include the ability to export grouped layers and their sub-groups. Currently, the qgis2web plugin does not the capability to export groups within a particular group.


[1] Nelson Mandela Metro, n.d., NMBM Web Map, 21 June 2019, from
[2] O Zavala-Romero, A Ahmed, EP Chassignet, J Zavala-Hidalgo, AF Eguiarte and A Meyer-Baese, 2014. “An open source Java web application to build self-contained web GIS Sites”, Environmental Modelling & Software 62, 210 – 220.
[3] City of Tshwane, n.d., e-GIS Viewer (Geographic Information System), 21 June 2019, from
[4] Department of Rural Development, 2015. Web map application guide, 21 June 2019 from
[5] Western Cape Department of Agriculture, 2017. CapeFarmMapper, 21 June 2019 from
[6] CSIR and Eskom, n.d, The Advanced Fire Information System (AFIS), 21 June 2019 from
[7] QGIS Development Team, 2016, User Guide/Manuar (QGIS 2.18), 18 June 2019, from

Contact Brighton Chamunorwa, University of Fort Hare,

Related Articles

  • South African Government COVID-19 Corona Virus Resource Portal
  • Now Media acquires EngineerIT and Energize from EE Publishers
  • Latest GIS further supports electric and gas networks
  • EE Publishers 2020 Year Planners
  • To readers, customers, suppliers, staff and other stakeholders of PositionIT