Style techniques reference for custom layers
This reference describes the style techniques that can be used to customize the visual appearance of a custom layer through the use of custom styles - as described in the style guide for custom layers.
Technique index
Techniques
raster technique
opacity
Factor applied to the texture color alpha value in order to control the opacity of the texture.
Type:
real
Default Value:
1.0
brightness
Factor applied to the texture color rgb values in order to control the brightness.
Type:
real
Default Value:
1.0
gamma
Texture gamma correction value.
Type:
real
Default Value:
1.0
line technique
width
The width of the line in meters.
Type:
real
Default Value:
1.0
color
The color of the line.
Type:
color
Default Value:
"#ffffff"
visible
Whether the line is visible (drawn on the map).
Type:
boolean
Default Value:
true
z-order
The relative rendering order of items within a category. Higher z-order item will be drawn on top of lower z-order item. The order between items within one category and with the same z-order is undefined.
Type:
unsigned integer
Default Value:
0
polygon technique
color
The color of the polygon.
Type:
color
Default Value:
"#ffffff"
visible
Whether the polygon is visible (drawn on the map).
Type:
boolean
Default Value:
true
z-order
The relative rendering order of items within a category. Higher z-order item will be drawn on top of lower z-order item. The order between items within one category and with the same z-order is undefined.
Type:
unsigned integer
Default Value:
0
icon text technique
icon-source
Source of the icon to display. Can be an asset file path or an absolute file path. Icon supported formats are PNG, JPEG, SVG Tiny.
Type:
string
Default Value:
""
icon-width
Width of the icon. When not provided, the icon-height matching value that would preserve the icon source aspect ratio is used.
Type:
real
Default Value:
-1.0
Examples using an icon with original width of 600 pixels and height of 400 pixels:
| icon-width | icon-height | Displayed width | Displayed height |
|---|---|---|---|
| - | - | 600 | 400 |
| 300 | 200 | 300 | 200 |
| 300 | - | 300 | 200 |
| - | 800 | 1200 | 800 |
icon-height
Height of the icon. When not provided, the icon-width matching value that would preserve the icon source aspect ratio is used.
Type:
real
Default Value:
-1.0
Examples using an icon with original width of 600 pixels and height of 400 pixels:
| icon-width | icon-height | Displayed width | Displayed height |
|---|---|---|---|
| - | - | 600 | 400 |
| 300 | 200 | 300 | 200 |
| 300 | - | 300 | 200 |
| - | 800 | 1200 | 800 |
icon-placement
List of cardinal directions to define the placement of the whole icon with respect to the anchor point. One or more comma separated values: TR, R, BR, B, BL, L, TL, T, C.
Type:
string
Default Value:
"C"
| Placement | Details |
|---|---|
| C | Center: icon center would match with the anchor point. |
| T | Top: icon bottom center will match with the anchor point. |
| L | Left: icon right-center will match with the anchor point. |
| R | Right: icon left-center will match with the anchor point. |
| B | Bottom: icon top-center will match with the anchor point. |
| TL | Top-Left: icon bottom-right will match with the anchor point. |
| TR | Top-Right: icon bottom-left will match with the anchor point. |
| BL | Bottom-Left: icon top-right will match with the anchor point. |
| BR | Bottom-Right: icon top-left will match with the anchor point. |
icon-dx
Offset to apply to the icon in pixels on the x axis. The displacement direction depends on the icon's placement. Positive values move the icon to the right for C, T, TR, R, BR, B and to the left for TL, L, BL.
Type:
real
Default Value:
0.0
icon-dy
Offset to apply to the icon in pixels on the y axis. The displacement direction depends on the icon's placement. Positive values move the icon upwards for C, L, TL, T, TR, R and downwards for BL, B, BR.
Type:
real
Default Value:
0.0
text
Text to be displayed.
Type:
string
Default Value:
""
text-placement
Cardinal directions that define the text's placement with respect to the icon. Can be defined as one or more comma separated values. The possible values are comprised of C, T, TR, R, BR, B, BL, L, TL.
Type:
string
Default Value:
"C"
| Placement | Details |
|---|---|
| C | Center: text centered in the icon. |
| T | Top: text centered top of the icon. The bottom-center of the text area would match with the icon top-center. |
| L | Left: text placed left of the icon. The right-center of the text area would match with the icon left-center. |
| R | Right: text placed right of the icon. The left-center of the text area would match with the icon right-center. |
| B | Bottom: text placed at the bottom of the icon. The top-center of the text area would match with the icon bottom-center. |
| TL | Top-Left: text placed top-left of the icon. The bottom-right of the text area would match with the icon top-left. |
| TR | Top-Right: text placed top-right of the icon. The bottom-left of the text area would match with the icon top-right. |
| BL | Bottom-Left: text placed bottom-left of the icon. The top-right of the text area would match with the icon bottom-left. |
| BR | Bottom-Right: text placed bottom-right of the icon. The top-left of the text area would match with the icon bottom-right. |
text-dx
Offset to apply to the text in pixels on the x axis. The displacement direction depends on the text's placement. Positive values move the text to the right for C, T, TR, R, BR, B and to the left for TL, L, BL.
Type:
real
Default Value:
0.0
text-dy
Offset to apply to the text in pixels on the y axis. The displacement direction depends on the text's placement. Positive values move the text upwards for C, L, TL, T, TR, R and downwards for BL, B, BR.
Type:
real
Default Value:
0.0
text-color
Text color.
Type:
color
Default Value:
"#ffffffff"
text-outline-width
Text outline width in pixels.
Type:
real
Default Value:
0.0
text-outline-color
Text outline color.
Type:
color
Default Value:
"#000000ff"
text-size
Text font size in pixels. The font used is FiraGO.
Type:
real
Default Value:
18.0
z-order
The relative rendering order of items within a category. Higher z-order item will be drawn on top of lower z-order item. The order between items within one category and with the same z-order is undefined.
Type:
unsigned integer
Default Value:
0
visible
Whether the item is visible (drawn on the map).
Type:
boolean
Default Value:
true
Updated yesterday