Grid Layer

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

Example

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

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

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

Style Properties

`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`

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

`textSize`

Type: number, optional

Default: 12

`textColor`

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

Default: [255, 255, 255]

`textOutlineWidth`

Type: number, optional

Default: 1

`textOutlineColor`

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

Default: [13, 13, 13]

`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.