Raster Layer

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:
text (string) - see Text format for details
array ([number, PaletteColor][]) - PaletteColor is any object accepted by Chroma.js constructor​
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.
See BitmapLayer Pixel Picking.
value
Type: number, required
Value at the pixel.
direction
Type: number, optional
Direction at the pixel. Supported for vector data.