Climate Dashboard

An interactive climate map built with Astro 5, React 19, and MapLibre GL JS. Displays real-time weather conditions and air quality data worldwide by calling the OpenWeatherMap API.

---

Features

Feature	Detail
Interactive WebGL map	Powered by MapLibre GL JS + OpenFreeMap vector tiles (no extra key)
Weather data	Temperature, feels-like, humidity, pressure, wind, clouds, visibility
Air Quality Index	AQI 1–5, PM2.5, PM10, O₃, NO₂, SO₂, CO
Location search	Geocodes any city name via OpenWeatherMap Geocoding API
Map click	Click anywhere on the map to pin and fetch that location
Colour modes	Switch between AQI-coloured, temperature-coloured, or both
Popup	Quick-glance popup on each pin with temp + AQI badge
Detail sidebar	Full data cards for every pinned location
Dark UI	Fully dark-themed dashboard

---

Prerequisites

• Node >= 22.12 (see engines in package.json)
• pnpm — install with npm i -g pnpm if not already present
• A free OpenWeatherMap API key — sign up at https://openweathermap.org/api The free tier covers all three APIs used: Current Weather, Air Pollution, and Geocoding.

---

Quick start

# 1. Enter the project directory
cd Astro-Climate-Dashboard

# 2. Install dependencies
pnpm install

# 3. Set your API key
cp .env.example .env
#   Edit .env and replace "your_api_key_here" with your OpenWeatherMap key

# 4. Start the dev server
pnpm dev
#   Open http://localhost:4321

---

Available scripts

Command	Description
pnpm dev	Start the Vite dev server with HMR
pnpm build	Production build into dist/
pnpm preview	Serve the production build locally

---

Environment variables

Variable	Required	Description
PUBLIC_OPENWEATHER_API_KEY	Yes	OpenWeatherMap API key. The PUBLIC_ prefix makes it available in the client bundle.

---

Project structure

src/
├── components/
│   └── ClimateMap.tsx   # Main React component (MapLibre GL map + UI)
├── lib/
│   ├── openweather.ts   # OpenWeatherMap API client (weather, AQI, geocoding)
│   └── colors.ts        # AQI and temperature → hex colour helpers
├── pages/
│   └── index.astro      # Single-page shell; mounts ClimateMap client:only
└── styles/
    └── global.css       # Dark-theme stylesheet + MapLibre GL overrides
astro.config.mjs         # Astro config (React integration, Vite settings)
.env.example             # Template — copy to .env and add your key

---

API endpoints used

Endpoint	Purpose	Docs
/geo/1.0/direct	City name → lat/lon	Geocoding API
/data/2.5/weather	Current weather	Current Weather
/data/2.5/air_pollution	Air Quality Index + pollutants	Air Pollution API

All three are available on the free tier (60 calls/min, 1 M calls/month).

---

AQI colour scale

Index	Label	Colour
1	Good	Green
2	Fair	Yellow
3	Moderate	Orange
4	Poor	Red
5	Very Poor	Purple

---

Tech stack

• Astro 5 — static-site framework with island architecture
• React 19 — component model for the interactive UI
• MapLibre GL JS 5 — open-source WebGL map renderer
• OpenFreeMap — free vector tile style (no API key needed)
• OpenWeatherMap API — weather + AQI data