Layers
Layers are visual representations of data from sources. They define how data is styled and rendered on the map. Different layer types provide various rendering options including circles, lines, polygons, symbols, and more.
Overview
Layers control the visual appearance of map features. Each layer must reference a source and specify a type. The GTS Maps SDK supports several layer types, each with its own set of styling properties.
Layer Types
| Type | Description | Use Cases |
|---|---|---|
| fill | Renders filled polygons | Areas, regions, zones |
| line | Renders lines | Roads, paths, boundaries |
| symbol | Renders icons or text | Labels, points of interest |
| circle | Renders circles | Points, markers, heat points |
| heatmap | Renders a heatmap visualization | Density visualization |
| raster | Renders raster tiles | Satellite imagery, custom tiles |
Constructor
Creates a new Layer with the specified options.
Parameters:
| Name | Type | Description |
|---|---|---|
| options | LayerOptions | Configuration options for the layer including id, type, source, and paint properties. |
Example:
// 1. Create a circle layer
const circleLayer = {
id: 'points-layer',
type: 'circle',
source: 'points-source',
paint: {
'circle-radius': 8,
'circle-color': '#ff0000',
'circle-opacity': 0.8
}
};
map.addLayer(circleLayer);
// 2. Create a line layer
const lineLayer = {
id: 'routes-layer',
type: 'line',
source: 'routes-source',
layout: {
'line-join': 'round',
'line-cap': 'round'
},
paint: {
'line-color': '#007cbf',
'line-width': 3
}
};
map.addLayer(lineLayer);
Common Properties
These properties are available for all layer types.
A unique identifier for the layer. This is required and must be unique across all layers.
The type of layer. Valid values: 'fill',
'line', 'symbol', 'circle', 'heatmap',
'raster'.
The data source for this layer, specified as a source ID or a source object.
The name of the source layer to use from a vector tile source. Required for vector tile sources.
An expression to filter features from the source. Only features that match the filter are displayed.
The minimum zoom level at which the layer is visible.
The maximum zoom level at which the layer is visible.
Fill Layer
Properties specific to fill layers for rendering filled polygons.
Constructor
id: 'parks-fill',
type: 'fill',
source: 'parks',
layout: {
visibility: 'visible'
},
paint: {
'fill-color': '#4CAF50',
'fill-opacity': 0.7,
'fill-outline-color': '#2E7D32'
}
};
map.addLayer(fillLayer);
Layout Properties
Whether the layer is displayed. Values: 'visible',
'none'. Default: 'visible'.
Paint Properties
Whether to fill the antialiased polygon edges.
Default: true.
The opacity of the entire fill layer. Default:
1.
The color of the filled part of the layer. Default:
'#000000'.
The outline color of the fill. Displays only if
fill-antialias is true.
Name of image in sprite to use for drawing image fills.
Line Layer
Properties specific to line layers for rendering lines and paths.
Constructor
id: 'roads-line',
type: 'line',
source: 'roads',
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': '#007cbf',
'line-width': 3,
'line-opacity': 0.8
}
};
map.addLayer(lineLayer);
Layout Properties
The display of line endings. Values: 'butt',
'round', 'square'. Default: 'butt'.
The display of lines when joining. Values: 'bevel',
'round', 'miter'. Default: 'miter'.
Used to automatically convert miter joins to bevel joins for sharp
angles. Default: 2.
Paint Properties
The opacity at which the line will be drawn.
Default: 1.
The color with which the line will be drawn.
Default: '#000000'.
The line's width in pixels. Default:
1.
Specifies the lengths of the alternating dashes and gaps that form the dash pattern.
Name of image in sprite to use for drawing image lines.
Symbol Layer
Properties specific to symbol layers for rendering icons and text labels.
Constructor
id: 'cities-symbol',
type: 'symbol',
source: 'cities',
layout: {
'icon-image': 'city-icon',
'icon-size': 1.2,
'text-field': '{name}',
'text-font': ['Arial Unicode MS Bold'],
'text-size': 12,
'text-offset': [0, 0.8]
},
paint: {
'text-color': '#333333',
'text-halo-color': '#ffffff',
'text-halo-width': 1
}
};
map.addLayer(symbolLayer);
Layout Properties
Label placement relative to its geometry. Values:
'point', 'line', 'line-center'. Default:
'point'.
Value to use for a text label. Feature properties are specified
using token replacement: {field_name}.
Font stack to use for displaying text. Default:
['Open Sans Regular', 'Arial Unicode MS Regular'].
Font size in pixels. Default: 16.
Name of image in sprite to use as an icon.
Scale factor for icon. Default: 1.
Paint Properties
The color of the icon. Default:
'#000000'.
The color of the text halo.
The width of the text halo in pixels. Default:
0.
The opacity at which the icon will be drawn.
Default: 1.
Circle Layer
Properties specific to circle layers for rendering point data as circles.
Constructor
id: 'points-circle',
type: 'circle',
source: 'points',
paint: {
'circle-radius': 8,
'circle-color': [
'match',
['get', 'type'],
'park', '#4CAF50',
'school', '#2196F3',
'#FF9800'
],
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff',
'circle-opacity': 0.8
}
};
map.addLayer(circleLayer);
Paint Properties
Circle radius in pixels. Default: 5.
The fill color of the circle. Default:
'#000000'.
Amount to blur the circle. 1 blurs the circle such that only the
center point is full opacity. Default: 0.
The opacity at which the circle will be drawn.
Default: 1.
The width of the circle's stroke in pixels.
Default: 0.
The stroke color of the circle. Default:
'#000000'.
The opacity of the circle's stroke. Default:
1.
Heatmap Layer
Properties specific to heatmap layers for rendering density visualizations.
Constructor
id: 'earthquakes-heatmap',
type: 'heatmap',
source: 'earthquakes',
paint: {
'heatmap-radius': 20,
'heatmap-weight': [
'interpolate', ['linear'],
['get', 'mag'], 0, 0, 6, 1
],
'heatmap-intensity': 1,
'heatmap-color': [
'interpolate', ['linear'], ['heatmap-density'],
0, 'rgba(0, 0, 255, 0)',
0.1, 'royalblue',
0.3, 'cyan',
0.5, 'lime',
0.7, 'yellow',
1, 'red'
]
}
};
map.addLayer(heatmapLayer);
Paint Properties
Radius of influence of one heatmap point in pixels.
Default: 30.
Similar to circle-radius, but specifies the weight of
each point.
The global intensity of the heatmap layer. Default:
1.
The opacity of the entire heatmap layer. Default:
1.
Defines the color gradient of the heatmap.
Raster Layer
Properties specific to raster layers for rendering raster tile sources.
Constructor
id: 'satellite-raster',
type: 'raster',
source: 'satellite',
paint: {
'raster-opacity': 0.8,
'raster-brightness-min': 0.1,
'raster-brightness-max': 0.9,
'raster-saturation': -0.3
}
};
map.addLayer(rasterLayer);
Paint Properties
The opacity at which the image will be drawn.
Default: 1.
Rotates hues around the color wheel. Default:
0.
Increases or decreases the brightness of the image.
Default: 0.
Increases or decreases the brightness of the image.
Default: 1.
Increases or decreases the saturation of the image.
Default: 0.
Increases or decreases the contrast of the image.
Default: 0.
The resampling/interpolation method to use for overscaling. Values:
'linear', 'nearest'. Default: 'linear'.
Methods
Adds the layer to the specified map.
Parameters:
| Parameter | Description |
|---|---|
| map | The map object to add the layer to. |
this (The Layer instance)Removes the layer from the map it is currently on.
this (The Layer instance)Sets the value of a paint property.
Parameters:
| Parameter | Description |
|---|---|
| property | The paint property to set (e.g., 'circle-color', 'line-width'). |
| value | The value to set for the property. |
this (The Layer instance)Sets the value of a layout property.
Parameters:
| Parameter | Description |
|---|---|
| property | The layout property to set (e.g., 'visibility', 'text-field'). |
| value | The value to set for the property. |
this (The Layer instance)