Project Overview
Atmos.th is an interactive dashboard for tracking real-time air quality and weather across Thailand's provinces. Built with React 19, TypeScript, and Leaflet with full TH/EN language support.
Features
Interactive AQI Map
Real-time AQI markers across 38+ provinces, color-coded by severity. Each marker opens a popup with AQI, PM2.5, temperature, humidity, wind speed, and current weather.
AQI Ranking Sidebar
Collapsible sidebar with province AQI rankings and filter by AQI level, with mobile drawer support
Search & Geolocation
Search any province with instant fly-to animation, or use geolocation to automatically find and fly to the nearest station
Map Style & Settings
Switch between Dark, Light, and Satellite map styles, and filter markers by AQI level
Responsive & Bilingual
Responsive layout for desktop and mobile with instant TH/EN language toggle
Technologies Used
Frontend
React 19TypeScript 6Vite 8Tailwind CSS 4react-leafletLeafletlucide-react
Data
Open-Meteo Forecast APIOpen-Meteo Air Quality API