Isolines layer

An instance of IsolineLayer is maint to be used to display isoline, for example of atmospheric pressure. At the moment, this is working best with a tilesets containing a single level 0/0/0.

Constructor

import { ParticleLayer } from "@maptiler/weather";

// After creating a Map instance like in the `Getting Started`
const customLayer = new ParticleLayer(id, options, arrowOptions, coloringFragments);

Extends: Intesity layer

Parameters

Unique identifier of the layer in the map (string).

options (TileLayerOptions)?

Options specific to the intensity visualization (TileLayerOptions)

isolineOptions (IsolineLayerOptions)?

Options specific to the isolines visualization (IsolineLayerOptions)

Properties

options.channel string	Channel to read visualized value. `"r" \| "g" \| "b"` .
options.min number	Minimal value encoded in the tile, represented with 0
options.max number	Maximal value encoded in the tile, represented with 255.
options.stepForZoomLevels Array< ZoomLevelStep> default: `[{ zoom: 0, step: 2 }]`	Lines densities for zoom levels.
options.lineColor RgbaColor	Lines color. RGB[A] - Array of 3-4 numbers. 0-255 per channel.
options.lineColorTen RgbaColor default: same as color	Line color for pressure that are multiples of 10 (980, 990, 1000, etc.). RGB[A] - Array of 3-4 numbers. 0-255 per channel.
options.renderBlurRadius number	Integer > 0. Blurring is needed to ensure smoothly curved lines. renderBlurRadius is used in every animation frame to get best result, but higher values can make animation slower.
options.lineThickness number default: 1	Thickness of the line.

coloringFragments (ColoringFragmentBase[])?

Use function to generate coloring from the pixel values (Array<GradientColoringFragment | OpacityColoringFragment>). If not null, the same data will also be displayed as raster.

Methods

Check out the Layers method reference

initIsoline (options, isolineOptions, coloringFragments)

This function is called in the constructor if it receives the options. This function is useful for initializing a layer with data that comes from an asynchronous function. For example: used in the onAdd function of the layer after fetching the data from the MapTiler cloud.

Parameters

options (TileLayerOptions) : Options specific to the intensity visualization. Same as the layer constructor

isolineOptions (IsolineLayerOptions) : Options specific to the arrows visualization. Same as the layer constructor

coloringFragments (ColoringFragmentBase[]) : If not null, the same data will also be displayed as raster. Same as the layer constructor

hidePressureLabels ()

Remove the layer containing the pressure labels (Hi/Lo pressure extreme values).

Example

const weatherLayer = new maptilerweather.PressureIsolineLayer();
const pressureValue = weatherLayer.hidePressureLabels();

Weather plus pressure isolines layer

showPressureLabels (options?)

Show/update the presure labels (Hi/Lo pressure extreme values) on the map as a independant layer

Parameters

options.zxy (string) : Id of the tile. Default: "0/0/0"

options.blurKernel (number) : Size of the bluring kernel to process the image with before feeding it to the contour algorithm (contours are created with marching squares). Default: 5

options.step (number) : Step used for generating the contour threshold, based on a [0, 255] range of values. For example a step of 5 will create contours at value 0, 5, 10, 15, ... 250, 255. Then those contours will be used to determine the center of high/low pressure but will not be displayed. Default: 2

options.outputSize (number) : Size of the image on which to compute the contours. Default -1 means the original tile size is being used. Default: -1

options.labelTextSize (number) : Size of the text part of the label (does not affect the display of the numerical value). Default: 1.5

options.labelValueSize (number) : Size of the numerical value of the label (does not affect the ltext part). Default: 1.0

options.labelTextHighValues (string) : Text part of the label to display on upper range (above threshold). Default: "H"

options.labelTextLowValues (string) : Text part of the label to display on lower range (below threshold). Default: "L"

options.highColor (string) : Hex color of the label on upper range (above threshold) for both text and numerical value. Default: "#FF0000"

options.lowColor (string) : Hex color of the label on upper range (below threshold) for both text and numerical value. Default: "#0000FF"

options.threshold (number) : value to separate the lower range from the upper range. By default this is set to the middle of the range provided to the contructor as min and max. Default: 1013

options.labelTextUp (boolean) : Display the text part of the label above the numerical part if true or under if false. Default: true

options.labelOutlineColor (string) : Hex color of the label outline. Default: "#FFFFFF"

Example

const weatherLayer = new maptilerweather.PressureIsolineLayer();
const pressureValue = weatherLayer.showPressureLabels();

Weather plus pressure isolines layer

setLineThickness (t)

Adjust the isoline line thickness

Parameters

t (number) : line thickness

Example

const weatherLayer = new maptilerweather.PressureIsolineLayer();
const pressureValue = weatherLayer.setLineThickness(2);

setLineColor (c)

Adjust the isoline line color

Parameters

c (RgbaColor) : line color

Example

const weatherLayer = new maptilerweather.PressureIsolineLayer();
const pressureValue = weatherLayer.setLineColor([255, 0, 0, 40]);

Weather plus pressure isolines layer

Module Reference

Low-level Reference

Demo

Open the live demo

On this page

Constructor
Methods
Related layers

MapTiler Cloud

MapTiler

Isolines layer

Constructor

Methods

Related layers

Module Reference

Low-level Reference

Demo