Basic real-time Web Map Dashboard using Geoserver

4 min readMar 10, 2021

Architecture

My design of a simple web map dashboard consist of a backend, web map server and a GIS-enabled database. The web map server is not always necessary as the map could drawn frontend. I will cover more under the Geoserver section below.

NodeJS

Using NodeJS to host the web backend services. Functionalities of the typical non-map/GIS application like sign up, CRUD, etc…A common question would be whether we could replace Geoserver with NodeJS? The answer depends on your use case and expected interaction with the application. There are certain advantages of using existing WMS protocol. You would not need to write, handle, maintain an entire application for equivalent functionalities. For refreshing of GIS positions, it is a lot easier to customize your own data entry as the information will cut across multiple tables with information not related to GIS. The WFS-T protocol is not a suitable protocol for this form of data insertion.

Geoserver

In this design, I will be serving out the map dashboard using WMS (Web Map Service) service via Geoserver. WMS is a standard protocol developed to serve geo-referenced map images over the Internet. One advantage of using WMS is that the total data size transferred over the network is relatively similar (which is a static image size) regardless of the number of points. Whereas sending vector information over to the frontend will increase in relation to the number of points. The complexity also increase exponentially if you need animation. However, the tradeoff would be to give up on the interactivity of a vector-based component on the frontend. Using this basic setup, the development and maintenance is relatively low, simple and can be deployed within a relatively short period of time.

Postgresql + PostGIS

Postgresql is a relational database used to support the management of information and by enhancing it with PostGIS, the system can perform geospatial functionalities and queries directly on the database via SQL. This is critical when you need to calculate the distance between two geospatial points, or calculate the area, etc…

Code

Database

SQL code to create the tables and perform an initial data insertion for testing.

Create tables and sample data insertion

Geoserver WMS Service

With the database setup, next we will setup the Geoserver service.

Setup the connection to database.

Click on “Stores” under “Data” the left menu

It will bring you to a page to fill in your database connection. I will not cover much here.

2. Setup Map service

you should see publish from existing tables, click on that

Allow the system to compute the bounding boxes from data

You will find an sample web map page with the point

Congratulations, if you have reached here, it means you have successfully setup a WMS service with connection to your database via Geoserver. While this service needs to be customized later, we will use this for now. I will cover more information about the customization in the last part of this tutorial.

Map Dashboard

Finally, it would be to overlay the map the service and display it on a map using leaflet. Let’s first get the overlay up.

Next, we would like the map to refresh at an interval. In this case, we will refresh it every 5 secs.

Can’t find any function that will force refresh the layer

GIS Inputs

Let’s also setup a regular insertion of the GIS information into the database to emulate moving vehicles. Below is my sample code using NodeJS connecting to Postgresql.

We will also need to update the Geoserver as it picks up all the points. In this case, we would only need the latest for each asset. If there are other logic to include for the assets, you could also do it here via SQL.

End Product

I inserted 2 assets with one randomly updated every interval. For the animated gif, I have changed the interval to be 1 sec. The historical records of the movement of the assets are also kept.