Map the Air
Live air quality as an observatory: map, field and analysis
A live product at maptheair.com: thousands of stations per map view, the bundle slimmed by hundreds of kilobytes (UI framework removed), fully tested with Jest and Playwright.
Concept, design and development.
This case shows how I evolve my own product over years: from the first map idea to the complete 2026 redesign — design system, data visualization and performance from one hand.
Air quality is local, changeable and often hard to judge. The WAQI/AQICN network provides live readings from thousands of stations worldwide — but raw data alone offers no orientation.
Users need an interface that makes live readings understandable: where is the air heavy right now, which pollutant drives the value, and what about tomorrow? Without API formats, without jargon.
I built Map The Air as a “night observatory”: stations glow color-coded on a dark MapLibre map, a heatmap mode shows pollution as a field, station dossiers explain pollutant drivers and forecasts, and an insights page narrates the loaded map area as an analysis. Fully rebuilt in 2026: a custom CSS design system instead of a UI framework, every chart a hand-written SVG.
What this case proves
Honest colors build trust
Coloring clusters by their maximum turns every world map red. Coloring by the mean shows an honest picture — and extremes get their own, explained place.
Less framework, more character
Replacing a UI framework with a custom design system shrank the bundle drastically — and gave the product a recognizable look no component library can deliver.
Let the data narrate
A dashboard full of numbers is interchangeable. A headline that writes itself from live data (“Air in view is mostly Good”) makes the same dataset instantly understandable.
The night observatory: thousands of live stations glow on the dark world map, clusters colored by their mean AQI.