Mapbox GL JS v3 · Malawi · Climate data
Eight ways to put Malawi's weather on a map.
Working Mapbox demos built on Malawi's districts, terrain and forecast data. Each one runs live in your browser and says where it fits in early warning, forecasting and climate risk work.
Mean rainfall per district, 6 to 16 March 2023, as Cyclone Freddy stalled over the south. Wettest: Mulanje, 184.4 mm. CHIRPS v2.0.
- Live demos
- 8
- Districts
- 28
- Hours of forecast wind
- 168
- Chapters
- 4
The demos.
Each demo opens full screen with its controls, a note on where it fits, and a badge saying how real its data is.
Forecast rasters
Gridded model output on the map: animated, recoloured on the GPU, or drawn by your own code.
Wind particles from a forecast
Seven days of GFS surface wind, animated as particles on a globe.
- raster-array
- raster-particle
- globe
- Archived run
Colouring a raster by value
Elevation decoded from Terrain-RGB and recoloured live with raster-color.
- raster-color
- raster-color-mix
- raster-color-range
- Reference data
Drawing your own field
A rainfall field computed in the browser, then frozen to a PNG the way IBF draws it.
- canvas source
- image source
- updateImage
- Synthetic data
Interaction
Districts that respond to hover and click without re-uploading data.
Basemaps and 3D
One configurable style for light and dark, and the relief that shapes floods and landslides.
Analysis APIs
Server-side answers: travel-time areas and map images built from a URL.
Cyclone Freddy, 2023.
The same techniques applied to one storm: its five-week track across the Indian Ocean, the rain that fell on southern Malawi, and satellite views of the debris flows on Mulanje and Soche.
How it's built.
A static Next.js site. Each demo page loads Mapbox GL JS only in the browser; the text is rendered ahead of time.
Data labels
Every demo carries a badge: reference data, an archived model run, sample values or synthetic data. Sample and synthetic values never stand in for a forecast.
Costs
Opening a demo is one Mapbox map load. The isochrone and static image demos also call billed APIs, and only when you change an input. The home page map is drawn on the server and costs nothing.
Colours
UI colours on the map are read from the site theme, so outlines, accents and the basemap's light preset switch with light and dark mode. Data ramps stay fixed so a value always reads the same.
Sources
- GFS 10 m wind: NOAA, via Mapbox's public raster-array example tileset (one archived run)
- Elevation: Mapbox Terrain-RGB v1 and Terrain DEM v1
- Districts: geoBoundaries Malawi ADM2 2020 (CC BY 3.0 IGO)
- Rainfall on this page: CHIRPS v2.0 daily, UCSB Climate Hazards Center (CC BY 4.0)
- Basemaps, roads and buildings: © Mapbox © OpenStreetMap contributors