Grid Layer

Variable rendered as grid of values or symbols (arrows, wind barbs)

Example

Grid Layer

import { Deck } from '@deck.gl/core';
import * as WeatherLayers from 'weatherlayers-gl';

// load data
const image = await WeatherLayers.loadTextureData(url);

const deckgl = new Deck({
  layers: [
    new WeatherLayers.GridLayer({
      id: 'grid',
      // data properties
      image: image,
      bounds: [-180, -90, 180, 90],
    }),
  ],
});

Example: Arrows

Grid Layer: Arrows

import { Deck } from '@deck.gl/core';
import * as WeatherLayers from 'weatherlayers-gl';

// load data
const image = await WeatherLayers.loadTextureDataCached(url);

const deckgl = new Deck({
  layers: [
    new WeatherLayers.GridLayer({
      // data properties
      image: image,
      imageType: WeatherLayers.ImageType.VECTOR,
      bounds: [-180, -90, 180, 90],
      
      // style properties
      style: WeatherLayers.GridStyle.ARROW,
      iconBounds: [0, 100],
    }),
  ],
});

Example: Wind Barbs

Grid Layer: Wind Barbs

import { Deck } from '@deck.gl/core';
import * as WeatherLayers from 'weatherlayers-gl';

// load data
const image = await WeatherLayers.loadTextureDataCached(url);

const deckgl = new Deck({
  layers: [
    new WeatherLayers.GridLayer({
      // data properties
      image: image,
      imageType: WeatherLayers.ImageType.VECTOR,
      bounds: [-180, -90, 180, 90],
      
      // style properties
      style: WeatherLayers.GridStyle.WIND_BARB,
      iconBounds: [0, 100 * 0.51444], // 100 kts to m/s
    }),
  ],
});

Data Properties

See Data properties common for all layers.

Style Properties

See Style properties common for all layers.

style

Type: enum WeatherLayers.GridStyle, values: VALUE, ARROW, WIND_BARB, optional

Default: VALUE

Style of the grid points, values or symbols.

If style: ARROW or style: WIND_BARB, imageType must be VECTOR.

density

Type: number, optional

Default: 0

Grid point density. Recommended values are -2, -1, 0, 1, 2 (lowest to highest density). Larger values can cause performance issues.

unitFormat

Type: UnitFormat, optional

Default: null

Unit definition to be used for formatting numbers.

textFormatFunction

Type: function (value: number, unitFormat: UnitFormat) => string, optional

Default: (value, unitFormat) => unitFormat ? formatValue(value, unitFormat) : Math.round(value).toString()

Function to format the value.

textFontFamily

Type: string, optional

Default: "Helvetica Neue", Arial, Helvetica, sans-serif

Font family of the text. See TextLayer fontFamily.

textSize

Type: number, optional

Default: 12

Size of the text. See TextLayer getSize.

textColor

Type: color [number, number, number, number?], optional

Default: [255, 255, 255]

Color of the text. See TextLayer getColor.

textOutlineWidth

Type: number, optional

Default: 1

Width of outline around the text, relative to the font size. See TextLayer outlineWidth.

textOutlineColor

Type: color [number, number, number, number?], optional

Default: [13, 13, 13]

Color of outline around the text. See TextLayer outlineColor.

iconBounds

Type: tuple of lower and upper bound [number, number], required if style: ARROW

Default if style: WIND_BARB: [0, 100 * 0.51444] (100 knots to m/s, assumes the data units are m/s)

Bounds of the icon in the data units. The lower bound is usually 0, the upper bound is the largest value in the data units that matches the largest value of the icons.

If style: WIND_BARB, the upper bound must match 100 knots in the data units.

iconSize

Type: [number, number] | number, optional

Default: 12

Size of the icon. See IconLayer getSize.

If an array is passed in, it's treated as minimal and maximal icon size. The actual icon size is scaled by the data value.

iconColor

Type: color [number, number, number, number?], optional

Default: [255, 255, 255]

Color of the icon. See IconLayer getColor.

palette

Type: color palette text or array, optional

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