GIS Dashboard

A modern, interactive Geographic Information System (GIS) dashboard for visualizing and managing geospatial data. Built with Node.js, Express, and MapLibre GL for dynamic map rendering.

Overview

This project provides a web-based GIS dashboard that allows users to:

• Visualize multiple geographic layers on an interactive map
• Switch between different basemaps (PMTiles format)
• Reorder layers via drag-and-drop interface
• Query geospatial data from PostgreSQL with PostGIS extension
• Interact with features through an intuitive UI

Features

• Interactive Map: MapLibre GL-based map with smooth pan, zoom, and navigation
• Multiple Layers: Support for 8+ geographic data layers (CBM blocks, NELP blocks, producing fields, etc.)
• Dynamic Basemaps: Load basemaps from PMTiles files with easy switching
• Layer Management: Drag-and-drop layer reordering and visibility controls
• Responsive UI: Clean, modern interface built with Tailwind CSS
• Real-time Data: PostgreSQL backend with PostGIS for spatial queries
• Caching: 5-minute cache TTL for improved performance
• Error Handling: Comprehensive error handling with graceful degradation
• Health Checks: API endpoint for monitoring database connectivity

Technology Stack

Backend

• Node.js - JavaScript runtime
• Express.js - Web framework for routing and middleware
• PostgreSQL - Relational database with PostGIS extension
• pg - PostgreSQL client library

Frontend

• Vanilla JavaScript - Lightweight, framework-free approach
• MapLibre GL - Open-source mapping library
• Tailwind CSS - Utility-first CSS framework
• PMTiles - Cloud-optimized geospatial tile format
• Sortable.js - Drag-and-drop layer reordering
• Split.js - Resizable panes for layout flexibility
• Tippy.js - Tooltip library
• Lucide - Icon library

Development

• Tailwind CSS - CSS build tool with minification

Project Structure

gis-dashboard/
├── config/
│   └── database.js           # PostgreSQL connection pool configuration
├── routes/
│   └── api.js               # API endpoints for layers and basemaps
├── public/
│   ├── index.html           # Main HTML entry point
│   ├── js/
│   │   └── app.js           # Frontend application logic
│   ├── css/
│   │   └── app.css           # Compiled Tailwind CSS
│   └── assets/              # Static assets (images, etc.)
├── src/
│   └── input.css            # Tailwind CSS input file
├── pmtiles/                 # Directory for PMTiles basemap files
├── server.js                # Express server configuration
├── package.json             # Project dependencies and scripts
├── .env.example             # Environment variables template
├── .env                     # Environment variables (local)
├── .gitignore               # Git ignore rules
├── tailwind.config.cjs      # Tailwind CSS configuration
└── README.md                # This file

External Data Files

The repository does not include the large pmtiles/India_Default.pmtiles basemap asset because it exceeds GitHub's 100 MB file size limit.

To run this project locally, download or generate your own PMTiles file and place it at:

mkdir -p pmtiles
# download or copy your file into the pmtiles folder
# example:
# curl -L -o pmtiles/India_Default.pmtiles https://example.com/path/to/India_Default.pmtiles

If you use a different PMTiles file name, update the basemap reference in public/js/app.js accordingly.

This file is intentionally excluded from source control, so the project clone will work without it, but the default basemap will not load until the file is added.

Installation

Prerequisites

• Node.js (v14 or higher)
• PostgreSQL (with PostGIS extension enabled)
• npm or yarn package manager

Setup

1. Clone the repository

   git clone <repository-url>
   cd gis-dashboard

2. Install dependencies

   npm install

3. Configure environment variables

   cp .env.example .env

   Edit .env and set your database credentials:

   PORT=3000
   NODE_ENV=development
   
   # Database Configuration
   DB_HOST=localhost
   DB_PORT=5432
   DB_NAME=gis-dashboard
   DB_USER=postgres
   DB_PASSWORD=your_password_here
   
   # Connection Pool
   DB_POOL_MAX=20
   DB_POOL_MIN=2
   DB_IDLE_TIMEOUT=30000
   DB_CONNECTION_TIMEOUT=5000

4. Set up PostgreSQL database

   createdb gis-dashboard
   psql gis-dashboard -c "CREATE EXTENSION postgis;"

5. Build CSS

   npm run build:css

Usage

Development

1. Start the server

   npm start

   The dashboard will be available at http://localhost:3000

2. Watch CSS changes (in another terminal)

   npm run watch:css

Production

1. Set production environment

   export NODE_ENV=production

2. Start the server

   npm start

API Endpoints

Basemaps

• GET /api/basemaps - List available basemaps from PMTiles directory

Geographic Layers

• GET /api/layers/degree - Degree grid layer
• GET /api/layers/sedimentary-basin - Sedimentary basin layer
• GET /api/layers/cbm-block - CBM blocks layer
• GET /api/layers/dsf-blocks - DSF blocks layer
• GET /api/layers/nelp-block - NELP blocks layer
• GET /api/layers/nomination-block - Nomination blocks layer
• GET /api/layers/oalp-block - OALP blocks layer
• GET /api/layers/producing-field - Producing fields layer

Health Check

• GET /api/health - Database connectivity status

Environment Variables

Variable	Default	Description
PORT	3000	Server port
NODE_ENV	development	Environment mode (development/production)
DB_HOST	localhost	PostgreSQL host
DB_PORT	5432	PostgreSQL port
DB_NAME	gis-dashboard	Database name
DB_USER	postgres	Database user
DB_PASSWORD	-	Database password
DB_POOL_MAX	20	Max connections in pool
DB_POOL_MIN	2	Min connections in pool
DB_IDLE_TIMEOUT	30000	Idle timeout (ms)
DB_CONNECTION_TIMEOUT	5000	Connection timeout (ms)

Database Schema Requirements

The database should contain the following tables with PostGIS geometry support:

• degree - Grid data with column grid_id and geom
• sedimentary_basin - Basin data with column basin_id and geom
• cbm_block - CBM block data with column cbm_id and geom
• dsf_blocks - DSF block data with column dsf_id and geom
• nelp_block - NELP block data with column nelp_id and geom
• nomination_block - Nomination block data with column nomination_id and geom
• oalp_block - OALP block data with column oalp_id and geom
• producing_field - Producing field data with column field_id and geom

Each table requires a geometry column named geom with PostGIS support.

Performance Features

Caching

• 5-minute TTL cache for API responses
• Reduces database queries for frequently accessed layers
• Automatic cache invalidation after TTL expiration

Query Optimization

• Efficient PostGIS queries using ST_AsGeoJSON for geometry serialization
• Retry logic with exponential backoff for connection resilience
• Connection pooling for better resource utilization

Error Handling

• Graceful shutdown on SIGTERM and SIGINT signals
• Proper database connection cleanup
• Comprehensive error logging

Development Scripts

Command	Description
npm start	Start the server
npm run build:css	Build Tailwind CSS once
npm run watch:css	Watch and rebuild CSS on changes

Browser Support

Modern browsers with ES6+ support:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

Troubleshooting

Database Connection Issues

1. Verify PostgreSQL is running: psql -U postgres
2. Check credentials in .env file
3. Ensure PostGIS extension is installed: CREATE EXTENSION postgis;
4. Review server logs for connection errors

Missing Layers

1. Verify all required tables exist in database
2. Ensure all tables have proper geometry columns
3. Check API health endpoint: curl http://localhost:3000/api/health

CSS Not Updating

1. Run npm run build:css to compile Tailwind
2. Clear browser cache or use hard refresh (Ctrl+Shift+R)
3. Check if watch:css is running in development