The type of the value that the expression returns.
A StyleExpression is a JSON array representing an expression that returns the desired value for a specific style property. Below are the possible operators and their descriptions, along with examples.
ref: References another expression by name.
["ref", "otherExpression"]get: Retrieves a property from the input data. The third optional operand specifies the input data from which to retrieve the property. If not provided, it defaults to feature.properties.
The property name can also be a global map context variable:
$zoom: The current zoom level.
$layer: The name of the datasource layer.
$geometryType: The type of the current feature geometry ("line", "point", "polygon").
$id: The ID of the current feature.
Example: ["get", "propertyName"] // Retrieves propertyName from feature.properties.
Example with input data: ["get", "propertyName", { custom: "data" }] // Retrieves propertyName from the specified input data.
Example with global map context variable: ["get", "$zoom"] // Retrieves the current zoom level.
+: Adds two numbers.
["+", 2, 3] // Outputs: 5-: Subtracts the second number from the first.
["-", 5, 3] // Outputs: 2*: Multiplies two numbers.
["*", 2, 3] // Outputs: 6/: Divides the first number by the second.
["/", 6, 3] // Outputs: 2%: Computes the remainder of dividing the first number by the second.
["%", 5, 2] // Outputs: 1floor: Rounds down a number to the nearest integer.
["floor", 4.7] // Outputs: 4min: Returns the smallest number.
["min", 1, 2, 3] // Outputs: 1max: Returns the largest number.
["max", 1, 2, 3] // Outputs: 3all: Returns true if all conditions are true.
["all", true, true] // Outputs: trueany: Returns true if any condition is true.
["any", true, false] // Outputs: true!: Negates a boolean value.
["!", true] // Outputs: false!has: Checks if a property does not exist.
["!has", "propertyName"]has: Checks if a property exists.
["has", "propertyName"]none: Returns true if no conditions are true.
["none", false, false] // Outputs: true==: Checks if two values are equal.
["==", 2, 2] // Outputs: true!=: Checks if two values are not equal.
["!=", 2, 3] // Outputs: true>: Checks if the first value is greater than the second.
[" >", 3, 2] // Outputs: true>=: Checks if the first value is greater than or equal to the second.
[" >=", 3, 3] // Outputs: true<=: Checks if the first value is less than or equal to the second.
["<=", 2, 2] // Outputs: true<: Checks if the first value is less than the second.
["<", 2, 3] // Outputs: true^=: Checks if a string starts with a given substring.
["^=", "hello", "he"] // Outputs: true$=: Checks if a string ends with a given substring.
["$=", "hello", "lo"] // Outputs: truesplit: Splits a string by a delimiter.
["split", "a,b,c", ","] // Outputs: ["a", "b", "c"]to-string: Converts a value to a string.
["to-string", 123] // Outputs: "123"concat: Concatenates multiple strings.
["concat", "hello", " ", "world"] // Outputs: "hello world"regex-replace: Replaces parts of a string matching a regex.
["regex-replace", "hello world", "world", "there"] // Outputs: "hello there"slice: Extracts a section of a string.
["slice", "hello", 0, 2] // Outputs: "he"at: Gets the character at a specified index in a string.
["at", "hello", 1] // Outputs: "e"length: Gets the length of a string.
["length", "hello"] // Outputs: 5case: Evaluates conditions in order and returns the corresponding result for the first true condition.
["case", ["==", 1, 1], "one", ["==", 2, 2], "two", "default"] // Outputs: "one"step: Returns a value from a step function based on input.
["step", 3, "small", 5, "medium", 10, "large"] // Outputs: "small"match: Returns a value based on matching input values.
["match", "a", "a", 1, "b", 2, 0] // Outputs: 1literal: Returns a literal value.
["literal", [1, 2, 3]] // Outputs: [1, 2, 3]lookup: Finds an entry in a table that matches the given key values. The entry with the most matching keys is returned.
If multiple entries match equally, one of them is returned.
If no match is found, the default entry (if any) is returned. If no default entry is defined, null is returned.
lookupTable should be an array of objects, each with a keys member and an attributes member:
keys: An object containing key-value pairs used for matching.attributes: An object containing the attributes to be returned when a match is found.{
"definitions": {
"lookupTable": [ "literal", [
{ "keys": { "country": "US" }, "attributes": { "population": 331000000 } },
{ "keys": { "country": "US", "state": "CA" }, "attributes": { "population": 39500000 } },
{ "keys": {}, "attributes": { "population": 7800000000 } } // Default entry
]]
}
}
// This example looks up the population for the state of California in the United States from the `lookupTable`.
["lookup", { "country": "US", "state": "CA" }, ["ref", "lookupTable"]] // Outputts: `{ "population": 39500000 }`.
number: Converts a value to a number.
["number", "123"] // Outputs: 123boolean: Converts a value to a boolean.
["boolean", "true"] // Outputs: trueto-number: Converts a value to a number.
["to-number", "123"] // Outputs: 123to-boolean: Converts a value to a boolean.
["to-boolean", "true"] // Outputs: truezoom: Returns the current zoom level.
["zoom"] // Outputs: current zoom levelinterpolate: Interpolates between values based on zoom level.
["interpolate", ["linear"], ["zoom"], 10, 1, 15, 10]Example:
const expression: StyleExpression = ["==", ["get", "property"], "value"];
In this example, "==" is the operator, and ["get", "property"] and "value" are the operands.
Operators can include logical, arithmetic, string manipulation, and other types of operations, which are evaluated to determine the final value of the style property.
A StyleExpression is a JSON array representing an expression that returns the desired value for a specific style property. It is particularly useful for data-driven styling in map or UI components.
The structure of a StyleExpression is as follows: