Project Overview
Bharat Nirman is a smart city dashboard designed to make urban planning data-interactive. Built as a responsive React application, it maps geospatial layouts, displays environmental cover metrics, and models urban infrastructure growth trends through vector layer mapping over OpenStreetMap coordinates.
Problem & Motivation
The Problem
City planners struggle to overlay traffic density, zoning guidelines, and green canopy indexes simultaneously. Bharat Nirman solves this by offering a lightweight GIS browser client that visualizes multiple infrastructure layers simultaneously.
The Motivation
Urban planning data in developing regions is often trapped in static PDF reports or outdated local servers. The motivation was to create a modern, lightweight, accessible dashboard that visualizes environmental cover, infrastructure planning, and utility networks interactively on top of real map systems.
System Architecture
A client-side geospatial dashboard. The application consumes public geo-JSON datasets, parses coordinate structures, and overlays vector lines and heatmaps dynamically onto an OpenStreetMap client wrapper styled with custom Tailwind themes.
Interactive map overlays using OpenStreetMap and open-source geospatial styling templates.
Zoning logic engines calculating development metrics based on bounding box coordinates.
Green cover heatmap generation using coordinates and canopy density matrix indexes.
Responsive layout design ensuring planners can inspect municipal coordinates on mobile devices.
Key Features & Capabilities
Multi-Layer Infrastructure GIS
Toggle roads, zoning boundaries, and green canopies.
Zoning Estimators
Draw bounding boxes on maps to calculate structural area density.
Traffic & Route Visualizers
Model utility path routing overlays.
Environmental Analytics
Charts showing green cover decay vs. industrial construction trends.
Engineering Challenges
Vector Layer Rendering Performance
Loading thousands of coordinate points for municipal zones caused significant browser lag, freezing the browser window during zoom and pan operations.
Implemented client-side spatial indexing and bounding box filtering. The map client only renders vector paths that intersect with the active screen viewport, discarding off-screen coordinates dynamically.
Development Timeline
Researched OpenStreetMap integration parameters.
Completed GIS layer toggles and mock dataset mapping.
Polished responsive mobile UI for field testing.
Lessons Learned
- Geospatial operations are computationally expensive in vanilla JS; offloading heavy data parsing to Web Workers keeps the UI thread fluid.
- OpenStreetMap layers require clean vector caching to avoid repeated tile redownloads.
Future Improvements
- Integrate satellite-image vegetation index parsing (NDVI) using remote sensing APIs.
- Add predictive growth algorithms modeling municipal expansion patterns.