/weather-maps

experimenting with mapbox-gl custom layers to visualize weather data

Primary LanguageTypeScriptMIT LicenseMIT

About

This project is a little playground to experiment with custom webgl layers in mapbox-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
  • 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

Access Token

Get a access token from mapbox and save in the root dir of this project as .accessToken.txt.

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.