Interactive Web Dashboard Using Leaflet.js and GeoServer

Introduction

With the increasing demand for smart, data-driven cities, interactive mapping dashboards have become essential tools. They allow real-time visualization and enable user interaction to extract insights dynamically. Web maps with geospatial servers is a powerful way to achieve this.

In this blog, we will explore how to build an interactive dashboard using Leaflet.js (for front-end map visualization) and GeoServer (for backend spatial data services).

Why Leaflet.js and GeoServer?

Leaflet.js

• Lightweight and mobile-friendly.

• Allows custom markers, tooltips, event listeners, and overlays.

• Supports integration with external services like GeoServer, Mapbox, OpenStreetMap, etc.

• Great for building customized and responsive web map applications.

GeoServer

• An open-source Java-based server that enables sharing of spatial data over the web.

• Supports OGC standards: WMS, WFS, WCS.

• Can handle vector, raster, and attribute data.

• Works seamlessly with desktop and web GIS tools like QGIS, Leaflet, and OpenLayers.

Setting Up GeoServer

Step 1: Installation

1. Download GeoServer from: https://geoserver.org/download/

2. Install Java (GeoServer requires Java 8+).

3. Extract and run startup.bat (Windows) or startup.sh (Linux/Mac) from the bin/ folder.

4. Access it in your browser: http://localhost:8080/geoserver

Step 2: Hosting Layers

1. Create a new workspace

2. Add spatial data

Step 3: Enable Services

• WMS (Web Map Service): Serves rasterized map tiles.

• WFS (Web Feature Service): Serves raw vector data in formats like GeoJSON, GML, etc.

• WCS (Web Coverage Service): Serves raster data for analysis

Example WFS URL:-

Building the Dashboard with Leaflet.js

Leaflet.js Function

• Initializing the Map

• Sets the initial center and zoom level.

• Adds OpenStreetMap tiles as the base layer.

• Loading GeoJSON from GeoServer

• Uses the WFS URL to retrieve data.

• Parses data as GeoJSON.

Understanding the Input Data Used for Charts

The charts in this dashboard visualize air quality parameters for monitoring stations in Bengaluru. The input data is served from GeoServer as a WFS (Web Feature Service) in GeoJSON format.

Each feature (station point) contains the following attribute fields:

Station_na: Name of the monitoring station

• CO__mg_m3_: Carbon Monoxide (CO) concentration in mg/m³

• NO2__ug_m3: Nitrogen Dioxide (NO₂) in µg/m³

• NH3__ug_m3: Ammonia (NH₃) in µg/m³

• Ozone__ug_: Ozone content in µg/m³

• SO2__ug_m3: Sulfur Dioxide (SO₂) in µg/m³

• PM2_5__ug_: PM2.5 concentration in µg/m³

• PM10__ug_m: PM10 concentration in µg/m³

  • Displaying Station Points

• bindTooltip():

1. On hover, displays the station name from feature.properties.Station_na.

• onEachFeature() with layer.on('click'):

  • Adds a click event to each point.

  • When clicked, updates:

    • NH3 value on the dashboard.

    • Ozone gauge chart.

    • Attribute info panel (e.g., CO, NO₂, SO₂, PM2.5).

• The CO Bar Chart displays the maximum CO value per station.

• The NO₂ Doughnut Chart shows NO₂ distribution across all stations.

• The NH₃ Value and Ozone Gauge are updated based on the station clicked.

• The Info Panel displays all attribute values for the selected station.

Chart Integration with Chart.js

Chart.js to make your dashboard more interactive:

• Bar Chart (for CO)

• Doughnut Chart (for NO₂):

• Half-Circle Gauge (for Ozone)

These were dynamically updated based on the features fetched from GeoServer.

Summary

• Explored why Leaflet.js and GeoServer are powerful together.

• Installed and configured GeoServer for WFS.

• Connected Leaflet to GeoServer to render spatial data dynamically.

• Built an interactive dashboard that responds to user actions.

• Used tooltips, click events, and charts to enhance the user interface.

This dashboard structure can be used for:

• Smart city monitoring

• Environmental data tracking

• Urban analytics

• Real-time sensor mapping

Conclusion

Building interactive dashboards with Leaflet.js and GeoServer enables real-time spatial data visualization for smart and responsive GIS applications. By combining maps, GeoJSON layers, and data charts, you can create dynamic tools for monitoring, analysis, and decision-making—all in a web browser. This workflow is simple, scalable, and ideal for smart city and environmental projects.