式

Search Style Specification

準備はできましたか？

無料アカウントを作成して、Mapboxでの構築を始めましょう。

サインアップ

Join the Mapbox Developers Discord Communityarrow-right

任意のレイアウトプロパティ、ペイントプロパティ、またはフィルターの値を_式_として定義することができます。

式は、以下に記載した_演算子_を使用してプロパティの値を計算するための公式を定義します。Mapbox GLが提供する演算子には、次のものが含まれます：

• 数値に対して算術演算や他の操作を行う_数学演算子_
• ブール値を操作し、条件付き決定を行うための_論理演算子_
• 文字列を操作するための_文字列演算子_
• ソースフィーチャーのプロパティにアクセスするための_データ演算子_
• 現在のマップビューを定義するパラメーターにアクセスするための_カメラ演算子_

式はJSON配列として表されます。式配列の最初の要素は、式演算子の名前を示す文字列です。例えば "*" や "case" です。その後に続く要素（もしあれば）は、式に対する_引数_です。各引数は、リテラル値（文字列、数値、ブール値、または null）、または別の式配列です。

[expression_name, argument_0, argument_1, ...]

TUTORIAL

Mapbox GL JS の式を使って始めよう

データプロパティとズームレベルに基づいてカスタムデータをスタイル設定する方法を学びましょう。

データ式

データ式は、フィーチャーデータにアクセスする式のことを指します。つまり、データ演算子を使用する式です：get, has, id, geometry-type, properties, または feature-state. データ式はフィーチャーのプロパティや状態によってその外見を決定します。同じレイヤー内のフィーチャーを区別したり、データ視覚化を行うのに使用できます。

{
    "circle-color": [
        "rgb",
        // feature.properties.temperature が高いと赤が高くなります
        ["get", "temperature"],
        // 緑は常にゼロ
        0,
        // feature.properties.temperature が低いと青が高くなります
        ["-", 100, ["get", "temperature"]]
    ]
}

この例では、get 演算子を使用して各フィーチャーの temperature 値を取得しています。その値は、赤、緑、青の成分で色を定義するための rgb 演算子の引数を計算するために使用されます。

データ式は filter プロパティの値として、そしてほとんどのペイントおよびレイアウトプロパティの値として使用することができます。ただし、一部のペイントおよびレイアウトプロパティはデータ式をまだサポートしていません。各プロパティに対する "SDKサポート" 表の "データ駆動のスタイリング" 行にサポートのレベルが示されています。feature-state 演算子を含むデータ式は、ペイントプロパティにのみ使用できます。

カメラ式

カメラ式は、zoom 演算子を使用する式のことを指します。これらの式は、マップのズームレベルに応じてレイヤーの外見を変更します。カメラ式を使用して、深みのある外見を作成したり、データの密度をコントロールしたりできます。

{
    "circle-radius": [
        "interpolate", ["linear"], ["zoom"],
        // ズームが5以下の場合 -> サークルの半径は1px
        5, 1,
        // ズームが10以上の場合 -> サークルの半径は5px
        10, 5
    ]
}

この例では、interpolate 演算子を使用して、ズームレベルとサークルサイズとの間に線形関係を定義しています。ズームレベルが5以下の場合、サークルの半径は1ピクセルとし、ズームレベルが10以上の場合は5ピクセルと定義しています。この2つのズームレベル間では、サークルの半径は1から5ピクセルの間で線形補間されます。

カメラ式は、式を使用できる場所ならどこでも使用できます。レイアウトやペイントプロパティの値としてカメラ式を使用する場合、次の形式のいずれかでなければなりません：

[ "interpolate", interpolation, ["zoom"], ... ]

または：

[ "step", ["zoom"], ... ]

または：

[
    "let",
    ... 変数バインディング...,
    [ "interpolate", interpolation, ["zoom"], ... ]
]

または：

[
    "let",
    ... 変数バインディング...,
    [ "step", ["zoom"], ... ]
]

つまり、レイアウトやペイントプロパティでは、["zoom"] は外側の interpolate または step 式への入力としてのみ表示できるか、そのような式がlet 式内にある場合に限ります。

レイアウトプロパティとペイントプロパティの間には、カメラ式の評価のタイミングにおいて重要な違いがあります：

• ペイントプロパティのカメラ式は、ズームレベルがわずかでも変更されるたびに再評価されます。例えば、ペイントプロパティのカメラ式は、マップがズームレベル4.1と4.6の間で移動する間に継続的に再評価されます。
• レイアウトプロパティのカメラ式は、整数のズームレベルでのみ評価されます。ズームが4.1から4.6に変わるときには再評価されません。5以上または4以下に達した場合にのみ再評価されます。

構成

単一の式で、データ演算子、カメラ演算子、その他の演算子を組み合わせることができます。このような 複合式 により、レイヤーの外見をズームレベルと個々のフィーチャープロパティの組み合わせによって決定することができます。

{
    "circle-radius": [
        "interpolate", ["linear"], ["zoom"],
        // ズームが0の場合、各フィーチャーのサークル半径をその "rating" プロパティの値に設定
        0, ["get", "rating"],
        // ズームが10の場合、各フィーチャーのサークル半径を "rating" プロパティの値の4倍に設定
        10, ["*", 4, ["get", "rating"]]
    ]
}

データとカメラの両方の演算子を使用する式は、データ式とカメラ式の両方と見なされ、それぞれに記述される制限に従う必要があります。

型システム

式に対する入力引数とその結果値は、スタイル仕様の他の部分と同じ型セットを使用します：ブール値、文字列、数値、色、およびこれらの型の配列です。さらに、式は_型安全_です：式の各使用には既知の結果型および必要な引数型があります。SDKは、式の結果型が使用される文脈に適していることを確認します。例えば、filter プロパティの式結果型はブール値でなければならず、+ 演算子の引数は数値でなければなりません。

フィーチャーデータを扱う場合、フィーチャープロパティ値の型が事前にSDKによって既知であることは通常ありません。型安全性を保つために、データ式を評価する際にはSDKがプロパティ値がその文脈に適しているかを確認します。例えば、circle-color プロパティに対して ["get", "feature-color"] 式を使用する場合、各フィーチャーの feature-color 値が有効な色を示す文字列であることをSDKが確認します。このチェックに失敗すると、SDK固有の方法でエラーが示され（通常はログメッセージ）、プロパティのデフォルト値が代わりに使用されます。

ほとんどの場合、この検証は必要な箇所で自動的に行われます。ただし、特定の状況では、SDKがデータ式の期待される結果型を周囲の文脈から自動的に決定できない場合があります。例えば、["<", ["get", "a"], ["get", "b"]] 式が文字列を比較しようとしているのか数値を比較しようとしているのかは明確ではありません。このような場合には、型アサーション 演算子を使用してデータ式の期待される型を示すことができます：["<", ["number", ["get", "a"]], ["number", ["get", "b"]]]. 型アサーションは、フィーチャーデータがデータ式の期待される型に一致することを確認します。このチェックに失敗するとエラーが発生し、定義されているプロパティのデフォルト値にフォールバックされます。アサーション演算子は array, boolean, number, および string です。

式は1種類の暗黙的な型変換のみを行います：カラーが期待される文脈で使用されるデータ式は、色の文字列表現を色値に変換します。その他のケースでは、型間を変換したい場合は、型変換 演算子のいずれかを使用する必要があります： to-boolean, to-number, to-string, またはto-color. 例えば、文字列形式で数値を格納するフィーチャープロパティがあり、それらの値を文字列ではなく数値として使用したい場合、["to-number", ["get", "property-name"]] のような式を使用できます。

式が配列引数を受け入れ、ユーザーが配列リテラルを提供する場合、その配列は literal 式でラップされなければなりません（以下の例を参照）。GL-JSがスタイル仕様のプロパティ値で配列に遭遇した場合、その配列が式であると仮定して解析しようとします。ライブラリには、バリデーションに失敗した式と明示的に literal 演算子で区別しない限り、配列リテラルを区別する方法がありません。配列がサブ式から返される場合には、literal 演算子は必要ありません。例えば ["in", 1, ["get", "myArrayProp"]] の場合です。

// エラーをスローします
{
    "circle-color": ["in", 1, [1, 2, 3]]
}

// 正常に動作します
{
    "circle-color": ["in", 1, ["literal", [1, 2, 3]]]
}

式のリファレンス

型

型式を使用して、文字列、数値、およびブール値の異なるデータ型間でテストおよび変換を行うことができます。

多くのケースで、このようなテストと変換は不要ですが、特定のサブ式の型が曖昧な場合など、いくつかの式では必要になることがあります。また、フィーチャーデータの型が一貫していない場合に役立つこともあります。例えば、to-number を使用して、"1.5"（1.5 ではなく）のような値を数値として扱うことができます。

array

Asserts that the input is an array (optionally with a specific item type and length). If, when the input expression is evaluated, it is not of the asserted type, then this assertion will cause the whole expression to be aborted.

Syntax

["array", value]: array

["array", type: "string" | "number" | "boolean", value]: array<type>

["array",
    type: "string" | "number" | "boolean",
    N: number (literal),
    value
]: array<type, N>

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

boolean

Asserts that the input value is a boolean. If multiple values are provided, each one is evaluated in order until a boolean is obtained. If none of the inputs are booleans, the expression is an error.

Syntax

["boolean", value]: boolean

["boolean", value, fallback: value, fallback: value, ...]: boolean

Related

• Example: Create a hover effect

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

collator

Returns a collator for use in locale-dependent comparison operations. The case-sensitive and diacritic-sensitive options default to false. The locale argument specifies the IETF language tag of the locale to use. If none is provided, the default locale is used. If the requested locale is not available, the collator will use a system-defined fallback locale. Use resolved-locale to test the results of locale fallback behavior.

Syntax

["collator",
    { "case-sensitive": boolean, "diacritic-sensitive": boolean, "locale": string }
]: collator

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.45.0	>= 6.5.0	>= 4.2.0

format

Returns a formatted string for displaying mixed-format text in the text-field property. The input may contain a string literal or expression, including an 'image' expression. Strings may be followed by a style override object that supports the following properties:

• "text-font": Overrides the font stack specified by the root layout property.
• "text-color": Overrides the color specified by the root paint property.
• "font-scale": Applies a scaling factor on text-size as specified by the root layout property.

Syntax

["format",
    input_1: string | image, options_1: { "font-scale": number, "text-font": array<string>, "text-color": color },
    ...,
    input_n: string | image, options_n: { "font-scale": number, "text-font": array<string>, "text-color": color }
]: formatted

Related

• Example: Change the case of labels
• Example: Display and style rich text labels
• Example: Display buildings in 3D

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.48.0	>= 6.7.0	>= 4.6.0
text-font	>= 0.48.0	>= 6.7.0	>= 4.6.0
font-scale	>= 0.48.0	>= 6.7.0	>= 4.6.0
text-color	>= 1.3.0	>= 7.3.0	>= 4.10.0
image	>= 1.6.0	>= 8.6.0	>= 5.7.0

image

Returns a ResolvedImage for use in icon-image, *-pattern entries, and as a section in the 'format' expression. A 'coalesce' expression containing image expressions will evaluate to the first listed image that is currently in the style. This validation process is synchronous and requires the image to have been added to the style before requesting it in the 'image' argument. To implement crossfading between two images within a symbol layer using the icon-image-cross-fade attribute, include a second image as the second argument in the 'image' expression.

Syntax

["image", value]: image

["image", value, value]: image

Related

• Example: Use a fallback image

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 1.4.0	>= 8.6.0	>= 5.7.0

literal

Provides a literal array or object value.

Syntax

["literal", [...] (JSON array literal)]: array<T, N>

["literal", {...} (JSON object literal)]: object

Related

• Example: Display and style rich text labels

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

number

Asserts that the input value is a number. If multiple values are provided, each one is evaluated in order until a number is obtained. If none of the inputs are numbers, the expression is an error.

Syntax

["number", value]: number

["number", value, fallback: value, fallback: value, ...]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

number-format

Converts the input number into a string representation using the providing formatting rules. If set, the locale argument specifies the locale to use, as a BCP 47 language tag. If set, the currency argument specifies an ISO 4217 code to use for currency-style formatting. If set, the unit argument specifies a simple ECMAScript unit to use for unit-style formatting. If set, the min-fraction-digits and max-fraction-digits arguments specify the minimum and maximum number of fractional digits to include.

Syntax

["number-format",
    input: number,
    options: { "locale": string, "currency": string, "min-fraction-digits": number, "max-fraction-digits": number }
]: string

Related

• Example: Display HTML clusters with custom properties

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.54.0	>= 8.4.0	>= 5.4.0

object

Asserts that the input value is an object. If multiple values are provided, each one is evaluated in order until an object is obtained. If none of the inputs are objects, the expression is an error.

Syntax

["object", value]: object

["object", value, fallback: value, fallback: value, ...]: object

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

string

Asserts that the input value is a string. If multiple values are provided, each one is evaluated in order until a string is obtained. If none of the inputs are strings, the expression is an error.

Syntax

["string", value]: string

["string", value, fallback: value, fallback: value, ...]: string

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

to-boolean

Converts the input value to a boolean. The result is false when then input is an empty string, 0, false, null, or NaN; otherwise it is true.

Syntax

["to-boolean", value]: boolean

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

to-color

Converts the input value to a color. If multiple values are provided, each one is evaluated in order until the first successful conversion is obtained. If none of the inputs can be converted, the expression is an error.

Syntax

["to-color", value, fallback: value, fallback: value, ...]: color

Related

• Example: Visualize population density

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

to-number

Converts the input value to a number, if possible. If the input is null or false, the result is 0. If the input is true, the result is 1. If the input is a string, it is converted to a number as specified by the "ToNumber Applied to the String Type" algorithm of the ECMAScript Language Specification. If multiple values are provided, each one is evaluated in order until the first successful conversion is obtained. If none of the inputs can be converted, the expression is an error.

Syntax

["to-number", value, fallback: value, fallback: value, ...]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

to-string

Converts the input value to a string. If the input is null, the result is "". If the input is a boolean, the result is "true" or "false". If the input is a number, it is converted to a string as specified by the "NumberToString" algorithm of the ECMAScript Language Specification. If the input is a color, it is converted to a string of the form "rgba(r,g,b,a)", where r, g, and b are numerals ranging from 0 to 255, and a ranges from 0 to 1. If the input is an 'image' expression, 'to-string' returns the image name. Otherwise, the input is converted to a string in the format specified by the JSON.stringify function of the ECMAScript Language Specification.

Syntax

["to-string", value]: string

Related

• Example: Create a time slider

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

typeof

Returns a string describing the type of the given value.

Syntax

["typeof", value]: string

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

フィーチャーデータ

accumulated

Returns the value of a cluster property accumulated so far. Can only be used in the clusterProperties option of a clustered GeoJSON source.

Syntax

["accumulated"]: value

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.53.0	>= 8.4.0	>= 5.5.0

feature-state

Retrieves a property value from the current feature's state. Returns null if the requested property is not present on the feature's state. A feature's state is not part of the GeoJSON or vector tile data, and must be set programmatically on each feature. Features are identified by their id attribute, which must be an integer or a string that can be cast to an integer. Note that ["feature-state"] can only be used with paint properties that support data-driven styling.

Syntax

["feature-state", string]: value

Related

• Example: Create a hover effect

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.46.0	>= 10.0.0	>= 10.0.0

geometry-type

Returns the feature's geometry type: Point, LineString or Polygon. Multi* feature types return the singular forms.

Syntax

["geometry-type"]: string

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

id

Returns the feature's id, if it has one.

Syntax

["id"]: value

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

line-progress

Returns the progress along a gradient line. Can only be used in the line-gradient property.

Syntax

["line-progress"]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.45.0	>= 6.5.0	>= 4.6.0

properties

Returns the feature properties object. Note that in some cases, it may be more efficient to use ["get", "property_name"] directly.

Syntax

["properties"]: object

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

ルックアップ

at

Retrieves an item from an array.

Syntax

["at", number, array]: ItemType

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

config

Retrieves the configuration value for the given option.

Syntax

["config", string]: config

["config", string, string]: config

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 3.0.0	>= 11.0.0	>= 11.0.0

get

Retrieves a property value from the current feature's properties, or from another object if a second argument is provided. Returns null if the requested property is missing.

Syntax

["get", string]: value

["get", string, object]: value

Related

• Example: Change the case of labels
• Example: Display HTML clusters with custom properties
• Example: Extrude polygons for 3D indoor mapping

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

has

Tests for the presence of an property value in the current feature's properties, or from another object if a second argument is provided.

Syntax

["has", string]: boolean

["has", string, object]: boolean

Related

• Example: Create and style clusters
• Example: Filter features within map view

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

in

Determines whether an item exists in an array or a substring exists in a string. In the specific case when the second and third arguments are string literals, you must wrap at least one of them in a literal expression to hint correct interpretation to the type system.

Syntax

["in",
    keyword: InputType (boolean, string, or number),
    input: InputType (array or string)
]: boolean

Related

• Example: Get features under the mouse pointer
• Example: Highlight features containing similar data
• Example: Highlight features within a bounding box
• Example: Measure distances

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 1.6.0	>= 9.1.0	>= 5.8.0

index-of

Returns the first position at which an item can be found in an array or a substring can be found in a string, or -1 if the input cannot be found. Accepts an optional index from where to begin the search.

Syntax

["index-of",
    keyword: InputType (boolean, string, or number),
    input: InputType (array or string)
]: number

["index-of",
    keyword: InputType (boolean, string, or number),
    input: InputType (array or string),
    index: number
]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 1.10.0	>= 10.0.0	>= 10.0.0

length

Returns the length of an array or string.

Syntax

["length", string | array | value]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

measure-light

Returns a requested property of the light configuration based on the supplied options. Currently the only supported option is brightness which returns the global brightness value of the lights on a scale of 0 to 1, where 0 means total darkness and 1 means full brightness. This expression works only with 3D light, i.e. when lights root property is defined.

Syntax

["measure-light", string]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 3.0.0	>= 11.0.0	>= 11.0.0

slice

Returns an item from an array or a substring from a string from a specified start index, or between a start index and an end index if set. The return value is inclusive of the start index but not of the end index.

Syntax

["slice",
    input: InputType (array or string),
    index: number
]: OutputType (ItemType or string)

["slice",
    input: InputType (array or string),
    index: number,
    index: number
]: OutputType (ItemType or string)

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 1.10.0	>= 10.0.0	>= 10.0.0

決定

決定式を使用して、スタイルに条件付きロジックを追加できます。例えば、'case' 式は「if/then/else」ロジックを提供し、'match' は入力式の特定の値を異なる出力式にマッピングします。

!

Logical negation. Returns true if the input is false, and false if the input is true.

Syntax

["!", boolean]: boolean

Related

• Example: Create and style clusters

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

!=

Returns true if the input values are not equal, false otherwise. The comparison is strictly typed: values of different runtime types are always considered unequal. Cases where the types are known to be different at parse time are considered invalid and will produce a parse error. Accepts an optional collator argument to control locale-dependent string comparisons.

Syntax

["!=", value, value]: boolean

["!=", value, value, collator]: boolean

Related

• Example: Display HTML clusters with custom properties

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0
collator	>= 0.45.0	>= 6.5.0	>= 4.2.0

<

Returns true if the first input is strictly less than the second, false otherwise. The arguments are required to be either both strings or both numbers; if during evaluation they are not, expression evaluation produces an error. Cases where this constraint is known not to hold at parse time are considered in valid and will produce a parse error. Accepts an optional collator argument to control locale-dependent string comparisons.

Syntax

["<", value, value]: boolean

["<", value, value, collator]: boolean

Related

• Example: Display HTML clusters with custom properties

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0
collator	>= 0.45.0	>= 6.5.0	>= 4.2.0

<=

Returns true if the first input is less than or equal to the second, false otherwise. The arguments are required to be either both strings or both numbers; if during evaluation they are not, expression evaluation produces an error. Cases where this constraint is known not to hold at parse time are considered in valid and will produce a parse error. Accepts an optional collator argument to control locale-dependent string comparisons.

Syntax

["<=", value, value]: boolean

["<=", value, value, collator]: boolean

Related

• Example: Animate 3D buildings based on ambient sounds

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0
collator	>= 0.45.0	>= 6.5.0	>= 4.2.0

==

Returns true if the input values are equal, false otherwise. The comparison is strictly typed: values of different runtime types are always considered unequal. Cases where the types are known to be different at parse time are considered invalid and will produce a parse error. Accepts an optional collator argument to control locale-dependent string comparisons.

Syntax

["==", value, value]: boolean

["==", value, value, collator]: boolean

Related

• Example: Add multiple geometries from one GeoJSON source
• Example: Create a time slider
• Example: Display buildings in 3D
• Example: Filter symbols by toggling a list

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0
collator	>= 0.45.0	>= 6.5.0	>= 4.2.0

>

Returns true if the first input is strictly greater than the second, false otherwise. The arguments are required to be either both strings or both numbers; if during evaluation they are not, expression evaluation produces an error. Cases where this constraint is known not to hold at parse time are considered in valid and will produce a parse error. Accepts an optional collator argument to control locale-dependent string comparisons.

Syntax

[">", value, value]: boolean

[">", value, value, collator]: boolean

Related

• Example: Animate 3D buildings based on ambient sounds

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0
collator	>= 0.45.0	>= 6.5.0	>= 4.2.0

>=

Returns true if the first input is greater than or equal to the second, false otherwise. The arguments are required to be either both strings or both numbers; if during evaluation they are not, expression evaluation produces an error. Cases where this constraint is known not to hold at parse time are considered in valid and will produce a parse error. Accepts an optional collator argument to control locale-dependent string comparisons.

Syntax

[">=", value, value]: boolean

[">=", value, value, collator]: boolean

Related

• Example: Display HTML clusters with custom properties

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0
collator	>= 0.45.0	>= 6.5.0	>= 4.2.0

all

Returns true if all the inputs are true, false otherwise. The inputs are evaluated in order, and evaluation is short-circuiting: once an input expression evaluates to false, the result is false and no further input expressions are evaluated.

Syntax

["all", boolean, boolean]: boolean

["all", boolean, boolean, ...]: boolean

Related

• Example: Animate 3D buildings based on ambient sounds
• Example: Change worldview of administrative boundaries
• Example: Display HTML clusters with custom properties

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

any

Returns true if any of the inputs are true, false otherwise. The inputs are evaluated in order, and evaluation is short-circuiting: once an input expression evaluates to true, the result is true and no further input expressions are evaluated.

Syntax

["any", boolean, boolean]: boolean

["any", boolean, boolean, ...]: boolean

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

case

Selects the first output whose corresponding test condition evaluates to true, or the fallback value otherwise.

Syntax

["case",
    condition: boolean, output: OutputType,
    condition: boolean, output: OutputType,
    ...,
    fallback: OutputType
]: OutputType

Related

• Example: Create a hover effect
• Example: Display HTML clusters with custom properties

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

coalesce

Evaluates each expression in turn until the first valid value is obtained. Invalid values are null and 'image' expressions that are unavailable in the style. If all values are invalid, coalesce returns the first value listed.

Syntax

["coalesce", OutputType, OutputType, ...]: OutputType

Related

• Example: Use a fallback image
• Tutorial: Video: Add bilingual labels to a map with expressions in Studio

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

match

Selects the output for which the label value matches the input value, or the fallback value if no match is found. The input can be any expression (for example, ["get", "building_type"]). Each label must be unique, and must be either:

• a single literal value; or
• an array of literal values, the values of which must be all strings or all numbers (for example [100, 101] or ["c", "b"]).

The input matches if any of the values in the array matches using strict equality, similar to the "in" operator. If the input type does not match the type of the labels, the result will be the fallback value.

Syntax

["match",
    input: InputType (number or string),
    label: InputType | [InputType, InputType, ...], output: OutputType,
    label: InputType | [InputType, InputType, ...], output: OutputType,
    ...,
    fallback: OutputType
]: OutputType

Related

• Example: Change worldview of administrative boundaries
• Example: Filter features within map view
• Example: Join local JSON data with vector tile geometries
• Example: Style circles with a data-driven property

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

within

Returns true if the evaluated feature is fully contained inside a boundary of the input geometry, false otherwise. The input value can be a valid GeoJSON of type Polygon, MultiPolygon, Feature, or FeatureCollection. Supported features for evaluation:

• Point: Returns false if a point is on the boundary or falls outside the boundary.
• LineString: Returns false if any part of a line falls outside the boundary, the line intersects the boundary, or a line's endpoint is on the boundary.

Syntax

["within", object]: boolean

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 1.9.0	>= 9.1.0	>= 5.8.0

ランプ、スケール、カーブ

interpolate

Produces continuous, smooth results by interpolating between pairs of input and output values ("stops"). The input may be any numeric expression (e.g., ["get", "population"]). Stop inputs must be numeric literals in strictly ascending order. The output type must be number, array<number>, or color.

Interpolation types:

• ["linear"]: Interpolates linearly between the pair of stops just less than and just greater than the input.
• ["exponential", base]: Interpolates exponentially between the stops just less than and just greater than the input. base controls the rate at which the output increases: higher values make the output increase more towards the high end of the range. With values close to 1 the output increases linearly.
• ["cubic-bezier", x1, y1, x2, y2]: Interpolates using the cubic bezier curve defined by the given control points.

Syntax

["interpolate",
    interpolation: ["linear"] | ["exponential", base] | ["cubic-bezier", x1, y1, x2, y2],
    input: number,
    stop_input_1: number, stop_output_1: OutputType,
    stop_input_n: number, stop_output_n: OutputType, ...
]: OutputType (number, array<number>, or Color)

Related

• Example: Animate map camera around a point
• Example: Change building color based on zoom level
• Example: Create a heatmap layer
• Example: Visualize population density

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.42.0	>= 6.0.0	>= 4.0.0

interpolate-hcl

Produces continuous, smooth results by interpolating between pairs of input and output values ("stops"). Works like interpolate, but the output type must be color, and the interpolation is performed in the Hue-Chroma-Luminance color space.

Syntax

["interpolate-hcl",
    interpolation: ["linear"] | ["exponential", base] | ["cubic-bezier", x1, y1, x2, y2],
    input: number,
    stop_input_1: number, stop_output_1: Color,
    stop_input_n: number, stop_output_n: Color, ...
]: Color

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.49.0	Not yet supported	Not yet supported

interpolate-lab

Produces continuous, smooth results by interpolating between pairs of input and output values ("stops"). Works like interpolate, but the output type must be color, and the interpolation is performed in the CIELAB color space.

Syntax

["interpolate-lab",
    interpolation: ["linear"] | ["exponential", base] | ["cubic-bezier", x1, y1, x2, y2 ],
    input: number,
    stop_input_1: number, stop_output_1: Color,
    stop_input_n: number, stop_output_n: Color, ...
]: Color

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.49.0	Not yet supported	Not yet supported

step

Produces discrete, stepped results by evaluating a piecewise-constant function defined by pairs of input and output values ("stops"). The input may be any numeric expression (e.g., ["get", "population"]). Stop inputs must be numeric literals in strictly ascending order. Returns the output value of the stop just less than the input, or the first output if the input is less than the first stop.

Syntax

["step",
    input: number,
    stop_output_0: OutputType,
    stop_input_1: number, stop_output_1: OutputType,
    stop_input_n: number, stop_output_n: OutputType, ...
]: OutputType

Related

• Example: Create and style clusters

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.42.0	>= 6.0.0	>= 4.0.0

変数バインディング

let

Binds expressions to named variables, which can then be referenced in the result expression using ["var", "variable_name"].

Syntax

["let",
    string (alphanumeric literal), any, string (alphanumeric literal), any, ...,
    OutputType
]: OutputType

Related

• Example: Visualize population density

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

var

References variable bound using "let".

Syntax

["var", previously bound variable name]: the type of the bound expression

Related

• Example: Visualize population density

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

文字列

concat

Returns a string consisting of the concatenation of the inputs. Each input is converted to a string as if by to-string.

Syntax

["concat", value, value, ...]: string

Related

• Example: Add a generated icon to the map
• Example: Create a time slider
• Example: Use a fallback image
• Example: Variable label placement

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

downcase

Returns the input string converted to lowercase. Follows the Unicode Default Case Conversion algorithm and the locale-insensitive case mappings in the Unicode Character Database.

Syntax

["downcase", string]: string

Related

• Example: Change the case of labels

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

is-supported-script

Returns true if the input string is expected to render legibly. Returns false if the input string contains sections that cannot be rendered without potential loss of meaning (e.g. Indic scripts that require complex text shaping, or right-to-left scripts if the the mapbox-gl-rtl-text plugin is not in use in Mapbox GL JS).

Syntax

["is-supported-script", string]: boolean

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.45.0	>= 6.6.0	>= 4.1.0

resolved-locale

Returns the IETF language tag of the locale being used by the provided collator. This can be used to determine the default system locale, or to determine if a requested locale was successfully loaded.

Syntax

["resolved-locale", collator]: string

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.45.0	>= 6.5.0	>= 4.2.0

upcase

Returns the input string converted to uppercase. Follows the Unicode Default Case Conversion algorithm and the locale-insensitive case mappings in the Unicode Character Database.

Syntax

["upcase", string]: string

Related

• Example: Change the case of labels

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

色

hsl

Creates a color value from hue (range 0-360), saturation and lightness components (range 0-100), and an alpha component of 1. If any component is out of range, the expression is an error.

Syntax

["hsl", number, number, number]: color

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 2.12.1	>= 10.11.0	>= 10.11.0

hsla

Creates a color value from hue (range 0-360), saturation and lightness components (range 0-100), and an alpha component (range 0-1). If any component is out of range, the expression is an error.

Syntax

["hsla", number, number, number, number]: color

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 2.12.1	>= 10.11.0	>= 10.11.0

rgb

Creates a color value from red, green, and blue components, which must range between 0 and 255, and an alpha component of 1. If any component is out of range, the expression is an error.

Syntax

["rgb", number, number, number]: color

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

rgba

Creates a color value from red, green, blue components, which must range between 0 and 255, and an alpha component which must range between 0 and 1. If any component is out of range, the expression is an error.

Syntax

["rgba", number, number, number, number]: color

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

to-rgba

Returns a four-element array containing the input color's red, green, blue, and alpha components, in that order.

Syntax

["to-rgba", color]: array<number, 4>

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

数学

-

For two inputs, returns the result of subtracting the second input from the first. For a single input, returns the result of subtracting it from 0.

Syntax

["-", number, number]: number

["-", number]: number

Related

• Tutorial: Get started with Mapbox GL JS expressions: Calculate the age of each landmark

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

*

Returns the product of the inputs.

Syntax

["*", number, number, ...]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

/

Returns the result of floating point division of the first input by the second.

Syntax

["/", number, number]: number

Related

• Tutorial: Get started with Mapbox GL JS expressions: Adjust the circle radius
• Example: Visualize population density

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

%

Returns the remainder after integer division of the first input by the second.

Syntax

["%", number, number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

^

Returns the result of raising the first input to the power specified by the second.

Syntax

["^", number, number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

+

Returns the sum of the inputs.

Syntax

["+", number, number, ...]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

abs

Returns the absolute value of the input.

Syntax

["abs", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.45.0	>= 6.0.0	>= 4.0.0

acos

Returns the arccosine of the input.

Syntax

["acos", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

asin

Returns the arcsine of the input.

Syntax

["asin", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

atan

Returns the arctangent of the input.

Syntax

["atan", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

ceil

Returns the smallest integer that is greater than or equal to the input.

Syntax

["ceil", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.45.0	>= 6.0.0	>= 4.0.0

cos

Returns the cosine of the input.

Syntax

["cos", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

distance

Returns the shortest distance in meters between the evaluated feature and the input geometry. The input value can be a valid GeoJSON of type Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon, Feature, or FeatureCollection. Distance values returned may vary in precision due to loss in precision from encoding geometries, particularly below zoom level 13.

Syntax

["distance", object]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 3.0.0	>= 9.2.0	>= 5.9.0

e

Returns the mathematical constant e.

Syntax

["e"]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

floor

Returns the largest integer that is less than or equal to the input.

Syntax

["floor", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.45.0	>= 6.0.0	>= 4.0.0

ln

Returns the natural logarithm of the input.

Syntax

["ln", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

ln2

Returns mathematical constant ln(2).

Syntax

["ln2"]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

log10

Returns the base-ten logarithm of the input.

Syntax

["log10", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

log2

Returns the base-two logarithm of the input.

Syntax

["log2", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

max

Returns the maximum value of the inputs.

Syntax

["max", number, number, ...]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

min

Returns the minimum value of the inputs.

Syntax

["min", number, number, ...]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

pi

Returns the mathematical constant pi.

Syntax

["pi"]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

random

Returns a random value in the specified range (first two input numbers) based on a supplied seed (third input). The seed can be an expression or a constant number or string value.

Syntax

["random", number, number, value]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 3.0.0	>= 11.0.0	>= 11.0.0

round

Rounds the input to the nearest integer. Halfway values are rounded away from zero. For example, ["round", -1.5] evaluates to -2.

Syntax

["round", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.45.0	>= 6.0.0	>= 4.0.0

sin

Returns the sine of the input.

Syntax

["sin", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

sqrt

Returns the square root of the input.

Syntax

["sqrt", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.42.0	>= 6.0.0	>= 4.0.0

tan

Returns the tangent of the input.

Syntax

["tan", number]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

カメラ

distance-from-center

Returns the distance of a symbol instance from the center of the map. The distance is measured in pixels divided by the height of the map container. It measures 0 at the center, decreases towards the camera and increase away from the camera. For example, if the height of the map is 1000px, a value of -1 means 1000px away from the center towards the camera, and a value of 1 means a distance of 1000px away from the camera from the center. ["distance-from-center"] may only be used in the filter expression for a symbol layer.

Syntax

["distance-from-center"]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 2.6.0	>= 10.9.0	>= 10.9.0

pitch

Returns the current pitch in degrees. ["pitch"] may only be used in the filter expression for a symbol layer.

Syntax

["pitch"]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 2.6.0	>= 10.9.0	>= 10.9.0

zoom

Returns the current zoom level. Note that in style layout and paint properties, ["zoom"] may only appear as the input to a top-level "step" or "interpolate" expression.

Syntax

["zoom"]: number

Related

• Tutorial: Get started with Mapbox GL JS expressions: Add a zoom expression

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

ヒートマップ

heatmap-density

Returns the kernel density estimation of a pixel in a heatmap layer, which is a relative measure of how many data points are crowded around a particular pixel. Can only be used in the heatmap-color property.

Syntax

["heatmap-density"]: number

SDK Support	Mapbox GL JS	Android SDK	iOS SDK
basic functionality	>= 0.41.0	>= 6.0.0	>= 4.0.0

準備はできましたか？

無料アカウントを作成して、Mapboxでの構築を始めましょう。

サインアップ

Join the Mapbox Developers Discord Communityarrow-right

このpageは役に立ちましたか？