Properties

NMaps GL JS's global properties and options that you can access while initializing your map or accessing information about its status.

Global

baseApiUrl

Gets and sets the map's default API URL for requesting tiles, styles, sprites, and glyphs

Example

nmapsgl.baseApiUrl = 'https://nmaps-api.ndrive.com';

Gets and sets the number of web workers instantiated on a page with GL JS maps. By default, it is set to half the number of CPU cores (capped at 6). Make sure to set this property before creating any map instances for it to have effect.

Returns

number: Number of workers currently configured.

Example

nmapsgl.workerCount = 2;

maxParallelImageRequests

Gets and sets the maximum number of images (raster tiles, sprites, icons) to load in parallel, which affects performance in raster-heavy maps. 16 by default.

Returns

number: Number of parallel requests currently configured.

Example

nmapsgl.maxParallelImageRequests = 10;

supported

Test whether the browser supports NMaps GL JS.

Parameters

options(Object?)

Name	Description
options.failIfMajorPerformanceCaveat `boolean` default: `false`	If `true` , the function will return `false` if the performance of NMaps GL JS would be dramatically worse than expected (e.g. a software WebGL renderer would be used).

Returns

boolean:

Example

// Show an alert if the browser does not support NMaps GL
if (!nmapsgl.supported()) {
alert('Your browser does not support NMaps GL');
}

Check for browser support

version

The version of NMaps GL JS in use as specified in package.json, CHANGELOG.md, and the GitHub release.

clearStorage

Clears browser storage used by this library. Using this method flushes the NMaps tile cache that is managed by this library. Tiles may still be cached by the browser in some cases.

This API is supported on browsers where the Cache API is supported and enabled. This includes all major browsers when pages are served over https://, except Internet Explorer and Edge Mobile.

When called in unsupported browsers or environments (private or incognito mode), the callback will be called with an error argument.

Parameters

callback(Function)Called with an error argument if there is an error.

Example

nmapsgl.clearStorage();

AnimationOptions

Options common to map movement methods that involve animation, such as Map#panBy and Map#easeTo, controlling the duration and easing function of the animation. All properties are optional.

duration(number): The animation's duration, measured in milliseconds.

easing(Function): A function taking a time in the range 0..1 and returning a number where 0 is the initial state and 1 is the final state.

offset(PointLike): of the target center relative to real map container center at the end of animation.

animate(boolean): If false , no animation will occur.

essential(boolean): If true , then the animation is considered essential and will not be affected by prefers-reduced-motion .

CameraOptions

Options common to Map#jumpTo, Map#easeTo, and Map#flyTo, controlling the desired location, zoom, bearing, and pitch of the camera. All properties are optional, and when a property is omitted, the current camera value for that property will remain unchanged.

Properties

center(LngLatLike): The desired center.

zoom(number): The desired zoom level.

bearing(number): The desired bearing in degrees. The bearing is the compass direction that is "up". For example, bearing: 90 orients the map so that east is up.

pitch(number): The desired pitch in degrees. The pitch is the angle towards the horizon measured in degrees with a range between 0 and 60 degrees. For example, pitch: 0 provides the appearance of looking straight down at the map, while pitch: 60 tilts the user's perspective towards the horizon. Increasing the pitch value is often used to display 3D objects.

around(LngLatLike): If zoom is specified, around determines the point around which the zoom is centered.

padding(PaddingOptions): Dimensions in pixels applied on each side of the viewport for shifting the vanishing point.

Example

// set the map's initial perspective with CameraOptions
const map = new nmapsgl.Map({
container: 'map',
center: [-73.5804, 45.53483],
pitch: 60,
bearing: -60,
zoom: 10
});

PaddingOptions

Options for setting padding on calls to methods such as Map#fitBounds, Map#fitScreenCoordinates, and Map#setPadding. Adjust these options to set the amount of padding in pixels added to the edges of the canvas. Set a uniform padding on all edges or individual values for each edge. All properties of this object must be non-negative integers.

Properties

top(number): Padding in pixels from the top of the map canvas.

bottom(number): Padding in pixels from the bottom of the map canvas.

left(number): Padding in pixels from the left of the map canvas.

right(number): Padding in pixels from the right of the map canvas.

Example

const bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
padding: {top: 10, bottom:25, left: 15, right: 5}
});

const bbox = [[-79, 43], [-73, 45]];
map.fitBounds(bbox, {
padding: 20
});

RequestParameters

A RequestParameters object to be returned from Map.options.transformRequest callbacks.

Properties

url(string): The URL to be requested.

headers(Object): The headers to be sent with the request.

method(string): Request method 'GET' | 'POST' | 'PUT' .

body(string): Request body.

type(string): Response body type to be returned 'string' | 'json' | 'arrayBuffer' .

credentials(string): 'same-origin'|'include' Use 'include' to send cookies with cross-origin requests.

collectResourceTiming(boolean): If true, Resource Timing API information will be collected for these transformed requests and returned in a resourceTiming property of relevant data events.

Example

// use transformRequest to modify requests that begin with `http://myHost`
transformRequest: function(url, resourceType) {
if (resourceType === 'Source' && url.indexOf('http://myHost') > -1) {
return {
url: url.replace('http', 'https'),
headers: { 'my-custom-header': true },
credentials: 'include'  // Include cookies for cross-origin requests
}
}
}

StyleImageInterface

Interface for dynamically generated style images. This is a specification for implementers to model: it is not an exported method or class.

Images implementing this interface can be redrawn for every frame. They can be used to animate icons and patterns or make them respond to user input. Style images can implement a StyleImageInterface#render method. The method is called every frame and can be used to update the image.

Properties

width(number)

height(number)

data((Uint8Array | Uint8ClampedArray))

Example

const flashingSquare = {
width: 64,
height: 64,
data: new Uint8Array(64 * 64 * 4),
 
onAdd: function(map) {
this.map = map;
},
 
render: function() {
// keep repainting while the icon is on the map
this.map.triggerRepaint();
 
// alternate between black and white based on the time
var value = Math.round(Date.now() / 1000) % 2 === 0  ? 255 : 0;
 
// check if image needs to be changed
if (value !== this.previousValue) {
this.previousValue = value;
 
var bytesPerPixel = 4;
for (var x = 0; x < this.width; x++) {
for (var y = 0; y < this.height; y++) {
var offset = (y * this.width + x) * bytesPerPixel;
this.data[offset + 0] = value;
this.data[offset + 1] = value;
this.data[offset + 2] = value;
this.data[offset + 3] = 255;
}
}
 
// return true to indicate that the image changed
return true;
}
}
}
 
map.addImage('flashing_square', flashingSquare);

Instance Members

Add an animated icon to the map.

CustomLayerInterface

Interface for custom style layers. This is a specification for implementers to model: it is not an exported method or class.

Custom layers allow a user to render directly into the map's GL context using the map's camera. These layers can be added between any regular layers using Map#addLayer.

Custom layers must have a unique id and must have the type of "custom". They must implement render and may implement prerender, onAdd and onRemove. They can trigger rendering using Map#triggerRepaint and they should appropriately handle Map.event:webglcontextlost and Map.event:webglcontextrestored.

The renderingMode property controls whether the layer is treated as a "2d" or "3d" map layer. Use:

"renderingMode": "3d" to use the depth buffer and share it with other layers
"renderingMode": "2d" to add a layer with no depth. If you need to use the depth buffer for a "2d" layer you must use an offscreen framebuffer and CustomLayerInterface#prerender

Properties

id(string): A unique layer id.

type(string): The layer's type. Must be "custom" .

renderingMode(string): Either "2d" or "3d" . Defaults to "2d" .

Example

// Custom layer implemented as ES6 class
class NullIslandLayer {
constructor() {
this.id = 'null-island';
this.type = 'custom';
this.renderingMode = '2d';
}
 
onAdd(map, gl) {
const vertexSource = `
uniform mat4 u_matrix;
void main() {
gl_Position = u_matrix * vec4(0.5, 0.5, 0.0, 1.0);
gl_PointSize = 20.0;
}`;
 
const fragmentSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}`;
 
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentSource);
gl.compileShader(fragmentShader);
 
this.program = gl.createProgram();
gl.attachShader(this.program, vertexShader);
gl.attachShader(this.program, fragmentShader);
gl.linkProgram(this.program);
}
 
render(gl, matrix) {
gl.useProgram(this.program);
gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
gl.drawArrays(gl.POINTS, 0, 1);
}
}
 
map.on('load', function() {
map.addLayer(new NullIslandLayer());
});

Instance Members

prewarm

Initializes resources like WebWorkers that can be shared across maps to lower load times in some situations. nmapsgl.workerUrl and nmapsgl.workerCount, if being used, must be set before prewarm() is called to have an effect.

By default, the lifecycle of these resources is managed automatically, and they are lazily initialized when a Map is first created. By invoking prewarm(), these resources will be created ahead of time, and will not be cleared when the last Map is removed from the page. This allows them to be re-used by new Map instances that are created later. They can be manually cleared by calling nmapsgl.clearPrewarmedResources(). This is only necessary if your web page remains active but stops using maps altogether.

This is primarily useful when using GL-JS maps in a single page app, wherein a user would navigate between various views that can cause Map instances to constantly be created and destroyed.

Example

nmapsgl.prewarm()

clearPrewarmedResources

Clears up resources that have previously been created by nmapsgl.prewarm(). Note that this is typically not necessary. You should only call this function if you expect the user of your app to not return to a Map view at any point in your application.

Example

nmapsgl.clearPrewarmedResources()

Sources

Sources state which data the map should display. Specify the type of source with the "type" property, which must be one of vector, raster, raster-dem, geojson, image, video. Adding a source isn't enough to make data appear on the map because sources don't contain styling details like color or width. Layers refer to a source and give it a visual representation. This makes it possible to style the same source in different ways, like differentiating between types of roads in a highways layer.

Vector

A vector tile source with the following format. All geometric coordinates in vector tiles must be between -1 * extent and (extent * 2) - 1 inclusive. All layers that use a vector source must specify a "source-layer" value.

"nmaps-streets": {
	"type": "vector",
	"url": "http://api.example.com/tilejson.json"
}

Parameters:

Name	Description
attribution `string?`	Contains an attribution to be displayed when the map is shown to a user.
bounds `Array[number]?` default: `[-180, -85.051129, 180, 85.051129]`	An array containing the longitude and latitude of the southwest and northeast corners of the source's bounding box in the following order: `[sw.lng, sw.lat, ne.lng, ne.lat]`. When this property is included in a source, no tiles outside of the given bounds are requested.
maxzoom `number?` default: `22`	Maximum zoom level for which tiles are available, as in the TileJSON spec. Data from tiles at the maxzoom are used when displaying the map at higher zoom levels.
minzoom `number?` default: `0`	Minimum zoom level for which tiles are available, as in the TileJSON spec.
promoteId `promoteId?`	A property to use as a feature id (for feature state). Either a property name, or an object of the form `{<sourceLayer>: <propertyName>}`. If specified as a string for a vector tile source, the same property is used across all its source layers.
scheme `enum?` default: `xyz`	Influences the y direction of the tile coordinates. The global-mercator (aka Spherical Mercator) profile is assumed. The possible values are: `"xyz"`: Slippy map tilenames scheme. `"tms"`: OSGeo spec scheme.
tiles `Array[string]?`	An array of one or more tile source URLs, as in the TileJSON spec.
url `string?`	A URL to a TileJSON resource. Supported protocols are `http:` and `https:`.

Raster

A raster tile source. Source similiar to vector tile.

"nmaps-satellite": {
	"type": "raster",
	"url": "http://api.example.com/raster/satellite",
"tileSize": 256
}

Parameters:

Name	Description
attribution `string?`	Contains an attribution to be displayed when the map is shown to a user.
bounds `Array[number]?` default: `[-180, -85.051129, 180, 85.051129]`	An array containing the longitude and latitude of the southwest and northeast corners of the source's bounding box in the following order: `[sw.lng, sw.lat, ne.lng, ne.lat]`. When this property is included in a source, no tiles outside of the given bounds are requested.
maxzoom `number?` default: `22`	Maximum zoom level for which tiles are available, as in the TileJSON spec. Data from tiles at the maxzoom are used when displaying the map at higher zoom levels.
minzoom `number?` default: `0`	Minimum zoom level for which tiles are available, as in the TileJSON spec.
scheme `enum?` default: `xyz`	Influences the y direction of the tile coordinates. The global-mercator (aka Spherical Mercator) profile is assumed. The possible values are: `"xyz"`: Slippy map tilenames scheme. `"tms"`: OSGeo spec scheme.
tileSize `number?` default: `512`	The minimum visual size to display tiles for this layer. Only configurable for raster layers. Units in pixels.
tiles `Array[string]?`	An array of one or more tile source URLs, as in the TileJSON spec.
url `string?`	A URL to a TileJSON resource. Supported protocols are `http:` and `https:`.

GeoJSON

A GeoJSON source. Data must be provided via a "data" property, whose value can be a URL or inline GeoJSON.

"geojson-marker": {
	"type": "geojson",
	"data": {
			"type": "Feature",
			"geometry": {
				"type": "Point",
				"coordinates": [-77.0323, 38.9131]
			},
			"properties": {
				"title": "NMaps DC",
				"marker-symbol": "monument"
			}
	}
}

Parameters:

Name	Description
attribution `string?`	Contains an attribution to be displayed when the map is shown to a user.
buffer `number?` default: `128`	Size of the tile buffer on each side. A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself. Larger values produce fewer rendering artifacts near tile edges and slower performance. Possible value between 0 and 512 inclusive.
cluster `boolean?` default: `false`	If the data is a collection of point features, setting this to true clusters the points by radius into groups. Cluster groups become new `Point` features in the source with additional properties: `cluster`: Is true if the point is a cluster; `cluster_id`: A unqiue id for the cluster to be used in conjunction with the cluster inspection methods; `point_count`: Number of original points grouped into this cluster; `point_count_abbreviated`: An abbreviated point count;
clusterMaxZoom `number?`	Max zoom on which to cluster points if clustering is enabled. Defaults to one zoom less than maxzoom (so that last zoom features are not clustered). Clusters are re-evaluated at integer zoom levels so setting clusterMaxZoom to 14 means the clusters will be displayed until z15.
clusterMinPoints `number?` default: `2`	Minimum number of points necessary to form a cluster if clustering is enabled.
clusterProperties `Object?`	An object defining custom properties on the generated clusters if clustering is enabled, aggregating values from clustered points. Has the form `{"property_name": [operator, map_expression]}`. `operator` is any expression function that accepts at least 2 operands (e.g. `"+"` or `"max"`) — it accumulates the property value from clusters/points the cluster contains; map_expression produces the value of a single point. Example: `{"sum": ["+", ["get", "scalerank"]]}`. For more advanced use cases, in place of operator, you can use a custom reduce expression that references a special `["accumulated"]` value, e.g.: `{"sum": [["+", ["accumulated"], ["get", "sum"]], ["get", "scalerank"]]}`
clusterRadius `number?` default: `50`	Radius of each cluster if clustering is enabled. A value of 512 indicates a radius equal to the width of a tile. Allow any value between 0 and 512.
data `any`	A URL to a GeoJSON file or inline GeoJSON.
filter `any`	An expression for filtering features prior to processing them for rendering.
generateId `boolean?` default: `false`	Whether to generate ids for the geojson features. When enabled, the `feature.id` property will be auto assigned based on its index in the `features` array, over-writing any previous values.
lineMetrics `boolean?` default: `false`	Whether to calculate line distance metrics. This is required for line layers that specify `line-gradient` values.
maxzoom `number?` default: `18`	Maximum zoom level at which to create vector tiles (higher means greater detail at high zoom levels).
promoteId `promoteId?`	A property to use as a feature id (for feature state). Either a property name, or an object of the form `{: }`.
tolerance `number?` default: `0.375`	Douglas-Peucker simplification tolerance (higher means simpler geometries and faster performance).

Image

An image source. The "url" value contains the image location.

The "coordinates" array contains [longitude, latitude] pairs for the image corners listed in clockwise order: top left, top right, bottom right, bottom left.

"image": {
	"type": "image",
	"url": "https://nmaps-gl.ndrive.com/nmaps-gl-js/assets/radar.gif",
	"coordinates": [
		[-80.425, 46.437],
		[-71.516, 46.437],
		[-71.516, 37.936],
		[-80.425, 37.936]
	]
}

Parameters:

Name	Description
coordinates `Array[number]?`	Corners of image specified in longitude, latitude pairs.
url `string?`	URL that points to an image.

Video

A video source. The "urls" value is an array. For each URL in the array, a video element source will be created. To support the video across browsers, supply URLs in multiple formats.

The "coordinates" array contains [longitude, latitude] pairs for the video corners listed in clockwise order: top left, top right, bottom right, bottom left.

"video": {
	"type": "video",
	"urls": [
		"https://static-assets.api.example.com/nmaps-gl-js/drone.mp4",
		"https://static-assets.api.example.com/nmaps-gl-js/drone.webm"
	],
	"coordinates": [
		[-122.51596391201019, 37.56238816766053],
		[-122.51467645168304, 37.56410183312965],
		[-122.51309394836426, 37.563391708549425],
		[-122.51423120498657, 37.56161849366671]
	]
}

Parameters:

Name	Description
coordinates `Array[number]?`	Corners of video specified in longitude, latitude pairs.
url `string?`	URLs to video content in order of preferred format.

Layers

A style's layers property lists all the layers available in that style. The type of layer is specified by the "type" property, and must be one of background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade.

Except for layers of the background type, each layer needs to refer to a source. Layers take the data that they get from a source, optionally filter features, and then define how those features are styled.

"layers": [
	{
		"id": "water",
		"source": "nmaps-streets",
		"source-layer": "water",
		"type": "fill",
		"paint": {
			"fill-color": "#00ffff"
		}
	}
]

Layers have two sub-properties that determine how data from that layer is rendered: layout and paint properties.

Layout properties appear in the layer's "layout" object. They are applied early in the rendering process and define how data for that layer is passed to the GPU. Changes to a layout property require an asynchronous "layout" step.

Paint properties are applied later in the rendering process. Paint properties appear in the layer's "paint" object. Changes to a paint property are cheap and happen synchronously.

Parameters:

Name	Description
filter `expression?`	A expression specifying conditions on source features. Only features that match the filter are displayed. Zoom expressions in filters are only evaluated at integer zoom levels. The `feature-state` expression is not supported in filter expressions.
id `string?`	Unique layer name.
layout `layout?`	Layout properties for the layer.
maxzoom `number?`	The maximum zoom level for the layer. At zoom levels equal to or greater than the maxzoom, the layer will be hidden. `maxzoom` should be between 0 and 24 inclusive.
metadata `Object?`	Arbitrary properties useful to track with the layer, but do not influence rendering. Properties should be prefixed to avoid collisions, like 'nmaps:'.
minzoom `number?`	The minimum zoom level for the layer. At zoom levels less than the minzoom, the layer will be hidden.`minzoom` should be between 0 and 24 inclusive.
paint `paint?`	Default paint properties for this layer.
source `string?`	Name of a source description to be used for this layer. Required for all layer types except background.
source-layer `string?`	Layer to use from a vector tile source. Required for vector tile sources; prohibited for all other source types, including GeoJSON sources.
type `enum?`	Renders the layer according to its type, which must be one of the following: `"fill"`: A filled polygon with an optional stroked border. `"line"`: A stroked line. `"symbol"`: An icon or a text label. `"circle"`: A filled circle. `"heatmap"`: A heatmap. `"fill-extrusion"`: An extruded (3D) polygon. `"raster"`: Raster map textures such as satellite imagery. `"background"`: The background color or pattern of the map.

Background

The background style layer covers the entire map. Use a background style layer to configure a color or pattern to show below all other map content. If the background layer is transparent or omitted from the style, any part of the map view that does not show another style layer is transparent.

Parameters:

Name	Description
background-color `color?` default: `#000000`	The color with which the background will be drawn. Disabled by `background-pattern`.
background-opacity `number?` default: `1`	The opacity at which the background will be drawn. Opacity should be a number between 0 and 1 inclusive.
background-pattern `paint?`	Name of image in sprite to use for drawing an image background. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.
visibility `enum?` default: `visible`	Whether this layer is displayed. The valid values are: `"visible"`: The layer is shown. `"none"`: The layer is not shown.

Fill

A fill style layer renders one or more filled (and optionally stroked) polygons on a map. You can use a fill layer to configure the visual appearance of polygon or multipolygon features.

Parameters:

Name	Description
fill-antialias `boolean?` default: `true`	Whether or not the fill should be antialiased.
fill-color `color?` default: `#000000`	The color of the filled part of this layer. This color can be specified as rgba with an alpha component and the color's opacity will not affect the opacity of the 1px stroke, if it is used. Disabled by fill-pattern.
fill-opacity `number?` default: `1`	The opacity of the entire fill layer. In contrast to the fill-color, this value will also affect the 1px stroke around the fill, if the stroke is used. Opacity should a number between 0 and 1 inclusive.
fill-outline-color `color?`	The outline color of the fill. Matches the value of fill-color if unspecified. Disabled by fill-pattern.
fill-pattern `resolvedImage?`	Name of image in sprite to use for drawing image fills. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.
fill-sort-key `number?`	Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
fill-translate `Array[number]?` default: `[0,0]`	The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively. Units in pixels.
fill-translate-anchor `enum?` default: `map`	Controls the frame of reference for fill-translate. The valid values are: `"map"`:The fill is translated relative to the map. `"viewport"`:The fill is translated relative to the viewport.
visibility `enum?` default: `visible`	Whether this layer is displayed. The valid values are: `"visible"`: The layer is shown. `"none"`: The layer is not shown.

Line

A line style layer renders one or more stroked polylines on the map. You can use a line layer to configure the visual appearance of polyline or multipolyline features.

Parameters:

Name	Description
line-blur `number?` default: `0`	Blur applied to the line, in pixels. Blur should be a number greater than or equal to 0. Units in pixels.
line-cap `enum?` default: `butt`	The display of line endings. The valid values are: `"butt"`: A cap with a squared-off end which is drawn to the exact endpoint of the line. `"round"`: A cap with a rounded end which is drawn beyond the endpoint of the line at a radius of one-half of the line's width and centered on the endpoint of the line. `"square"`: A cap with a squared-off end which is drawn beyond the endpoint of the line at a distance of one-half of the line's width.
line-color `color?` default: `#000000`	The color with which the line will be drawn. Disabled by line-pattern.
line-dasharray `Array[number]?`	Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. Note that GeoJSON sources with lineMetrics: true specified won't render dashed lines to the expected scale. Also note that zoom-dependent expressions will be evaluated only at integer zoom levels. Disabled by fill-pattern. Units in line widths.
line-gap-width `resolvedImage?` default: `0`	Draws a line casing outside of a line's actual path. Value indicates the width of the inner gap. Units in pixels.
line-gradient `color?`	Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify "lineMetrics": true. Requires source to be "geojson". Disabled by line-dasharray and line-pattern.
line-join `enum?` default: `miter`	The display of lines when joining. The valid values are: `"bevel"`:A join with a squared-off end which is drawn beyond the endpoint of the line at a distance of one-half of the line's width. `"round"`:A join with a rounded end which is drawn beyond the endpoint of the line at a radius of one-half of the line's width and centered on the endpoint of the line. `"miter"`:A join with a sharp, angled corner which is drawn with the outer sides beyond the endpoint of the path until they meet.
line-miter-limit `number?` default: `2`	Used to automatically convert miter joins to bevel joins for sharp angles. Requires line-join to be "miter".
line-offset `number?` default: `0`	The line's offset. For linear features, a positive value offsets the line to the right, relative to the direction of the line, and a negative value to the left. For polygon features, a positive value results in an inset, and a negative value results in an outset. Units in pixels.
line-opacity `number?` default: `1`	The opacity at which the line will be drawn. Opacity should be a number between 0 and 1 inclusive.
line-pattern `resolvedImage?`	Name of image in sprite to use for drawing image lines. For seamless patterns, image width must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.
line-round-limit `number?` default: `1.05`	Used to automatically convert round joins to miter joins for shallow angles. Requires line-join to be "round".
line-sort-key `number?`	Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
line-translate `Array[number]?` default: `[0,0]`	The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively. Units in pixels.
line-translate-anchor `enum?` default: `map`	Controls the frame of reference for line-translate. The valid values are: `"map"`:The line is translated relative to the map. `"viewport"`:The line is translated relative to the viewport.
line-width `number?` default: `1`	Stroke thickness. Units in pixels.
visibility `enum?` default: `visible`	Whether this layer is displayed. The valid values are: `"visible"`: The layer is shown. `"none"`: The layer is not shown.

Symbol

A symbol style layer renders icon and text labels at points or along lines on a map. You can use a symbol layer to configure the visual appearance of labels for features in vector tiles.

Parameters:

Name	Description
icon-allow-overlap `boolean?` default: `false`	If true, the icon will be visible even if it collides with other previously drawn symbols.
icon-anchor `enum?` default: `center`	Part of the icon placed closest to the anchor. Possible values: "center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right".
icon-color `color?` default: `#000000`	The color of the icon. This can only be used with sdf icons.
icon-halo-width `number?` default: `0`	Distance of halo to the icon outline. Units in pixels.
icon-ignore-placement `boolean?` default: `false`	If true, other symbols can be visible even if they collide with the icon.
icon-image `resolvedImage?`	Name of image in sprite to use for drawing an image background.
icon-keep-upright `boolean?` default: `false`	If true, the icon may be flipped to prevent it from being rendered upside-down. Requires "icon-rotation-alignment" to be "map" and "symbol-placement" to be "line", or "line-center".
icon-offset `Array[number]?` default: `[0,0]`	Offset distance of icon from its anchor. Positive values indicate right and down, while negative values indicate left and up. Each component is multiplied by the value of icon-size to obtain the final offset in pixels. When combined with icon-rotate the offset will be as if the rotated direction was up.
icon-opacity `number?` default: `1`	The opacity at which the icon will be drawn. Opacity should be a number between 0 and 1 inclusive.
icon-optional `boolean?` default: `false`	If true, text will display without their corresponding icons when the icon collides with other symbols and the text does not.
icon-padding `number?` default: `2`	Size of the additional area around the icon bounding box used for detecting symbol collisions.
icon-pitch-alignment `enum?` default: `auto`	Orientation of icon when map is pitched. Possible values are: `"map"`: The icon is aligned to the plane of the map. `"viewport"`: The icon is aligned to the plane of the viewport. `"auto"`: Automatically matches the value of `icon-rotation-alignment`.
icon-rotate `number?` default: `0`	Rotates the icon clockwise.
icon-rotation-alignment `enum?` default: `auto`	In combination with symbol-placement, determines the rotation behavior of icons. Possible values are: "map", "viewport" and "auto".
icon-size `number?` default: `1`	Scales the original size of the icon by the provided factor. The new pixel size of the image will be the original pixel size multiplied by `icon-size`. 1 is the original size; 3 triples the size of the image.
icon-text-fit `enum?` default: `none`	Scales the icon to fit around the associated text. Possible values: `"none"`, `"width"`, `"height"`, `"both"`.
icon-text-fit-padding `Array[number]?` default: `[0,0,0,0]`	Size of the additional area added to dimensions determined by `icon-text-fit`, in clockwise order: top, right, bottom, left.
icon-translate `Array[number]?` default: `[0,0]`	Distance that the icon's anchor is moved from its original placement. Positive values indicate right and down, while negative values indicate left and up.
icon-translate-anchor `Array[number]?` default: `[0,0]`	Controls the frame of reference for icon-translate. The valid values are: `"map"`: Icons are translated relative to the map. `"viewport"`: Icons are translated relative to the viewport.
symbol-avoid-edges `boolean?` default: `false`	If true, the symbols will not cross tile edges to avoid mutual collisions. Recommended in layers that don't have enough padding in the vector tile to prevent collisions, or if it is a point symbol layer placed after a line symbol layer.
symbol-placement `enum?` default: `point`	Label placement relative to its geometry. `"point"`: The label is placed at the point where the geometry is located. `"line"`: The label is placed along the line of the geometry. Can only be used on `LineString` and `Polygon` geometries. `"line-center"`: The label is placed at the center of the line of the geometry. Can only be used on `LineString` and `Polygon` geometries. Note that a single feature in a vector tile may contain multiple line geometries.
symbol-sort-key `number?`	Sorts features in ascending order based on this value. Features with lower sort keys are drawn and placed first. When `icon-allow-overlap` or `text-allow-overlap` is `false`, features with a lower sort key will have priority during placement. When `icon-allow-overlap` or `text-allow-overlap` is set to true, features with a higher sort key will overlap over features with a lower sort key.
symbol-spacing `number?` default: `250`	Distance between two symbol anchors in pixels (number greater than or equal to 1). Requires `symbol-placement` to be "line".
symbol-z-order `enum?` default: `auto`	Determines whether overlapping symbols in the same layer are rendered in the order that they appear in the data source or by their y-position relative to the viewport. To control the order and prioritization of symbols otherwise, use `symbol-sort-key`.Possible values are: `"auto"`: Sorts symbols by symbol-sort-key if set. Otherwise, sorts symbols by their y-position relative to the viewport if icon-allow-overlap or text-allow-overlap is set to true or icon-ignore-placement or text-ignore-placement is false. `"viewport-y"`: Sorts symbols by their y-position relative to the viewport if icon-allow-overlap or text-allow-overlap is set to true or icon-ignore-placement or text-ignore-placement is false. `"source"`: Sorts symbols by symbol-sort-key if set. Otherwise, no sorting is applied; symbols are rendered in the same order as the source data.
text-allow-overlap `boolean?` default: `false`	If true, the text will be visible even if it collides with other previously drawn symbols.
text-anchor `enum?` default: `center`	Part of the text placed closest to the anchor. Disabled by `text-variable-anchor`. Possible values are: "center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right".
text-color `color?` default: `#000000`	The color with which the text will be drawn.
text-field `formatted?` default: `""`	Value to use for a text label. If a plain `string` is provided, it will be treated as a `formatted` with default/inherited formatting options.
text-font `Array[string]?` default: `["Open Sans Regular","Arial Unicode MS Regular"]`	Font stack to use for displaying text.
text-halo-blur `number?` default: `0`	The halo's fadeout distance towards the outside. Units in pixels.
text-halo-color `color?` default: `rgba(0, 0, 0, 0)`	The color of the text's halo, which helps it stand out from backgrounds.
text-halo-width `number?` default: `0`	Distance of halo to the font outline. Max text halo width is 1/4 of the font-size. Units in pixels. Requires text-field.
text-ignore-placement `boolean?` default: `false`	If true, other symbols can be visible even if they collide with the text.
text-justify `enum?` default: `center`	Text justification options: "auto", "left", "center" and "right".
text-keep-upright `boolean?` default: `true`	If true, the text may be flipped vertically to prevent it from being rendered upside-down. Requires `text-rotation-alignment` to be "map" and `symbol-placement` to be "line" or "line-center".
text-max-angle `number?` default: `45`	Maximum angle change between adjacent characters. Units in degrees. Requires `text-field` and `symbol-placement` to be "line" or "line-center".
text-max-width `number?` default: `10`	The maximum line width for text wrapping. Units in ems. Requires text-field.
text-offset `Array[number]?` default: `[0,0]`	Offset distance of text from its anchor. Positive values indicate right and down, while negative values indicate left and up. If used with text-variable-anchor, input values will be taken as absolute values. Offsets along the x- and y-axis will be applied automatically based on the anchor position.
text-opacity `number?` default: `1`	The opacity at which the text will be drawn. Opacity should be a number between 0 and 1 inclusive.
text-optional `boolean?` default: `false`	If true, icons will display without their corresponding text when the text collides with other symbols and the icon does not.
text-padding `number?` default: `2`	Size of the additional area around the text bounding box used for detecting symbol collisions. Units in pixels.
text-pitch-alignment `enum?` default: `auto`	Orientation of text when map is pitched. Possible values are: `"map"`: The text is aligned to the plane of the map. `"viewport"`: The text is aligned to the plane of the viewport. `"auto"`: Automatically matches the value of `text-rotation-alignment`.
text-radial-offset `number?` default: `0`	Radial offset of text, in the direction of the symbol's anchor. Useful in combination with `text-variable-anchor`, which defaults to using the two-dimensional text-offset if present. Units in ems.
text-rotate `number?` default: `0`	Rotates the text clockwise. Units in degrees.
text-rotation-alignment `enum?` default: `auto`	In combination with symbol-placement, determines the rotation behavior of the individual glyphs forming the text. Possible values are: "map", "viewport" and "auto".
text-size `number?` default: `0`	Font size. Units in pixels.
text-transform `enum?` default: `none`	Specifies how to capitalize text, similar to the CSS text-transform property. Possible values are: `"none"`: The text is not altered. `"uppercase"`: Forces all letters to be displayed in uppercase. `"lowercase"`: Forces all letters to be displayed in lowercase.
text-translate `Array[number]?` default: `[0,0]`	Distance that the text's anchor is moved from its original placement. Positive values indicate right and down, while negative values indicate left and up.
text-translate-anchor `enum?` default: `map`	Controls the frame of reference for `text-translate`. The valid values are: `"map"`:The text is translated relative to the map. `"viewport"`:The text is translated relative to the viewport.
text-variable-anchor `Array[enum]?`	To increase the chance of placing high-priority labels on the map, you can provide an array of `text-anchor` locations: the renderer will attempt to place the label at each location, in order, before moving onto the next label. Use `text-justify`: auto to choose justification based on anchor position. To apply an offset, use the `text-radial-offset` or the two-dimensional `text-offset`. Possible values are: "center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right".
text-writing-mode `Array[enum]?`	The property allows control over a symbol's orientation. Note that the property values act as a hint, so that a symbol whose language doesn’t support the provided orientation will be laid out in its natural orientation. Example: English point symbol will be rendered horizontally even if array value contains single 'vertical' enum value. The order of elements in an array define priority order for the placement of an orientation variant. Possible values are: "horizontal" and "vertical".
visibility `enum?` default: `visible`	Whether this layer is displayed. The valid values are: `"visible"`: The layer is shown. `"none"`: The layer is not shown.

Raster

A raster style layer renders raster tiles on a map. You can use a raster layer to configure the color parameters of raster tiles.

Parameters:

Name	Description
raster-brightness-max `number?` default: `1`	Increase or reduce the brightness of the image. The value is the maximum brightness. Brightness should be a number between 0 and 1.
raster-brightness-min `number?` default: `0`	Increase or reduce the brightness of the image. The value is the minimum brightness. Brightness should be a number between 0 and 1.
raster-contrast `number?` default: `0`	Increase or reduce the contrast of the image. Constrast should be a number between -1 and 1 inclusive.
raster-fade-duration `number?` default: `300`	Fade duration when a new tile is added. Units in milliseconds.
raster-hue-rotate `number?` default: `0`	Rotates hues around the color wheel. Units in degrees.
raster-opacity `number?` default: `1`	The opacity at which the image will be drawn. Opacity should be a number between 0 and 1 inclusive.
raster-resampling `enum?` default: `linear`	The resampling/interpolation method to use for overscaling, also known as texture magnification filter. `"linear"`: (Bi)linear filtering interpolates pixel values using the weighted average of the four closest original source pixels creating a smooth but blurry look when overscaled. li>`"nearest"`: Nearest neighbor filtering interpolates pixel values using the nearest original source pixel creating a sharp but pixelated look when overscaled.
raster-saturation `number?` default: `0`	Increase or reduce the saturation of the image. Saturation should be a number between -1 and 1.
visibility `enum?` default: `visible`	Whether this layer is displayed. The valid values are: `"visible"`: The layer is shown. `"none"`: The layer is not shown.

Circle

A circle style layer renders one or more filled circles on a map. You can use a circle layer to configure the visual appearance of point or point collection features in vector tiles. A circle layer renders circles whose radii are measured in screen units.

Parameters:

Name	Description
circle-blur `number?` default: `0`	Amount to blur the circle. 1 blurs the circle such that only the centerpoint is full opacity.
circle-color `color?` default: `#000000`	The fill color of the circle.
circle-opacity `number?` default: `0`	The opacity at which the circle will be drawn. Opacity should be a number between 0 and 1 inclusive.
circle-pitch-alignment `enum?` default: `viewport`	Orientation of circle when map is pitched.The valid values are: `"map"`:The circle is aligned relative to the map. `"viewport"`:The circle is aligned relative to the viewport.
circle-pitch-scale `enum?` default: `map`	Controls the scaling behavior of the circle when the map is pitched. The valid values are: `"map"`: Circles are scaled according to their apparent distance to the camera. `"viewport"`: Circles are not scaled.
circle-radius `number?` default: `5`	Circle radius. Units in pixels.
circle-sort-key `number?`	Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
circle-stroke-color `color?` default: `#000000`	The stroke color of the circle.
circle-stroke-opacity `number?` default: `1`	The opacity of the circle's stroke. Opacity should be a number between 0 and 1 inclusive.
circle-stroke-width `number?` default: `0`	The width of the circle's stroke. Strokes are placed outside of the `circle-radius`. Units in pixels.
circle-translate `Array[number]?` default: `[0,0]`	The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively. Units in pixels.
circle-translate-anchor `enum?` default: `map`	Controls the frame of reference for circle-translate. The valid values are: `"map"`: The circle is translated relative to the map. `"viewport"`: The circle is translated relative to the viewport.
visibility `enum?` default: `visible`	Whether this layer is displayed. The valid values are: `"visible"`: The layer is shown. `"none"`: The layer is not shown.

Fill-Extrusion

A fill-extrusion style layer renders one or more filled (and optionally stroked) extruded (3D) polygons on a map. You can use a fill-extrusion layer to configure the extrusion and visual appearance of polygon or multipolygon features.

Parameters:

Name	Description
fill-extrusion-base `number?` default: `0`	The height with which to extrude the base of this layer. Must be less than or equal to `fill-extrusion-height`. Units in meters.
fill-extrusion-color `color?` default: `#000000`	The base color of the extruded fill. The extrusion's surfaces will be shaded differently based on this color in combination with the root light settings. If this color is specified as rgba with an alpha component, the alpha component will be ignored; use fill-extrusion-opacity to set layer opacity.
fill-extrusion-height `number?` default: `0`	The height with which to extrude this layer. Units in meters.
fill-extrusion-opacity `number?` default: `1`	The opacity of the entire fill extrusion layer. This is rendered on a per-layer, not per-feature, basis, and data-driven styling is not available. Opacity should be a number between 0 and 1 inclusive.
fill-extrusion-pattern `resolvedImage?`	Name of image in sprite to use for drawing images on extruded fills. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.
fill-extrusion-translate `Array[number]?` default: `[0,0]`	The geometry's offset. Values are [x, y] where negatives indicate left and up (on the flat plane), respectively. Units in pixels.
fill-extrusion-translate-anchor `enum?` default: `map`	Controls the frame of reference for `fill-extrusion-translate`. The valid values are: `"map"`: The fill extrusion is translated relative to the map. `"viewport"`: The fill extrusion is translated relative to the viewport.
fill-extrusion-vertical-gradient `boolean?` default: `true`	Whether to apply a vertical gradient to the sides of a fill-extrusion layer. If true, sides will be shaded slightly darker farther down.
visibility `enum?` default: `visible`	Whether this layer is displayed. The valid values are: `"visible"`: The layer is shown. `"none"`: The layer is not shown.

Heatmap

A heatmap style layer renders a range of colors to represent the density of points in an area.

Parameters:

Name	Description
heatmap-color `color?`	Defines the color of each pixel based on its density value in a heatmap. Should be an expression that uses `["heatmap-density"]` as input. Default: `["interpolate", ["linear"], ["heatmap-density"], 0, "rgba(0, 0, 255, 0)", 0.1, "royalblue", 0.3, "cyan", 0.5, "lime", 0.7, "yellow", 1, "red"]`
heatmap-intensity `number?` default: `1`	Similar to `heatmap-weight` but controls the intensity of the heatmap globally. Primarily used for adjusting the heatmap based on zoom level.
heatmap-opacity `number?` default: `1`	The global opacity at which the heatmap layer will be drawn. Opacity should be a number between 0 and 1 inclusive.
heatmap-radius `number?` default: `30`	Radius of influence of one heatmap point in pixels. Increasing the value makes the heatmap smoother, but less detailed. Units in pixels.
heatmap-weight `number?` default: `1`	A measure of how much an individual point contributes to the heatmap. A value of 10 would be equivalent to having 10 points of weight 1 in the same spot. Especially useful when combined with clustering.
visibility `enum?` default: `visible`	Whether this layer is displayed. The valid values are: `"visible"`: The layer is shown. `"none"`: The layer is not shown.