Layers

Layers are responsible for rendering data associated with a data source based on a particular style configuration. There are two primary components to a layer: the source that provides the data to render and a layer style that determines how that data gets rendered on a map.

Currently, all layers within MapsGL are TileLayer subclasses.

Layer Types

Layer type values specify how data gets rendered on a map and aren't directly mapped to paint style properties as multiple style properties may be used for a single layer type. For example, a fill layer type will only use the fill style properties, but a circle layer type will use the circle, fill, and stroke style properties. However, all layer types will use the root-level opacity style property to control the layer's overall transparency.

Review our advanced section on layers for more information and examples on setting up and using custom layers.

The following layer types and their respective paint style properties are supported:

raster

Basic raster tile images and textures. Uses raster style properties.

fill

Filled and/or stroked vector polygons. Uses fill and stroke style properties.

line

Stroked vector lines. Uses stroke style properties.

circle

Filled and/or stroked vector circles. Uses circle, fill, and stroke style properties.

symbol

SDF (signed distance field) icons, image icons, or quads rendered with custom WebGL shaders. Uses symbol style properties.

sample

Colorized encoded raster tile data. Uses sample style properties.

grid

Symbols rendered on a grid. Uses grid and sample style properties.

heatmap

Heatmap rendering of point data. Uses heatmap style properties.

contour

Contour lines from raster data. Uses contour and sample style properties.

particles

Flow field particles from raster vector data. Uses particle and sample style properties.

text

Text labels. Uses text and symbol style properties.

query

Queries features from another layer using a set of map coordinates and renders that data as text, symbol, or circle features. Uses style properties associated with text, symbol, or circle layer types. Requires a valid value for queryLayer to specify the layer to query features from. Also requires a vector or geojson data source of point features to use as the locations to query.

composite

Combines multiple layers into a single layer alias. Uses style properties associated with the layer types for each of the layers being combined. When adding composite layers via addWeatherLayer, the return type will always be an array of individual layers associated with the composite layer that were added to the map.

Layer

The base class for all layers on a map.

Configuration

{
    type: LayerType;
    source: string | SourceSpecification | DataSource;
    sourceLayer?: string;
    sourceType?: SourceType;
    queryLayer?: string | { id: string; hidden?: boolean; };
    queryType?: 'text' | 'symbol' | 'circle';
    mask?: string | { id: string; invert?: boolean; };
    filter?: ExpressionSpecification;
    timeMode?: {
        mode: 'none' | 'any' | 'interval';
        clamp: 'none' | 'past' | 'future' | 'range';
        range?: {
            start: Date;
            end: Date;
        };
        intervals: number;
    };
    timeRange?: TimeRange;
    quality: DataQuality;
    paint: Partial<PaintStyleSpec>;
}

The following configuration options are supported when instantiating Layer instances and subclasses:

Properties

The following properties are available on Layer instances and subclasses:

Methods

show()

hide()

refresh(clear: boolean)

setPaintProperty(property: string, value: any)

layer.setPaintProperty('fill.color', '#ffcc00');

setNeedsUpdate()

queryFeatures(coord: { lat: number; lon: number; }, zoom: number): number | Record<string, any> | Array<any>

queryFeaturesPromise(coord: { lat: number; lon: number; }, zoom: number): Promise<FeatureQueryResult | void>

dispose()

Tile Layer

A layer that renders raster, encoded or vector tiles on a map. Extends Layer.

Configuration

// Inherits all configuration options from `Layer`
{
    quality: DataQuality;
}

The following configuration options are supported when instantiating TileLayer instances:

Properties

The following properties are available on TileLayer instances and subclasses:

Methods

getDataZoom(zoom: number): number