Aether is an interactive full-screen weather map built with React, TypeScript, Material-UI, Leaflet, and Canvas. It displays live weather fields over OpenStreetMap and updates the visible area as the map moves.
- Animated wind particles colored by speed
- Zoom-independent animated 250 hPa jet-stream layer
- Distinct outlines for the northern and southern polar and subtropical jets
- Interpolated temperature layer and legend
- European AQI layer with PM2.5 readings
- Animated precipitation radar
- Storm and lightning effects
- Weather values at the mouse position
- City search and animated map navigation
- Persistent browser cache using IndexedDB
- Installable PWA with offline app shell and cached weather responses
- Automatic background refresh while the app is open
- Responsive, compact map controls
- Standard OpenStreetMap and CARTO Dark Matter tile styles
- Vercel deployment configuration
- Open-Meteo supplies modeled temperature, wind, precipitation, cloud, and storm data.
- Copernicus Atmosphere Monitoring Service (CAMS) supplies modeled air-quality data through the Open-Meteo Air Quality API.
- RainViewer supplies precipitation radar tiles.
- OpenStreetMap supplies the base map.
- CARTO supplies the optional Dark Matter base map.
- MeteoGate supplies official European high-temperature warnings from MeteoAlarm members.
Open-Meteo data is licensed under CC BY 4.0. Air-quality data requires attribution to both CAMS and Open-Meteo. RainViewer requires attribution and its free API is intended for personal, educational, and small-scale community use. OpenStreetMap tiles must follow the tile usage policy.
For a commercial or high-traffic deployment, review every provider's current terms and use production-grade map and radar providers where needed.
The Jet Stream layer uses its own data and animation pipeline. It requests wind speed and direction at 250 hPa from Open-Meteo, converts meteorological “wind from” bearings into eastward and northward vectors, and interpolates those vectors using geographic distance.
Jet Stream samples stay fixed while the camera zooms. This keeps the wind field and direction stable instead of rebuilding them from screen-space distances at every zoom level. Panning to a new area loads a new geographic sample grid.
Particle colors have two meanings:
- The inner color shows wind speed.
- The outer color identifies the latitude band: northern polar, northern subtropical, southern subtropical, or southern polar.
These four outline categories make the major jet regions easier to distinguish. They are latitude-based visualization bands, not detected jet-axis boundaries.
- Node.js 20.19 or newer
- npm
npm install
npm run devOpen the local URL printed by Vite. Nodemon restarts Vite when API, server, or Vite configuration files change; React source changes continue to use Vite hot reload.
npm run buildThe production output is written to dist.
To inspect the production build locally:
npm run previewImport the repository into Vercel. The included vercel.json configures:
- Vite as the framework
npm run buildas the build commanddistas the output directory- Long-lived caching for hashed assets
- A cached serverless proxy for Open-Meteo requests
Set METEOGATE_KEY in Vercel to enable official European heat warnings:
METEOGATE_KEY=your-meteogate-api-key
src/
components/ React interface and map components
map/ Weather animation and radar layers
services/ Weather, geocoding, and browser cache services
weather/ Weather response translation
types/ Shared TypeScript data types
Wind, Jet Stream, and temperature layers use modeled grid values with interpolation between fetched points. They are not measurements for every map pixel. Jet Stream outlines use latitude bands for visual identification and do not represent exact atmospheric boundaries. Radar availability and resolution depend on RainViewer coverage.
The Aether source code is available under the MIT License. Third-party maps, weather data, radar tiles, icons, and libraries keep their own licenses and terms.