WeatherLayers
Search…
Raster Layer
Variable rendered as a color overlay

Example

Raster Layer
1
import { Deck } from '@deck.gl/core';
2
import * as WeatherLayers from '@weatherlayers/weatherlayers-gl';
3
4
// configure WeatherLayers Cloud client
5
WeatherLayers.setClientConfig({
6
accessToken: 'xxx',
7
});
8
9
const deckgl = new Deck({
10
layers: [
11
new WeatherLayers.RasterLayer({
12
// data properties
13
dataset: 'gfs/wind_10m_above_ground',
14
datetime: '2022-01-01T00:00:00Z',
15
16
// style properties
17
palette: [
18
[0, [255, 255, 255],
19
[5, [127, 255, 255],
20
[10, [127, 255, 127],
21
[15, [255, 255, 127],
22
[20, [255, 127, 127],
23
[25, [127, 0, 0],
24
],
25
}),
26
],
27
});
Copied!

Example: Picking

1
import { Deck } from '@deck.gl/core';
2
import * as WeatherLayers from '@weatherlayers/weatherlayers-gl';
3
4
// configure WeatherLayers Cloud client
5
WeatherLayers.setClientConfig({
6
accessToken: 'xxx',
7
});
8
9
const deckgl = new Deck({
10
layers: [
11
new WeatherLayers.RasterLayer({
12
// data properties
13
dataset: 'gfs/wind_10m_above_ground',
14
datetime: '2022-01-01T00:00:00Z',
15
16
// style properties
17
palette: [
18
[0, [255, 255, 255],
19
[5, [127, 255, 255],
20
[10, [127, 255, 127],
21
[15, [255, 255, 127],
22
[20, [255, 127, 127],
23
[25, [127, 0, 0],
24
],
25
26
picking: true,
27
}),
28
],
29
onHover: event => console.log(event.raster),
30
});
Copied!

Data Properties

Data properties are common for all layers in the cloud bundle.

Style Properties

Style properties are the same as in the standalone bundle.

Picking Info

Picking info is the same as in the standalone bundle.