Web GIS Application Development for Reachability Analysis:​ Part 1

Learn how to build an interactive web application using open source software & standards

Image Source: https://pbs.twimg.com/media/C22wiEDW8AA0X0t.jpg

Introduction

Reachability Analysis is the perfect technique to find out how far your cities firefighters, ambulance, or paramedics can service. In other words, it can be called ‘Spatial Analysis’ which helps to find the service areas using location point data. It can tell you how far a facility can reach from a start point facility in an allotted amount of time. This information is valuable for city planners who want to know where to build their next hospital, fire station, police station, or anything that comes under local facilities. The availability of Free and Open Source GIS software and tools is increasing day by day. It’s totally all right for any GIS person having no prior knowledge about technical Web GIS and programming skills, still can build any application within a short period of time using open source software and tools.

In this tutorial, you will learn how to build a simple interactive web app using the QGIS plugin tool — QGIS2Web and the frameworks — PostgreSQL/PostGIS, GeoServer, and Leaflet. You can download the dataset from here.

Now, we will create a simple web application using QGIS software

QGIS is one of the powerful open-source software that includes more than 900 plugins that add useful features to the software. The great advantage here is you can put your spatial data on a web map and just spread the URL of it so people can explore your informative beautiful maps.

Follow these steps to build a simple web map:

1. Convert the dataset into the shapefile format before adding it into the QGIS software.
2. Go to Menu Toolbar > Plugins.
3. In the new Plugin Window, search ‘qgis2web’.
4. Install it in the software, and it will appear in the ‘Vector Toolbar’(Check on the 2nd line below the ‘Menu Bar’) as shown below.

qgis2web Icon

5. Click on the plugin tool, the present layers will get added to it automatically.

Note: Before exporting it to the web map, try to add more functionality. Please read the guidelines in the help section inside the plugin tool.

Photo by Author

‘QGIS2Web’ is one of the smart and powerful tools provided by the QGIS community. It turns QGIS layers into HTML, JavaScript, and CSS files make the application user friendly and interactive.

It provides additional tools as follows:

• Measure
• Geocode
• Search
• Legend
• Pop up window on hover.
• Attribution Bar

Note: You can add the data directly using QGIS or address the data URL links later in the HTML code using GeoServer where you will publish it.

Let’s start with PostgreSQL/PostGIS, GeoServer, and Leaflet

The primary source for maps and the dissemination of spatial information through dynamic user interaction is through Internet applications. The availability of web apps offers the user a convenient avenue to access data from a variety of sources from desktop, mobile devices or tablets. According to recent research, there has been tremendous growth in the web technologies available in web development, in fact so quickly that it can become overwhelming for GIS professionals to keep pace.

The web mapping sources incorporate into three specific parts as follows:

1. PostgreSQL/PostGIS — A spatial database to store data and allow new data to be incorporated with ease.
2. GeoServer — A spatial data publisher to act as a server that will send data over the web so it can be mapped.
3. Leaflet — A web mapping library to display the data and functions of the map itself.

Photo by Author

Create Database in PostgreSQL (PgAdmin) and Import into PostGIS

The back-end of the web map is supported by a database of some form. GIS data, being spatially driven has been best supported with the spatial database such as PostgreSQL/PostGIS, which can store both vector and raster spatial data and attributes. The PostGIS database supports spatial indexing schemes for fast retrieval.

Follow the steps below:

1. Download PostgreSQL and follow the instructions to install it in your system. (Check the installation process here.)
2. Open the software > Right-click on the Databases option to create a new database > Go to Create — Database > Save the database with some name. Right-click on Databases and Refresh it once.

3. Address the newly created database qgis2web map below the Databases list > Right-click on qgis2web map > Go to Create — Extension > Name the extension as postgis or select it from the drop-down list > Save it.

4. Open PostGIS Shapefile Import/Export Manager and establish a connection by clicking on view connection details and provide the connection parameters like Username, Password (Put username and password which you provided during installing PostgreSQL), Database name, and Server. Usually the values will be Host = ‘localhost’ and Port = ‘5432’. Browse Shapefiles using the ‘Add File’ button and click on ‘Import’.

Publish the Database on GeoServer

The spatial data that are stored in the database are not easily transferred over the Internet to web mapping software libraries. A geospatial data server presents the spatial database in a more web-friendly format. GeoServer is one of the free and open-source software platforms that support OGC standards for Web Mapping Services which runs on the very popular Java-based platform. GeoServer acts as the spatial data publisher due to its graphical web administration tool which allows for easier configuration, its compliance with OGC standards using open source software, and its active support from a large and robust community of users. GeoServer can easily handle the most common spatial databases like the PostGIS database that will be used as vector formats.

Follow the steps below:

1. Download and Install the Java Development Kit (JDK). JDK is required to run and develop Java applications on the computer system.
2. Download and Install the GeoServer package.
3. Open any internet browser and type http://localhost:8080/dashboard/ to open the dashboard of Geoserver. (8080 is the defined port for GeoServer, which can be changed if required). Log in to the GeoServer using the address http://localhost:8080/geoserver/web/ (Default username is “admin” and password is “geoserver”).
4. Go to Start > Search Start GeoServer > Address to the Workspace in the left panel.
5. Add new workspace and Type the ‘Workspace Name’ in Name and Namespace URI in the text field and click ‘Submit’.
6. Go to Store from the left panel and Add a new PostGIS store. Fill in the basic store information and connection parameters. Click on the ‘Publish’ tab and select the GIS layer projection system in ‘Declared SRS’, compute the coordinates from ‘Bounding Boxes’ and provide other details like the styling (If necessary). Repeat this step if requires to add more data.
7. After adding all the layers, you can publish them and view them in the ‘Layer Preview’ option.

Photo by Author

Leaflet — ‘Reachability’ Plugin

Mapping libraries bring the finished product that the end-user will see on their device and have the ability to interact with the data that are coming from the database and publisher. The mapping library consumes data from the web services that are published by GeoServer and are then rendered so that they can be displayed in maps within browsers or plugins. The leaflet is a JavaScript-based client-side library that can create interactive maps within the browser. Leaflet boasts a large number of JavaScript plugins that can be simply integrated into the open-source community following for Leaflet is also quite extensive.

This plugin shows areas of reachability based on time or distance for different modes of travel using the ‘openrouteservice’ isochrones API. (Download Leaflet Reachability plugin from here).

Now, we will customize the basic web app by adding the Plugin to make it more functional and interactive.

Follow the steps below:

1. Download any code editor in your system. (Visual Studio Code is recommended the best)
2. Open the ‘qgis2web’ folder you addressed in your system while exporting the web map from QGIS software.
3. Also, extract the downloaded leaflet plugin zip file. To make the plugin functional inside the web application, including the leaflet CDN files or links, also the CSS and JS files of leaflet reachability plugin folder and address them all inside the HTML file in the HTML file (index.html file).
4. Don’t forget to edit another HTML file (reachability.html file) from the leaflet reachability folder with the original index.html file. (Better add both leaflet reachability plugin and qgis2web files inside one common folder)
5. The code for the plugin itself will have its own map settings for projections, attributions, scale, or anything that needs to appear on the map. Users can edit the code as per the requirements. (For this, one should have the basic knowledge about web programming — HTML, CSS, and JS)
6. Follow the link to download the stable version of Leaflet libraries. (https://leafletjs.com/download.html)

To avoid potential security problems, use these Leaflet CDN files below:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="   crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="   crossorigin=""></script>

Photo by Author

The final Leaflet Web Map will appear on the web browser shown below:

Photo by Author

Now, you all are ready to use this leaflet web map. You also can double click on the ‘index.html’ file inside the folder saved in your system and the web map is ready for the spatial analysis. Just remember, this is not the end of what we are supposed to learn completely.

So, we have just finished Part I. In the next part, we will see how we can convert the leaflet web map into the Progressive Web App (PWA) using Open-Source JavaScript Frameworks. See you in the next session.

Download the source code for this project from the GitHub Repository.

In the next part, we will see how to customize the leaflet web application into a progressive web app (PWA) using open-source JavaScript frameworks.

About the Author:

GIS and Remote Sensing Professional, Graduate in Botany, Post-Graduate in M.Tech. Geoinformatics. Enthusiastic, Passionately curious and Creative.

Connect to me:

LinkedIn URL: www.linkedin.com/in/prachi-sarode-448439167

Mail ID: prachisarode95@gmail.com

Related articles:

1. https://www.vizexperts.com/webgis
2. https://medium.com/swlh/tools-i-recommend-for-building-geospatial-web-applications-274d6939536c
3. https://www.gislounge.com/open-source-gis-applications/
4. https://www.gislounge.com/series-webgis-using-open-source-tools/
5. https://www.gislounge.com/section-1-a-quick-introduction-to-gis-and-webgis/
6. https://www.gislounge.com/webgis-section-2-overview-of-the-tools-and-technologies-for-webgis/