On this page
Properties

Type Alias ArrowLayerOptions

Options specific to the arrow visualization

type ArrowLayerOptions = {
    color?: RgbaColor;
    decodeAsWaves?: boolean;
    decodeChannels?: string;
    decodeMax: number;
    decodeMin: number;
    density?: number;
    fastColor?: RgbaColor;
    fastSpeedNorm?: number;
    maxAmount?: number;
    maxWindSpeed?: number;
    minSize?: number;
    pixelRatio?: number;
    refreshInterval?: number;
    rttTimestep?: number;
    scaleSize?:
        | boolean
        | {
            arrowMinSize?: number;
            decodeChannels: string;
            decodeMax: number;
            decodeMin: number;
        };
    size?: number;
    speed?: number;
    speedWeightedByVectorNorm?: boolean;
}
Index

Properties

color? decodeAsWaves? decodeChannels? decodeMax decodeMin density? fastColor? fastSpeedNorm? maxAmount? maxWindSpeed? minSize? pixelRatio? refreshInterval? rttTimestep? scaleSize? size? speed? speedWeightedByVectorNorm?

Properties

color?: RgbaColor

Color of the arrows. RGBA 0-255. Defaults to [255, 255, 255, 192]

decodeAsWaves?: boolean

Decode the channels as "direction + period" rather than "UV".

If true, the first channel is assumed to be direction (0-360deg) and the second to be the period (1/speed).

decodeChannels?: string

Channels to read the UV values from. Defaults to rg

decodeMax: number

Maximum encoded value.

decodeMin: number

Minimum encoded value.

density?: number

Number of arrows visible per 1000 px^2. Default is 2.

fastColor?: RgbaColor

Color of the arrow when the wind speed reaches fastSpeedNorm. Defaults to color.

fastSpeedNorm?: number

Normalized wind speed threshold (0–1 relative to maxWindSpeed) at which the arrow color fully transitions from color to fastColor. A value of 0.5 means the blend completes at half of the maximum wind speed. Only meaningful when fastColor is set. Default: 0.5

maxAmount?: number

Quantity of arrows to be created. Default value is 128. Has to be a power of 2 and at least 4. The actual exact number will be arrows * arrows. Try to keep this value as low as possible to optimize performance.

The number of actually visible arrows is determined by density.

maxWindSpeed?: number

The wind speed (in the same units as decodeMax) that maps to a normalized speed of 1.0. Arrow opacity and size scale linearly from 0 at calm to their maximum at this speed. Defaults to decodeMax so that arrows at maximum encoded wind speed are fully opaque and full-size.

Reducing this value makes arrows reach full opacity/size at a lower wind speed (useful when the true maximum is rarely observed in practice).

minSize?: number

Minimum arrow point size in logical pixels when wind speed is zero. Keeps gl_PointSize non-zero so temporal blending remains stable even in calm areas. Defaults to 2.

pixelRatio?: number

Use more pixels to make arrows more smooth (especially when tilted). Defaults to 2 for normal displays and 1 for HiDPI displays.

refreshInterval?: number

Time interval (in milliseconds) how often the arrows are refreshed to avoid degradation. Random 1/4 of the arrows is always randomly reset. Default value is 800.

rttTimestep?: number

Max milliseconds between particle simulation (RTT) steps. Lower = smoother motion (fade still uses refreshInterval separately). 0 runs simulation every map prerender frame. Very large values make motion stutter because positions only advance when this elapses. Default: 1000/60 (~one step per display frame at 60Hz).

scaleSize?:
    | boolean
    | {
        arrowMinSize?: number;
        decodeChannels: string;
        decodeMax: number;
        decodeMin: number;
    }

Should the size of the arrow be scaled. If true, the size of the arrows is scaled by its speed. In this case, make sure the option speedWeightedByVectorNorm is set to true or all the arrows will have the same speed, hence the same size.

If false, the size of the arrows is constant and defined by the size options. If an object of shape {decodeCahnnels: string, decodeMin: number, decodemax: number} then the arrows are scaled on the data present in the channel given with a linear factor. The formula to compute the size of an arrow is as follow: size = arrowMinSize + option.size * (decodedChannelValue - decodeMin) / (decodeMax - decodeMin)

if decodedChannelValue is bellow 0, then the arrow is discarded. Default: true

Type Declaration

  • boolean
  • {
        arrowMinSize?: number;
        decodeChannels: string;
        decodeMax: number;
        decodeMin: number;
    }
    • OptionalarrowMinSize?: number

      Minimal size of arrow

    • decodeChannels: string

      Channel to use as a source of data. Can be r, g, b, or a.

    • decodeMax: number

      Real world value corresponding to the upper bound of the [0, 255] range

    • decodeMin: number

      Real world value corresponding to the lower bound of the [0, 255] range

size?: number

Maximum size of an arrow at full wind speed, in logical pixels. Defaults to 1.5

speed?: number

Speed factor of the arrows. Defaults to 0.001

speedWeightedByVectorNorm?: boolean

If true, the arrow speed will be weighted by the norm of the UV vector. If false, the arrow speed is only defined by the options speed. Default: true.

Was this helpful?
SDK JS
Modules
Reference
types
ArrowLayerOptions