Particle Layer

Vector variable rendered as animated particle simulation layer

Example

Particle 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.ParticleLayer({
      id: 'particle',
      // data properties
      image: image,
      bounds: [-180, -90, 180, 90],
      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.

numParticles

Type: number, optional

Default: 5000

Number of the particles. The greater number of particles, the denser particle trails.

maxAge

Type: number, optional

Default: 100

Max age of the particles in frames. The greater max age, the longer particle trails.

speedFactor

Type: number 0-1, optional

Default: 1

Speed factor of the particles. The greater speed factor, the longer particle trails.

fps

Type: number 1-120, optional

Default: 30

Animation frame rate per second. The greater rate, the faster the animation.

width

Type: number, optional

Default: 1

Width of the line. See LineLayer getWidth.

color

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

Default: [255, 255, 255]

Color of the line. See LineLayer 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