Types
A style contains values of various types, most commonly as values for the style properties of a layer.
Color
The color
type is a color in the sRGB color space. Colors are 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.
Formatted
The formatted
type is a string broken into sections annotated with separate formatting options.
{
"text-field": ["format",
"foo", { "font-scale": 1.2 },
"bar", { "font-scale": 0.8 }
]
}
String
A string is text. In styles, strings are in quotes.
{
"source": "mySource"
}
Boolean
Boolean means yes or no, so it accepts the values true
or false
.
{
"fill-enabled": true
}
Number
A number value, often an integer or floating point (decimal number). Written without quotes.
{
"text-size": 24
}
Array
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. If an array is used as an argument in an expression, the array must be wrapped in a literal
expression.
{
"line-dasharray": [2, 4]
}
{
"circle-color": ["in", 1, ["literal", [1, 2, 3]]]
}