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

• [x] Adjust wind speed and particle number by zoomlevel
• [x] Timestamp selection in the ui
• [x] Animate transition between timestamps
• [X] Cloud data
• [X] Combine cloud and wind data
• [X] Mapbox -> Maplibre
• [ ] Open Problems in combined wind cloud layer:
  • [X] 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.