Mapbox Style Specification (TOML)
A Mapbox style is a document that defines the visual appearance of a map: what data to draw, the order to draw it in, and how to style the data when drawing it. A Mapbox style document is a JSON object with specific root level and nested properties. This specification translates the original JSON style description to TOML.
Root Properties
Root level properties of a Mapbox style specify the map's layers, tile sources and other resources, and default values for the initial camera position when not specified elsewhere.
version = 8
name = "Mapbox Streets"
sprite = "mapbox://sprites/mapbox/streets-v8"
glyphs = "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"
[[layers]]
#...
[sources]
#...Arbitrary properties useful to track with the stylesheet, but do not influence rendering. Properties should be prefixed to avoid collisions, like 'mapbox:'.
Default map center in longitude and latitude. The style center will be used only if the map has not been positioned by other means (e.g. map options or user interaction).
center = [-73.9749, 40.7736]Default zoom level. The style zoom will be used only if the map has not been positioned by other means (e.g. map options or user interaction).
zoom = 12.5Default bearing, in degrees clockwise from true north. The style bearing will be used only if the map has not been positioned by other means (e.g. map options or user interaction).
bearing = 29Default pitch, in degrees. Zero is perpendicular to the surface, for a look straight down at the map, while a greater value like 60 looks ahead towards the horizon. The style pitch will be used only if the map has not been positioned by other means (e.g. map options or user interaction).
pitch = 50The global light source.
[light]
anchor = "viewport"
color = "white"
intensity = 0.4Data source specifications.
[sources.mapbox-streets]
type = "vector"
url = "mapbox://mapbox.mapbox-streets-v6"A base URL for retrieving the sprite image and metadata. The extensions .png, .json and scale factor @2x.png will be automatically appended. This property is required if any layer uses the background-pattern, fill-pattern, line-pattern, fill-extrusion-pattern, or icon-image properties.
sprite = "mapbox://sprites/mapbox/bright-v8"A URL template for loading signed-distance-field glyph sets in PBF format. The URL must include {fontstack} and {range} tokens. This property is required if any layer uses the text-field layout property.
glyphs = "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"A global transition definition to use as a default across properties.
[transition]
duration = 300
delay = 0Light
A style's light property provides global light source for that style.
[light]
anchor = "viewport"
color = "white"
intensity = 0.4Whether extruded geometries are lit relative to the map or viewport.
- map
The position of the light source is aligned to the rotation of the map.
- viewport
The position of the light source is aligned to the rotation of the viewport.
anchor = "map"Position of the light source relative to lit (extruded) geometries, in [r radial coordinate, a azimuthal angle, p polar angle] where r indicates the distance from the center of the base of an object to its light, a indicates the position of the light relative to 0° (0° when light.anchor is set to viewport corresponds to the top of the viewport, or 0° when light.anchor is set to map corresponds to due north, and degrees proceed clockwise), and p indicates the height of the light (from 0°, directly above, to 180°, directly below).
position = [1.5, 90, 80]Sources
Sources supply data to be shown on the map. The type of source is specified by the "type" property,
and must be one of vector, raster, geojson, image, video. Adding a source
won't immediately 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.
Tiled sources (vector and raster) must specify their details in terms of the TileJSON specification. This can be done in several ways:
-
By supplying TileJSON properties such as
"tiles","minzoom", and"maxzoom"directly in the source:[sources.mapbox-streets] type = "vector" tiles = ["http://a.example.com/tiles/{z}/{x}/{y}.pbf", "http://b.example.com/tiles/{z}/{x}/{y}.pbf"] maxzoom = 14 -
By providing a
"url"to a TileJSON resource:[sources.mapbox-streets] type = "vector" url = "http://api.example.com/tilejson.json" -
By providing a url to a WMS server that supports
EPSG:3857 (or EPSG:900913) as a source of tiled data.
The server url should contain a
"{bbox-epsg-3857}"replacement token to supply thebboxparameter. (This feature is currently supported only in Mapbox GL JS and Mapbox macOS SDK.)[sources.wms-imagery] type = "raster" tiles = ["http://a.example.com/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=example"] tileSize = 256
vector
A vector tile source. Tiles must be in Mapbox
Vector Tile 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.
For vector tiles hosted by Mapbox, the "url" value should be of the
form mapbox://mapid.
[sources.mapbox-streets]
type = "vector"
url = "mapbox://mapbox.mapbox-streets-v6"A URL to a TileJSON resource. Supported protocols are http:, https:, and mapbox://<mapid>.
Minimum zoom level for which tiles are available, as in the TileJSON spec.
| SDK Support | Mapbox GL JS | iOS SDK | Android SDK |
|---|---|---|---|
| basic functionality | >= 0.10.0 | >= 2.0.0 | >= 2.0.1 |
raster
A raster tile source. For raster tiles hosted by Mapbox, the "url" value should be of the
form mapbox://mapid.
[sources.mapbox-satellite]
type = "raster"
url = "mapbox://mapbox.satellite"
tileSize = 256A URL to a TileJSON resource. Supported protocols are http:, https:, and mapbox://<mapid>.
Minimum zoom level for which tiles are available, as in the TileJSON spec.
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.
| SDK Support | Mapbox GL JS | iOS SDK | Android SDK |
|---|---|---|---|
| basic functionality | >= 0.10.0 | >= 2.0.0 | >= 2.0.1 |
geojson
A GeoJSON source. Data must be provided via a "data"
property, whose value can be a URL or inline GeoJSON.
[sources.geojson-marker]
type = "geojson"
[sources.geojson-marker.data]
type = "Feature"
[sources.geojson-marker.data.geometry]
type = "Point"
coordinates = [-77.0323, 38.9131]
[sources.geojson-marker.data.properties]
title = "Mapbox DC"
marker-symbol = "monument"This example of a GeoJSON source refers to an external GeoJSON document via its URL. The GeoJSON document must be on the same domain or accessible using CORS.
[sources.geojson-lines]
type = "geojson"
data = "./lines.geojson"Maximum zoom level at which to create vector tiles (higher means greater detail at high zoom levels).
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.
Douglas-Peucker simplification tolerance (higher means simpler geometries and faster performance).
If the data is a collection of point features, setting this to true clusters the points by radius into groups.
Radius of each cluster if clustering is enabled. A value of 512 indicates a radius equal to the width of a tile.
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).
| SDK Requirements | Mapbox GL JS | iOS SDK | Android SDK |
|---|---|---|---|
| basic functionality | >= 0.10.0 | >= 2.0.0 | >= 2.0.1 |
| clustering | >= 0.14.0 | Not yet supported | >= 4.2.0 |
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.
[sources.image]
type = "image"
url = "/mapbox-gl-js/assets/radar.gif"
coordinates = [[-80.425, 46.437], [-71.516, 46.437], [-71.516, 37.936], [-80.425, 37.936]]| SDK Support | Mapbox GL JS | iOS SDK | Android SDK |
|---|---|---|---|
| basic functionality | >= 0.10.0 | Not yet supported | Not yet supported |
video
A video source. The "urls" value is an array. For each URL in the array,
a video element source will
be created, in order to support same media in multiple formats supported by different browsers.
The "coordinates" array contains [longitude, latitude] pairs for the video
corners listed in clockwise order: top left, top right, bottom right, bottom left.
[sources.video]
type = "video"
urls = ["https://www.mapbox.com/drone/video/drone.mp4", "https://www.mapbox.com/drone/video/drone.webm"]
coordinates = [[-122.51596391201019, 37.56238816766053], [-122.51467645168304, 37.56410183312965], [-122.51309394836426, 37.563391708549425], [-122.51423120498657, 37.56161849366671]]| SDK Support | Mapbox GL JS | iOS SDK | Android SDK |
|---|---|---|---|
| basic functionality | >= 0.10.0 | Not yet supported | Not yet supported |
Sprite
A style's sprite property supplies a URL template for loading small images to use in
rendering background-pattern, fill-pattern, line-pattern,
and icon-image style properties.
sprite = "mapbox://sprites/mapbox/bright-v8"A valid sprite source must supply two types of files:
-
An index file, which is a JSON document containing a description of each image contained in the sprite. The
content of this file must be a JSON object whose keys form identifiers to be used as the values of the above
style properties, and whose values are objects describing the dimensions (
widthandheightproperties) and pixel ratio (pixelRatio) of the image and its location within the sprite (xandy). For example, a sprite containing a single image might have the following index file contents:Then the style could refer to this sprite image by creating a symbol layer with the layout property{ "poi": { "width": 32, "height": 32, "x": 0, "y": 0, "pixelRatio": 1 } }"icon-image": "poi", or with the tokenized value"icon-image": "{icon}"and vector tile features with aiconproperty with the valuepoi. - Image files, which are PNG images containing the sprite data.
Mapbox SDKs will use the value of the sprite property in the style to generate the URLs for
loading both files. First, for both file types, it will append @2x to the URL on high-DPI devices.
Second, it will append a file extension: .json for the index file, and .png for the
image file. For example, if you specified "sprite": "https://example.com/sprite", renderers would
load https://example.com/sprite.json and https://example.com/sprite.png, or
https://example.com/sprite@2x.json and https://example.com/sprite@2x.png.
If you are using Mapbox Studio, you will use prebuilt sprites provided by Mapbox, or you can upload custom SVG images to build your own sprite. In either case, the sprite will be built automatically and supplied by Mapbox APIs. If you want to build a sprite by hand and self-host the files, you can use spritezero-cli, a command line utility that builds Mapbox GL compatible sprite PNGs and index files from a directory of SVGs.
Glyphs
A style's glyphs property provides a URL template for loading signed-distance-field glyph sets in PBF format.
glyphs = "mapbox://fonts/mapbox/{fontstack}/{range}.pbf"Transition
A style's transition property provides global transition defaults for that style.
[transition]
duration = 300
delay = 0Layers
A style's layers property lists all of 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.
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 = "mapbox-streets"
source-layer = "water"
type = "fill"
[layers.paint]
fill-color = "#00ffff"Rendering type of this layer.
- fill
A filled polygon with an optional stroked border.
- line
A stroked line.
- symbol
An icon or a text label.
- circle
A filled circle.
- fill-extrusion
An extruded (3D) polygon.
- raster
Raster map textures such as satellite imagery.
- background
The background color or pattern of the map.
Arbitrary properties useful to track with the layer, but do not influence rendering. Properties should be prefixed to avoid collisions, like 'mapbox:'.
References another layer to copy type, source, source-layer, minzoom, maxzoom, filter, and layout properties from. This allows the layers to share processing and be more efficient.
Layer to use from a vector tile source. Required if the source supports multiple layers.
A expression specifying conditions on source features. Only features that match the filter are displayed.
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. For efficiency, a layer can share layout properties with
another layer via the "ref" layer property, and should do so where possible. This will decrease
processing time and allow the two layers will share GPU memory and other resources associated with the layer.
Paint properties are applied later in the rendering process. A layer that shares layout properties with another
layer can have independent paint properties. Paint properties appear in the layer's "paint" object.
Key: supports interpolated functions supports piecewise constant functions transitionable
background
Layout Properties
Whether this layer is displayed.
- visible
The layer is shown.
- none
The layer is not shown.
Paint Properties
The color with which the background will be drawn.
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).
The opacity at which the background will be drawn.
fill
Layout Properties
Whether this layer is displayed.
- visible
The layer is shown.
- none
The layer is not shown.
Paint Properties
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.
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.
The outline color of the fill. Matches the value of fill-color if unspecified.
The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.
Controls the translation reference point.
- map
The fill is translated relative to the map.
- viewport
The fill is translated relative to the viewport.
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).
line
Layout Properties
The display of line endings.
- 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.
The display of lines when joining.
- 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.
Used to automatically convert miter joins to bevel joins for sharp angles.
Used to automatically convert round joins to miter joins for shallow angles.
Whether this layer is displayed.
- visible
The layer is shown.
- none
The layer is not shown.
Paint Properties
The color with which the line will be drawn.
The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.
Controls the translation reference point.
- map
The line is translated relative to the map.
- viewport
The line is translated relative to the viewport.
Draws a line casing outside of a line's actual path. Value indicates the width of the inner gap.
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.
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.
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).
symbol
Layout Properties
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
LineStringandPolygongeometries.
Distance between two symbol anchors.
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.
If true, the icon will be visible even if it collides with other previously drawn symbols.
If true, other symbols can be visible even if they collide with the icon.
If true, text will display without their corresponding icons when the icon collides with other symbols and the text does not.
In combination with symbol-placement, determines the rotation behavior of icons.
- map
When
symbol-placementis set topoint, aligns icons east-west. Whensymbol-placementis set toline, aligns icon x-axes with the line.- viewport
Produces icons whose x-axes are aligned with the x-axis of the viewport, regardless of the value of
symbol-placement.- auto
When
symbol-placementis set topoint, this is equivalent toviewport. Whensymbol-placementis set toline, this is equivalent tomap.
Scale factor for icon. 1 is original size, 3 triples the size.
Scales the icon to fit around the associated text.
- none
The icon is displayed at its intrinsic aspect ratio.
- width
The icon is scaled in the x-dimension to fit the width of the text.
- height
The icon is scaled in the y-dimension to fit the height of the text.
- both
The icon is scaled in both x- and y-dimensions.
Size of the additional area added to dimensions determined by icon-text-fit, in clockwise order: top, right, bottom, left.
A string with {tokens} replaced, referencing the data property to pull from.
Rotates the icon clockwise.
Size of the additional area around the icon bounding box used for detecting symbol collisions.
If true, the icon may be flipped to prevent it from being rendered upside-down.
Offset distance of icon from its anchor. Positive values indicate right and down, while negative values indicate left and up. When combined with icon-rotate the offset will be as if the rotated direction was up.
Orientation of text when map is pitched.
- 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.
In combination with symbol-placement, determines the rotation behavior of the individual glyphs forming the text.
- map
When
symbol-placementis set topoint, aligns text east-west. Whensymbol-placementis set toline, aligns text x-axes with the line.- viewport
Produces glyphs whose x-axes are aligned with the x-axis of the viewport, regardless of the value of
symbol-placement.- auto
When
symbol-placementis set topoint, this is equivalent toviewport. Whensymbol-placementis set toline, this is equivalent tomap.
Value to use for a text label. Feature properties are specified using tokens like {field_name}.
Font stack to use for displaying text.
The maximum line width for text wrapping.
Text leading value for multi-line text.
Text tracking amount.
Text justification options.
- left
The text is aligned to the left.
- center
The text is centered.
- right
The text is aligned to the right.
Part of the text placed closest to the anchor.
- center
The center of the text is placed closest to the anchor.
- left
The left side of the text is placed closest to the anchor.
- right
The right side of the text is placed closest to the anchor.
- top
The top of the text is placed closest to the anchor.
- bottom
The bottom of the text is placed closest to the anchor.
- top-left
The top left corner of the text is placed closest to the anchor.
- top-right
The top right corner of the text is placed closest to the anchor.
- bottom-left
The bottom left corner of the text is placed closest to the anchor.
- bottom-right
The bottom right corner of the text is placed closest to the anchor.
Maximum angle change between adjacent characters.
Rotates the text clockwise.
Size of the additional area around the text bounding box used for detecting symbol collisions.
If true, the text may be flipped vertically to prevent it from being rendered upside-down.
Specifies how to capitalize text, similar to the CSS text-transform property.
- none
The text is not altered.
- uppercase
Forces all letters to be displayed in uppercase.
- lowercase
Forces all letters to be displayed in lowercase.
Offset distance of text from its anchor. Positive values indicate right and down, while negative values indicate left and up.
If true, the text will be visible even if it collides with other previously drawn symbols.
If true, other symbols can be visible even if they collide with the text.
If true, icons will display without their corresponding text when the text collides with other symbols and the icon does not.
Whether this layer is displayed.
- visible
The layer is shown.
- none
The layer is not shown.
Paint Properties
The opacity at which the icon will be drawn.
The color of the icon. This can only be used with sdf icons.
The color of the icon's halo. Icon halos can only be used with SDF icons.
Distance of halo to the icon outline.
Fade out the halo towards the outside.
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.
Controls the translation reference point.
- map
Icons are translated relative to the map.
- viewport
Icons are translated relative to the viewport.
The opacity at which the text will be drawn.
The color with which the text will be drawn.
The color of the text's halo, which helps it stand out from backgrounds.
Distance of halo to the font outline. Max text halo width is 1/4 of the font-size.
The halo's fadeout distance towards the outside.
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.
Controls the translation reference point.
- map
The text is translated relative to the map.
- viewport
The text is translated relative to the viewport.
raster
Layout Properties
Whether this layer is displayed.
- visible
The layer is shown.
- none
The layer is not shown.
Paint Properties
Rotates hues around the color wheel.
Increase or reduce the brightness of the image. The value is the minimum brightness.
Increase or reduce the brightness of the image. The value is the maximum brightness.
Fade duration when a new tile is added.
circle
Layout Properties
Whether this layer is displayed.
- visible
The layer is shown.
- none
The layer is not shown.
Paint Properties
Amount to blur the circle. 1 blurs the circle such that only the centerpoint is full opacity.
The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.
Controls the translation reference point.
- map
The circle is translated relative to the map.
- viewport
The circle is translated relative to the viewport.
Controls the scaling behavior of the circle when the map is pitched.
- map
Circles are scaled according to their apparent distance to the camera.
- viewport
Circles are not scaled.
The width of the circle's stroke. Strokes are placed outside of the circle-radius.
fill-extrusion
Layout Properties
Whether this layer is displayed.
- visible
The layer is shown.
- none
The layer is not shown.
Paint Properties
The opacity of the entire fill extrusion layer. This is rendered on a per-layer, not per-feature, basis.
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.
The geometry's offset. Values are [x, y] where negatives indicate left and up (on the flat plane), respectively.
Controls the translation reference point.
- map
The fill extrusion is translated relative to the map.
- viewport
The fill extrusion is translated relative to the viewport.
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).
The height with which to extrude this layer.
The height with which to extrude the base of this layer. Must be less than or equal to fill-extrusion-height.
Types
A Mapbox style contains values of various types, most commonly as values for the style properties of a layer.
Color
Colors are written as JSON strings in a variety of permitted formats: HTML-style hex values, rgb, rgba, hsl, and hsla. Predefined HTML colors names, like yellow and blue, are also permitted.
line-color = "#ff0"
line-color = "#ffff00"
line-color = "rgb(255, 255, 0)"
line-color = "rgba(255, 255, 0, 1)"
line-color = "hsl(100, 50%, 50%)"
line-color = "hsla(100, 50%, 50%, 1)"
line-color = "yellow"Especially of note is the support for hsl, which can be easier to reason about than rgb().
String
A string is basically just text. In Mapbox styles, you're going to put it in quotes. Strings can be anything, though pay attention to the case of text-field - it actually will refer to features, which you refer to by putting them in curly braces, as seen in the example below.
text-field = "{MY_FIELD}"Number
A number value, often an integer or floating point (decimal number). Written without quotes.
text-size = 24Array
Arrays are comma-separated lists of one or more numbers in a specific order. For example, they're used in line dash arrays, in which the numbers specify intervals of line, break, and line again.
line-dasharray = [2, 4]Function
The value for any layout or paint property may be specified as a function. Functions allow you to make the appearance of a map feature change with the current zoom level and/or the feature's properties.
- identity
- functions return their input as their output.
- exponential
- functions generate an output by interpolating between stops just less than and just greater than the function input. The domain must be numeric. This is the default for numeric domain, range functions.
- interval
- functions return the output value of the stop just less than the function input. The domain must be numeric. This is the default for numeric domain, range functions.
- categorical
- functions return the output value of the stop equal to the function input. This is the default for string domain functions.
- rgb
- Use the RGB color space to interpolate color values
- lab
- Use the LAB color space to interpolate color values.
- hcl
- Use the HCL color space to interpolate color values, interpolating the Hue, Chroma, and Luminance channels individually.
| SDK Support | Mapbox GL JS | iOS SDK | Android SDK |
|---|---|---|---|
| basic functionality | >= 0.10.0 | >= 2.0.0 | >= 2.0.1 |
identity type |
>= 0.26.0 | Not yet supported | Not yet supported |
colorSpace |
>= 0.26.0 | Not yet supported | Not yet supported |
Zoom functions allow the appearance of a map feature to change with map’s zoom level. Zoom functions can be used to create the illusion of depth and control data density. Each stop is an array with two elements: the first is a zoom level and the second is a function output value.
[circle-radius]
stops = [{ in = 5, out = 1 }, { in = 10, out = 2 }]The rendered values of color, number, and array properties are intepolated between stops. Enum, boolean, and string property values cannot be intepolated, so their rendered values only change at the specified stops.
There is an important difference between the way that zoom functions render for layout and paint properties. Paint properties are continuously re-evaluated whenever the zoom level changes, even fractionally. The rendered value of a paint property will change, for example, as the map moves between zoom levels 4.1 and 4.6. Layout properties, on the other hand, are evaluated only once for each integer zoom level. To continue the prior example: the rendering of a layout property will not change between zoom levels 4.1 and 4.6, no matter what stops are specified; but at zoom level 5, the function will be re-evaluated according to the function, and the property's rendered value will change. (You can include fractional zoom levels in a layout property zoom function, and it will affect the generated values; but, still, the rendering will only change at integer zoom levels.)
Property functions allow the appearance of a map feature to change with its properties. Property functions can be used to visually differentate types of features within the same layer or create data visualizations. Each stop is an array with two elements, the first is a property input value and the second is a function output value. Note that support for property functions is not available across all properties and platforms at this time.
[circle-color]
property = "temperature"
stops = [{ in = 0, out = "blue" }, { in = 100, out = "red" }]Zoom-and-property functions allow the appearance of a map feature to change with both its properties and zoom. Each stop is an array with two elements, the first is an object with a property input value and a zoom, and the second is a function output value. Note that support for property functions is not yet complete.
[circle-radius]
property = "rating"
stops = [{ in = { zoom = 0, value = 0 }, out = 0 }, { in = { zoom = 0, value = 5 }, out = 5 }, { in = { zoom = 20, value = 0 }, out = 0 }, { in = { zoom = 20, value = 5 }, out = 20 }]Filter
A filter selects specific features from a layer. A filter is an array of one of the following forms:
Existential Filters
["has", key] feature[key] exists
["!has", key] feature[key] does not exist
Comparison Filters
["==", key, value] equality: feature[key] = value
["!=", key, value] inequality: feature[key] ≠ value
[">", key, value] greater than: feature[key] > value
[">=", key, value] greater than or equal: feature[key] ≥ value
["<", key, value] less than: feature[key] < value
["<=", key, value] less than or equal: feature[key] ≤ value
Set Membership Filters
["in", key, v0, ..., vn] set inclusion: feature[key] ∈ {v0, ..., vn}
["!in", key, v0, ..., vn] set exclusion: feature[key] ∉ {v0, ..., vn}
Combining Filters
["all", f0, ..., fn] logical AND: f0 ∧ ... ∧ fn
["any", f0, ..., fn] logical OR: f0 ∨ ... ∨ fn
["none", f0, ..., fn] logical NOR: ¬f0 ∧ ... ∧ ¬fn
A filter's key must be a string that identifies a feature property, or
the special key "$type", which identifies the feature type. A value
(and v0, ..., vn for set operators) must be a string,
number, or boolean to compare the property value
against. For the "$type" key it must be one of "Point",
"LineString", or "Polygon".
Set membership filters are a compact and efficient way to test whether a field matches any of multiple values.
The comparison and set membership filters implement strictly-typed comparisons; for example, all of the
following evaluate to false: 0 < "1", 2 == "2", "true" in [true, false].
The "all", "any", and "none" filter operators are
used to create compound filters. The values f0, ..., fn must be
filter expressions themselves.
["==", "$type", "LineString"]
This filter requires that the class property of
each feature is equal to either "street_major", "street_minor",
or "street_limited".
["in", "class", "street_major", "street_minor", "street_limited"]
The combining filter "all" takes the three other filters that
follow it and requires all of them to be true for a feature
to be included: a feature must have a class equal
to "street_limited", its admin_level must be greater
than or equal to 3, and its type cannot be Polygon. You could
change the combining filter to "any" to allow features matching
any of those criteria to be included - features that are Polygons,
but have a different class value, and so on.
[["all"], ["==", "class", "street_limited"], [">=", "admin_level", 3], ["!in", "$type", "Polygon"]]| SDK Support | Mapbox GL JS | iOS SDK | Android SDK |
|---|---|---|---|
| basic functionality | >= 0.10.0 | >= 2.0.0 | >= 2.0.1 |
has/!has |
>= 0.19.0 | >= 3.3.0 | >= 4.1.0 |