Contour Layer

Variable rendered as contours

Example

Contour Layer

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.ContourLayer({
      id: 'contour',
      // data properties
      image: image,
      bounds: [-180, -90, 180, 90],
      // style properties
      interval: 200,
      extensions: [new ClipExtension()],
      clipBounds: [-181, -85.051129, 181, 85.051129],
    }),
  ],
});

Data Properties

See Data properties common for all layers.

Style Properties

See Style properties common for all layers.

interval

Type: number, required

Interval between contour lines in the data units. The greater interval, the less contour lines are rendered.

The value must be in the same units as the data image.

majorInterval

Type: number, optional

Default: 0 (every contour line is a major contour line)

Interval between major contour lines in the data units. The greater interval, the less major contour lines are rendered.

The value must be in the same units as the data image.

width

Type: number, optional

Default: 1

Width of the contour line. See LineLayer getWidth.

Major contour lines are rendered with full width, minor contour lines are rendered with half width.

color

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

Default: [255, 255, 255]

Color of the contour line. See LineLayer getColor.

Major contour lines are rendered with full opacity, minor contour lines are rendered with half opacity.

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