This project is a little playground to experiment with custom webgl layers in mapbox-gl.
Examples:
A simple copy of the Getting Started example from mapbox
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.
- Adjust wind speed and particle number by zoomlevel
- Timestamp selection in the ui
- Animate transition between timestamps
- Cloud data
- Combine cloud and wind data
- 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.
Get a access token from mapbox and save in the root dir of this project as
.accessToken.txt
.
This project uses ecCodes to convert the binary data fetched from NOMADS to json and png.
sudo podman build --tag=weather-maps .
sudo podman run -d --rm --name weather-maps -p 127.0.0.1:3000:3000 weather-maps
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.