You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-maps/data-driven-style-expressions-web-sdk.md
+60-27Lines changed: 60 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,20 +35,20 @@ Expressions are represented as JSON arrays. The first element of an expression i
35
35
36
36
The Azure Maps Web SDK supports many types of expressions. Expressions can be used on their own or in combination with other expressions.
37
37
38
-
| Type of expressions | Description |
39
-
|---------------------|-------------|
40
-
|[Aggregate expression](#aggregate-expression)| An expression that defines a calculation that is processed over a set of data and can be used with the `clusterProperties` option of a `DataSource`. |
41
-
|[Boolean expressions](#boolean-expressions)| Boolean expressions provide a set of boolean operators expressions for evaluating boolean comparisons. |
42
-
|[Color expressions](#color-expressions)| Color expressions make it easier to create and manipulate color values. |
43
-
|[Conditional expressions](#conditional-expressions)| Conditional expressions provide logic operations that are like if-statements. |
44
-
|[Data expressions](#data-expressions)| Provides access to the property data in a feature. |
45
-
|[Interpolate and Step expressions](#interpolate-and-step-expressions)| Interpolate and step expressions can be used to calculate values along an interpolated curve or step function. |
46
-
|[Layer specific expressions](#layer-specific-expressions)| Special expressions that are only applicable to a single layer. |
47
-
|[Math expressions](#math-expressions)| Provides mathematical operators to perform data-driven calculations within the expression framework. |
48
-
|[String operator expressions](#string-operator-expressions)| String operator expressions perform conversion operations on strings such as concatenating and converting the case. |
49
-
|[Type expressions](#type-expressions)| Type expressions provide tools for testing and converting different data types like strings, numbers, and boolean values. |
50
-
|[Variable binding expressions](#variable-binding-expressions)| Variable binding expressions store the results of a calculation in a variable and referenced elsewhere in an expression multiple times without having to recalculate the stored value. |
51
-
|[Zoom expression](#zoom-expression)| Retrieves the current zoom level of the map at render time. |
38
+
| Type of expressions | Description |
39
+
|---------------------------|-------------|
40
+
|[Aggregate expression]| An expression that defines a calculation that is processed over a set of data and can be used with the `clusterProperties` option of a `DataSource`. |
41
+
|[Boolean expressions]| Boolean expressions provide a set of boolean operators expressions for evaluating boolean comparisons. |
42
+
|[Color expressions]| Color expressions make it easier to create and manipulate color values. |
43
+
|[Conditional expressions]| Conditional expressions provide logic operations that are like if-statements. |
44
+
|[Data expressions]| Provides access to the property data in a feature. |
45
+
|[Interpolate and Step expressions]| Interpolate and step expressions can be used to calculate values along an interpolated curve or step function. |
46
+
|[Layer specific expressions]| Special expressions that are only applicable to a single layer. |
47
+
|[Math expressions]| Provides mathematical operators to perform data-driven calculations within the expression framework. |
48
+
|[String operator expressions]| String operator expressions perform conversion operations on strings such as concatenating and converting the case. |
49
+
|[Type expressions]| Type expressions provide tools for testing and converting different data types like strings, numbers, and boolean values. |
50
+
|[Variable binding expressions]| Variable binding expressions store the results of a calculation in a variable and referenced elsewhere in an expression multiple times without having to recalculate the stored value. |
51
+
|[Zoom expression]| Retrieves the current zoom level of the map at render time. |
52
52
53
53
All examples in this document use the following feature to demonstrate different ways in which the different types of expressions can be used.
54
54
@@ -432,8 +432,8 @@ Type expressions provide tools for testing and converting different data types l
432
432
|`['string', value]`\|`["string", value, fallback: value, fallback: value, ...]`| 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. |
433
433
|`['to-boolean', value]`| boolean | Converts the input value to a boolean. The result is `false` when the input is an empty string, `0`, `false`, `null`, or `NaN`; otherwise its `true`. |
434
434
|`['to-color', value]`<br/><br/>`['to-color', value1, value2…]`| 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. |
435
-
|`['to-number', value]`<br/><br/>`['to-number', value1, value2, …]`| 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's converted to a number using the [ToNumber](https://tc39.github.io/ecma262/#sec-tonumber-applied-to-the-string-type) string function 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. |
436
-
|`['to-string', value]`| 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's converted to a string using the [ToString](https://tc39.github.io/ecma262/#sec-tostring-applied-to-the-number-type) number function of the ECMAScript Language Specification. If the input is a color, it's converted to CSS RGBA color string `"rgba(r,g,b,a)"`. Otherwise, the input is converted to a string using the [JSON.stringify](https://tc39.github.io/ecma262/#sec-json.stringify) function of the ECMAScript Language Specification. |
435
+
|`['to-number', value]`<br/><br/>`['to-number', value1, value2, …]`| 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's converted to a number using the [ToNumber] string function 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. |
436
+
|`['to-string', value]`| 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's converted to a string using the [ToString] number function of the ECMAScript Language Specification. If the input is a color, it's converted to CSS RGBA color string `"rgba(r,g,b,a)"`. Otherwise, the input is converted to a string using the [JSON.stringify] function of the ECMAScript Language Specification. |
437
437
|`['typeof', value]`| string | Returns a string describing the type of the given value. |
438
438
439
439
> [!TIP]
@@ -531,7 +531,7 @@ There are three types of interpolation methods that can be used in an `interpola
531
531
532
532
-`['linear']` - Interpolates linearly between the pair of stops.
533
533
-`['exponential', base]` - Interpolates exponentially between the stops. The `base` value controls the rate at which the output increases. Higher values make the output increase more towards the high end of the range. A `base` value close to 1 produces an output that increases more linearly.
534
-
-`['cubic-bezier', x1, y1, x2, y2]` - Interpolates using a [cubic Bezier curve](https://developer.mozilla.org/docs/Web/CSS/timing-function) defined by the given control points.
534
+
-`['cubic-bezier', x1, y1, x2, y2]` - Interpolates using a [cubic Bezier curve] defined by the given control points.
535
535
536
536
Here's an example of what these different types of interpolations look like.
537
537
@@ -578,7 +578,7 @@ The following image demonstrates how the colors are chosen for the above express
578
578
579
579
### Step expression
580
580
581
-
A `step` expression can be used to calculate discrete, stepped result values by evaluating a [piecewise-constant function](https://mathworld.wolfram.com/PiecewiseConstantFunction.html) defined by stops.
581
+
A `step` expression can be used to calculate discrete, stepped result values by evaluating a [piecewise-constant function] defined by stops.
582
582
583
583
The following pseudocode defines the structure of the `step` expression.
584
584
@@ -624,7 +624,7 @@ Special expressions that only apply to specific layers.
624
624
625
625
### Heat map density expression
626
626
627
-
A heat map density expression retrieves the heat map density value for each pixel in a heat map layer and is defined as `['heatmap-density']`. This value is a number between `0` and `1`. It's used in combination with a `interpolation` or `step` expression to define the color gradient used to colorize the heat map. This expression can only be used in the [color option](/javascript/api/azure-maps-control/atlas.heatmaplayeroptions#color) of the heat map layer.
627
+
A heat map density expression retrieves the heat map density value for each pixel in a heat map layer and is defined as `['heatmap-density']`. This value is a number between `0` and `1`. It's used in combination with a `interpolation` or `step` expression to define the color gradient used to colorize the heat map. This expression can only be used in the [color option] of the heat map layer.
628
628
629
629
> [!TIP]
630
630
> The color at index 0, in an interpolation expression or the default color of a step color, defines the color of the area where there's no data. The color at index 0 can be used to define a background color. Many prefer to set this value to transparent or a semi-transparent black.
@@ -664,11 +664,11 @@ var layer = new atlas.layer.HeatMapLayer(datasource, null, {
664
664
});
665
665
```
666
666
667
-
For more information, see the [Add a heat map layer](map-add-heat-map-layer.md) documentation.
667
+
For more information, see the [Add a heat map layer] documentation.
668
668
669
669
### Line progress expression
670
670
671
-
A line progress expression retrieves the progress along a gradient line in a line layer and is defined as `['line-progress']`. This value is a number between 0 and 1. It's used in combination with an `interpolation` or `step` expression. This expression can only be used with the [strokeGradient option](/javascript/api/azure-maps-control/atlas.linelayeroptions#strokegradient) of the line layer.
671
+
A line progress expression retrieves the progress along a gradient line in a line layer and is defined as `['line-progress']`. This value is a number between 0 and 1. It's used in combination with an `interpolation` or `step` expression. This expression can only be used with the [strokeGradient option] of the line layer.
672
672
673
673
> [!NOTE]
674
674
> The `strokeGradient` option of the line layer requires the `lineMetrics` option of the data source to be set to `true`.
@@ -693,7 +693,7 @@ var layer = new atlas.layer.LineLayer(datasource, null, {
693
693
});
694
694
```
695
695
696
-
[See live example](map-add-line-layer.md#line-stroke-gradient)
696
+
For an interactive working example, see [Add a strokegradient to a line].
697
697
698
698
### Text field format expression
699
699
@@ -756,10 +756,10 @@ This layer renders the point feature as shown in the following image:
756
756
757
757
### Number format expression
758
758
759
-
The `number-format` expression can only be used with the `textField` option of a symbol layer. This expression converts the provided number into a formatted string. This expression wraps JavaScript's [Number.toLocalString](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) function and supports the following set of options.
759
+
The `number-format` expression can only be used with the `textField` option of a symbol layer. This expression converts the provided number into a formatted string. This expression wraps JavaScript's [Number.toLocalString] function and supports the following set of options.
760
760
761
-
-`locale` - Specify this option for converting numbers to strings in a way that aligns with the specified language. Pass a [BCP 47 language tag](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation) into this option.
762
-
-`currency` - To convert the number into a string representing a currency. Possible values are the [ISO 4217 currency codes](https://en.wikipedia.org/wiki/ISO_4217), such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
761
+
-`locale` - Specify this option for converting numbers to strings in a way that aligns with the specified language. Pass a [BCP 47 language tag] into this option.
762
+
-`currency` - To convert the number into a string representing a currency. Possible values are the [ISO 4217 currency codes], such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
763
763
-`'min-fraction-digits'` - Specifies the minimum number of decimal places to include in the string version of the number.
764
764
-`'max-fraction-digits'` - Specifies the maximum number of decimal places to include in the string version of the number.
765
765
@@ -860,7 +860,7 @@ var layer = new atlas.layer.HeatMapLayer(datasource, null, {
860
860
};
861
861
```
862
862
863
-
[See live example](map-add-heat-map-layer.md#consistent-zoomable-heat-map)
863
+
For an interactive working example, see [Consistent zoomableheatmap].
864
864
865
865
## Variable binding expressions
866
866
@@ -916,7 +916,7 @@ See the following articles for more code samples that implement expressions:
916
916
> [Add a polygon layer](map-add-shape.md)
917
917
918
918
> [!div class="nextstepaction"]
919
-
> [Add a heat map layer](map-add-heat-map-layer.md)
919
+
> [Add a heat map layer]
920
920
921
921
Learn more about the layer options that support expressions:
922
922
@@ -934,3 +934,36 @@ Learn more about the layer options that support expressions:
0 commit comments