fbrosda / weather-maps

experimenting with maplibre-gl-js custom layers to visualize weather data

About

This project is a little playground to experiment with custom webgl layers in maplibre-gl.

Examples:

triangle.html

A simple copy of the Getting Started example from mapbox

wind.html

This is heavily based on webgl-wind.

The download part is integrated into the server (WindDataFetcher) and the actual rendering from src/index.js is adjusted to work with CustomLayers, which were not available, by that time.

Next Steps

• Adjust wind speed and particle number by zoomlevel
• Timestamp selection in the ui
• Animate transition between timestamps
• Cloud data
• Combine cloud and wind data
• Mapbox -> Maplibre
• Open Problems in combined wind cloud layer:
  • Flickering particles, as pseudo random numbers in the two update shaders don't match
  • Fade out cloud color
  • Blending between cloud data
• Repeatable textures: Only possible, if width/height is a power of two.

Setup

External Dependencies

This project uses ecCodes to convert the binary data fetched from NOMADS to json and png.

Run in container

sudo podman build --tag=weather-maps .
sudo podman run -d --rm --name weather-maps -p 127.0.0.1:3000:3000 weather-maps

Start Server

npm install
npm run build
npm start

This will start a http server on port 3000. You can then navigate to localhost:3000 in your favorite browser.