🌍 Interactive Seismic Hazard Map Visualizer — IS 1893:2025

A full-stack interactive web application for visualizing seismic hazard data across the Indian subcontinent and surrounding regions, built around the IS 1893:2025 national standard. The app renders seismic zones, seismogenic source areas, accurate PB2002 tectonic plate boundaries, real-time earthquake epicenters, and density heatmaps — performing point-level composite hazard analysis on an interactive dark-themed Leaflet map.

Live Demo: is1893-visualizer.vercel.app

---

✨ Key Features

Feature	Description
6 Toggleable Layers	Seismic Zones, Seismogenic Areas, Tectonic Plates, Liquefaction Risk, Earthquake Epicenters, Heatmap — mutually exclusive toggles
Click-to-Analyze	Click any point on the map to get a composite risk report (seismic zone, tectonic proximity, liquefaction potential, seismogenic source)
Locate Me	One-click geolocation — flies the map to your current position, places a pulsing blue marker, and automatically opens the Location Analysis panel
Real-time USGS Data	Fetches earthquakes from the last 30 days via the USGS ComCat API (M2.5+)
Density Heatmap	Visualizes earthquake frequency over the last 30 days using a smooth fiery density gradient
Rich Popups	Click earthquake markers to see rich popups with Tsunami warnings, felt reports, and direct links to the official USGS event pages
Google Earth Engine Integration	Powers Liquefaction Risk (via SRTM DEM and OpenLandMap soil data) and precise spatial distance calculations to Tectonic Boundaries
Dark Glassmorphism UI	Zinc-toned dark theme with glass-morphism panels, smooth animations, and micro-interactions throughout

---

📁 Project Structure

BTP4thSemRepo/
├── backend/                    # Express.js API server
│   ├── controllers/
│   │   └── mapController.js    # All route handlers + GEE init
│   ├── routes/
│   │   └── mapRoutes.js        # API route definitions
│   ├── data/
│   │   ├── mockZones.js        # Static GeoJSON (seismic zones, seismogenic areas)
│   │   └── PB2002_boundaries.json # Peter Bird 2002 global tectonic plates dataset
│   ├── index.js                # Server entry point
│   ├── package.json
│   └── .env.example            # Environment variable template
├── frontend/                   # React + Vite SPA
│   ├── src/
│   │   ├── components/
│   │   │   ├── MapVisualizer.jsx   # Main map component (layers, analysis, geolocation)
│   │   │   ├── MapVisualizer.css   # All map + UI styles
│   │   │   ├── LayerControl.jsx    # Floating layer toggle panel
│   │   │   ├── AnalysisPopup.jsx   # Location analysis side panel
│   │   │   ├── HeatmapLayer.jsx    # Custom wrapper for leaflet.heat
│   │   │   ├── LandingPage.jsx     # Hero landing screen
│   │   │   └── LoadingSpinner.jsx
│   │   ├── assets/
│   │   ├── App.jsx                 # Root component
│   │   ├── index.css
│   │   └── main.jsx
│   ├── index.html
│   ├── vite.config.js
│   └── package.json
├── vercel.json                 # Monorepo deployment config
└── README.md

---

🖥️ Frontend Architecture

Built with React 19 + Vite 7 + Leaflet + react-leaflet.

Map Layers (Mutually Exclusive)

#	Layer	Data Source	Map Rendering
A	🟡 Seismic Zones (IS 1893)	Local GeoJSON (6 zones: II–VI)	Color-coded polygons with zone tooltips
B	🔴 Seismogenic Areas	Local GeoJSON (33 source regions)	Red-bordered polygons with magnitude tooltips
C	🟤 Tectonic Plate Boundaries	PB2002 Dataset (Global)	Styled lines (solid/dashed by fault type)
D	💧 Liquefaction Risk	GEE (SRTM Slope + Clay Content)	Raster tile overlay
E	📍 Recent Earthquakes	USGS API (live 30 days)	Circle markers colored by depth with rich popups
F	🌡️ Earthquake Frequency	Derived from USGS data	Smooth fiery density heatmap using leaflet.heat

---

🔌 API Reference & Data Sources

Endpoints

Method	Endpoint	Description
POST	/api/analyze-point	Composite hazard analysis for { lat, lng }
GET	/api/earthquakes	Recent earthquakes (USGS, last 30 days, M2.5+)
GET	/api/layers/seismic-zones	Seismic zones GeoJSON (II–VI)
GET	/api/layers/seismogenic-areas	33 seismogenic source area GeoJSON
GET	/api/layers/liquefaction-tiles	Returns authenticated GEE MapID tile URLs

Data Sources

1. Earthquake Frequency & Recent Earthquakes (USGS API)

The backend live-queries the USGS Earthquake ComCat API to fetch seismic events from the past 30 days within the Indian subcontinent bounding box (M2.5+).

• Heatmap Layer: Visualizes the density of these recent earthquakes. The intensity scales with earthquake magnitude. It uses a custom fiery gradient (yellow → orange → red → dark red) to vividly highlight highly active seismic zones (like the Hindu Kush or Andaman trenches).
• Points Layer: Renders specific epicenters, colored by depth. Clicking a point reveals Tsunami warnings, felt reports, and a direct USGS link.

2. Tectonic Plates (PB2002 Dataset + GEE)

Instead of rough approximations, the system uses the highly accurate PB2002 Tectonic Plates Dataset by Peter Bird. When you click the map, the backend dynamically loads this GeoJSON into Google Earth Engine (GEE) to execute rapid, high-precision spatial queries, returning the exact distance to the nearest major plate boundary (e.g., EU-IN Plate Boundary).

3. Liquefaction Risk (Google Earth Engine)

The system leverages Google Earth Engine to compute liquefaction potential on the fly using a multi-tier risk classification:

• Slope: Uses USGS/SRTMGL1_003 digital elevation models.
• Soil Clay Content: Uses OpenLandMap/SOL/SOL_CLAY-WFRACTION_USDA-3A1A1A_M/v02.

Risk Tiers:

• 🔴 High Risk: Slope < 5° AND Clay Content < 20%
• 🟠 Moderate Risk: Slope < 10° AND Clay Content < 40%
• 🟢 Low Risk: Steep terrain (Slope ≥ 10°) OR heavily packed clay (Clay ≥ 40%)

---

🚀 Getting Started

Prerequisites

• Node.js ≥ 18

1. Clone the Repository

git clone https://github.com/NiharRD/BTP4thSemRepo.git
cd BTP4thSemRepo

2. Start the Backend

cd backend
cp .env.example .env        # Add your GEE credentials
npm install
npm run dev                  # → http://localhost:3001

3. Start the Frontend

cd frontend
npm install
npm run dev                  # → http://localhost:5173

Environment Variables

Variable	Required	Default	Description
GEE_CLIENT_EMAIL	Yes	—	Google Earth Engine service account email
GEE_PRIVATE_KEY	Yes	—	GEE service account private key
PORT	No	3001	Backend server port
VITE_API_URL	No	Auto-detected	Override backend API URL for frontend

---

🛠 Tech Stack

Layer	Technology
Frontend	React 19, Vite 7, Leaflet 1.9, react-leaflet 5, leaflet.heat, Lucide Icons
Backend	Express 5, Node.js, @turf/turf, Axios, dotenv
GEE SDK	@google/earthengine (for spatial analysis and liquefaction mapping)
External API	USGS ComCat Earthquake API
Deployment	Vercel (monorepo — frontend + backend)

---

🎨 Design System

The UI uses a Zinc-toned dark theme with glassmorphism and subtle animations:

Token	Value	Usage
Background	#09090b (Zinc 950)	Map container, app background
Panel BG	rgba(24, 24, 27, 0.95)	Layer control, analysis panel, legend
Text Primary	#fafafa (Zinc 50)	Headings, active labels
Accent (Analysis)	#6366f1 (Indigo 500)	Analysis marker
Accent (Location)	#3b82f6 (Blue 500)	User location pulsing dot

---

📋 License

ISC