51 lines
1.8 KiB
Markdown
51 lines
1.8 KiB
Markdown
# Wind layer demo
|
|
|
|
A minimal browser client that renders the predictor's wind field as an
|
|
animated particle layer using [Leaflet](https://leafletjs.com/) and
|
|
[leaflet-velocity](https://github.com/onaci/leaflet-velocity).
|
|
|
|
The predictor's `GET /api/v1/wind/field` endpoint emits the
|
|
[wind-js-server](https://github.com/danwild/wind-js-server) "gfs.json" format
|
|
(a two-element `[U, V]` array of `{header, data}` records), which is exactly
|
|
what leaflet-velocity and [sakitam-fdd/wind-layer](https://github.com/sakitam-fdd/wind-layer)
|
|
consume — so no transformation is needed in the frontend.
|
|
|
|
## Running
|
|
|
|
Serve this directory and the predictor from the same origin (or set `API` in
|
|
`index.html` to the predictor's base URL and rely on the predictor's CORS
|
|
headers):
|
|
|
|
```bash
|
|
# Terminal 1: the predictor (must have a dataset loaded for real data)
|
|
./bin/predictor
|
|
|
|
# Terminal 2: serve the demo
|
|
cd examples/wind-demo && python3 -m http.server 8090
|
|
# open http://localhost:8090 (set API="http://localhost:8080" in index.html)
|
|
```
|
|
|
|
## API contract
|
|
|
|
`GET /api/v1/wind/field` query parameters (all optional):
|
|
|
|
| Param | Default | Meaning |
|
|
|---|---|---|
|
|
| `time` | dataset epoch | RFC3339 forecast time to sample |
|
|
| `altitude` | `0` | altitude in metres |
|
|
| `min_lat`,`max_lat`,`min_lng`,`max_lng` | global | bounding box (degrees) |
|
|
| `step` | `1.0` | grid resolution in degrees (min `0.25`) |
|
|
|
|
`GET /api/v1/wind/meta` returns the active dataset's source, epoch, suggested
|
|
altitudes, and bounding box so a client can populate its controls.
|
|
|
|
The full OpenAPI definition is served at `/openapi.yaml`, with a browsable
|
|
ReDoc rendering at `/docs`.
|
|
|
|
## Minimal fetch
|
|
|
|
```js
|
|
const res = await fetch("/api/v1/wind/field?altitude=10000&step=2");
|
|
const data = await res.json(); // [ {header, data}, {header, data} ]
|
|
L.velocityLayer({ data }).addTo(map);
|
|
```
|