WeatherLayers
Search…
Raster Layer
Variable rendered as a color overlay

Example

Raster Layer
1
import { Deck, COORDINATE_SYSTEM } from '@deck.gl/core';
2
import { ClipExtension } from '@deck.gl/extensions';
3
import * as WeatherLayers from '@weatherlayers/weatherlayers-gl';
4
5
// load custom self-hosted data
6
const image = { data: new Float32Array(...), width: ..., height: ... };
7
8
const deckgl = new Deck({
9
layers: [
10
new WeatherLayers.RasterLayer({
11
// data properties
12
image: image,
13
bounds: [-180, -90, 180, 90],
14
_imageCoordinateSystem: COORDINATE_SYSTEM.LNGLAT,
15
extensions: [new ClipExtension()],
16
clipBounds: [-181, -85.051129, 181, 85.051129],
17
18
// style properties
19
palette: [
20
[0, [255, 255, 255],
21
[5, [127, 255, 255],
22
[10, [127, 255, 127],
23
[15, [255, 255, 127],
24
[20, [255, 127, 127],
25
[25, [127, 0, 0],
26
],
27
}),
28
],
29
});
Copied!

Example: Picking

1
import { Deck, COORDINATE_SYSTEM } from '@deck.gl/core';
2
import { ClipExtension } from '@deck.gl/extensions';
3
import * as WeatherLayers from '@weatherlayers/weatherlayers-gl';
4
5
// load custom self-hosted data
6
const image = { data: new Float32Array(...), width: ..., height: ... };
7
8
const deckgl = new Deck({
9
layers: [
10
new WeatherLayers.RasterLayer({
11
// data properties
12
image: image,
13
bounds: [-180, -90, 180, 90],
14
_imageCoordinateSystem: COORDINATE_SYSTEM.LNGLAT,
15
extensions: [new ClipExtension()],
16
clipBounds: [-181, -85.051129, 181, 85.051129],
17
18
// style properties
19
palette: [
20
[0, [255, 255, 255],
21
[5, [127, 255, 255],
22
[10, [127, 255, 127],
23
[15, [255, 255, 127],
24
[20, [255, 127, 127],
25
[25, [127, 0, 0],
26
],
27
28
pickable: true,
29
}),
30
],
31
onHover: event => console.log(event.raster),
32
});
Copied!

Data Properties

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

_imageCoordinateSystem

Type: enum COORDINATE_SYSTEM, values: CARTESIAN, LNGLAT, optional
Default: CARTESIAN
Use COORDINATE_SYSTEM.LNGLAT for an image in an equirectangular projection. See BitmapLayer._imageCoordinateSystem.

extensions

Type: array of extensions
Use [new ClipExtension()] for a global image in an equirectangular projection on a WebMercatorViewport, to clip the areas of the image beyond a valid Mercator bounding box. See ClipExtension.

clipBounds

Type: bounding box of minX, minY, maxX, maxY [number, number, number, number], required for ClipExtension
Recommended value is [-181, -85.051129, 181, 85.051129] for a global image in an equirectangular projection on a WebMercatorViewport, to clip the areas of the image beyond a valid Mercator bounding box. There is 181 instead of 180 to avoid a pixel gap at the antimeridian. See ClipExtension.clipBounds.

Style Properties

palette

Type: color palette text or array, required
Palette used to interpolate values to colors.
Formats:

opacity

Type: number, optional
Default: 1
Opacity of the layer. See Layer opacity.

Picking Info

If pickable: true, the picking info passed to callbacks (onHover, onClick, etc.) provides information on which pixel was picked. It contains an additional raster field.

value

Type: number, required
Value at the pixel.

direction

Type: number, optional
Direction at the pixel. Supported for vector data.