[Feature Request] Add Interactive Pollution Heatmap Page (heatmap.html)

[Riya-Kharade]

💡 The Problem

Currently, EcoPulse provides dashboards and comparison charts, but it lacks a geographical visualization of pollution data.

Users cannot visually explore pollution intensity across regions on a map. This limits spatial understanding and reduces the realism of the monitoring experience.

There is no interactive geographic representation of pollution data.

---

🚀 Proposed Solution

Create a new page called heatmap.html that displays an interactive pollution heatmap.

The page should include:

• 🌍 Interactive world map (or India map)
• 📍 Clickable cities/regions
• 🎨 Color-coded pollution intensity (Low → Moderate → High → Severe)
• 📊 Popup or side panel showing pollution data
• 🔄 Filter by pollution type (Air, Water, Noise, Soil)
• 📅 Optional year filter

The page will be built using:

• HTML for structure
• Tailwind CSS for styling
• Vanilla JavaScript for interaction logic
• SVG map or lightweight JS mapping library (optional)
• Static dataset (JSON-based)

No backend required.

---

🎨 Visual Representation

The heatmap.html page should include:

1️⃣ Hero Section

• Title: "Global Pollution Heatmap"
• Short description about geographic pollution monitoring

---

2️⃣ Interactive Map Section

• SVG-based map
• Cities marked with circles
• Circle color based on pollution intensity:
  • 🟢 Low
  • 🟡 Moderate
  • 🟠 High
  • 🔴 Severe
• Hover effect with tooltip
• Click event to display detailed pollution metrics

---

3️⃣ Data Panel

• Selected city name
• Pollution breakdown by type
• Simple mini chart or statistics summary
• Year selector (optional)

Responsive layout for desktop and mobile.

---

🛠️ Implementation Details

• New File: heatmap.html
• Data Source: Static JSON or JS object
• Visualization: SVG map or canvas-based heat intensity
• Interaction: Vanilla JS click + hover logic
• Styling: Tailwind eco-theme colors
• No backend changes required

Optional enhancement:

• Add animated pulsing markers
• Add legend for pollution intensity
• Add smooth transition effects

---

🎯 Impact

This feature will:

• Improve spatial understanding of pollution
• Enhance visual storytelling
• Make EcoPulse look like a real environmental monitoring system
• Increase user engagement
• Strengthen hackathon and portfolio value
• Improve production-level presentation

It transforms EcoPulse from a dashboard-based platform into a geographically interactive environmental intelligence system.

Assign this issue to me under ECWOC'26