HighLow Layer
Variable rendered as highs/lows
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.HighLowLayer({
id: 'highLow',
// data properties
image: image,
bounds: [-180, -90, 180, 90],
// style properties
radius: 1000, // km
}),
],
});Data Properties
See Data properties common for all layers.
Style Properties
See Style properties common for all layers.
radius
radiusType: number, required
Radius in km to filter nearby values. The greater radius, the less values are detected.
unitFormat
unitFormatType: UnitFormat, optional
Default: null
Unit definition to be used for formatting numbers.
textFormatFunction
textFormatFunctionType: function (value: number, unitFormat: UnitFormat) => string, optional
Default: (value, unitFormat) => unitFormat ? formatValue(value, unitFormat) : Math.round(value).toString()
Function to format the value.
textFontFamily
textFontFamilyType: string, optional
Default: "Helvetica Neue", Arial, Helvetica, sans-serif
Font family of the text. See TextLayer fontFamily.
textSize
textSizeType: number, optional
Default: 12
Size of the text. See TextLayer getSize.
textColor
textColorType: color [number, number, number, number?], optional
Default: [255, 255, 255]
Color of the text. See TextLayer getColor.
textOutlineWidth
textOutlineWidthType: number, optional
Default: 1
Width of outline around the text, relative to the font size. See TextLayer outlineWidth.
textOutlineColor
textOutlineColorType: color [number, number, number, number?], optional
Default: [13, 13, 13]
Color of outline around the text. See TextLayer outlineColor.
palette
paletteType: color palette text or array, optional
Palette used to interpolate values to colors.
Formats:
text (
string) - see Text format for detailsarray (
[number, PaletteColor][]) -PaletteColoris any object accepted by Chroma.js constructor
Last updated