Raster Layer
Variable rendered as a color overlay
Example

import { Deck } from '@deck.gl/core';
import { ClipExtension } from '@deck.gl/extensions';
import * as WeatherLayers from 'weatherlayers-gl';
// load data
const image = await WeatherLayers.loadTextureData(url);
const deckgl = new Deck({
layers: [
new WeatherLayers.RasterLayer({
id: 'raster',
// data properties
image: image,
bounds: [-180, -90, 180, 90],
// style properties
palette: [
[0, [255, 255, 255]],
[5, [127, 255, 255]],
[10, [127, 255, 127]],
[15, [255, 255, 127]],
[20, [255, 127, 127]],
[25, [127, 0, 0]],
],
extensions: [new ClipExtension()],
clipBounds: [-181, -85.051129, 181, 85.051129],
}),
],
});
Example: Picking
import { Deck } from '@deck.gl/core';
import { ClipExtension } from '@deck.gl/extensions';
import * as WeatherLayers from 'weatherlayers-gl';
// load data
const image = await WeatherLayers.loadTextureDataCached(url);
const deckgl = new Deck({
layers: [
new WeatherLayers.RasterLayer({
// data properties
image: image,
bounds: [-180, -90, 180, 90],
extensions: [new ClipExtension()],
clipBounds: [-181, -85.051129, 181, 85.051129],
// style properties
palette: [
[0, [255, 255, 255],
[5, [127, 255, 255],
[10, [127, 255, 127],
[15, [255, 255, 127],
[20, [255, 127, 127],
[25, [127, 0, 0],
],
pickable: true,
}),
],
onHover: event => console.log(event.raster),
});
Data Properties
See Data properties common for all layers.
Style Properties
See Style properties common for all layers.
palette
palette
Type: color palette text or array, required
Palette used to interpolate values to colors.
Formats:
text (
string
) - see Text format for detailsarray (
[number, PaletteColor][]
) -PaletteColor
is any object accepted by Chroma.js constructor
gridEnabled
gridEnabled
Type: boolean, optional
Default: false
Displays a grid of points to allow for verification how the rendered data aligns to the grid.
Picking Info
Type: RasterPointProperties
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.
Float32 data are recommended for the best precision.
See Tooltip control and BitmapLayer Pixel Picking.
Last updated