Style techniques reference

Discover all rendering techniques and their configuration options. A technique determines how feature geometry is transformed into rendered map objects. Choose line for line geometry, polygon for filled areas, and icon-text for point features with icons or labels.

icon-text

The icon-text technique renders an icon with an optional text label.

icon-source

Source of the icon to display. Should be an asset. Icon supported formats are PNG, JPEG, SVG.

Type: string
Default Value: ""

"icon-source": string

icon-dx

Offset to apply to the icon in pixels on the x axis.

Type: number
Default Value: 0.0

"icon-dx": number

icon-dy

Offset to apply to the icon in pixels on the y axis.

Type: number
Default Value: 0.0

"icon-dy": number

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: number

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": number

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: number

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-width": number

text

Text to be displayed.

Type: string
Default Value: ""

"text": string

text-color

Color of the Text.

Type: color
Default Value: "#ffffff"

"text-color": color

text-dx

Offset to apply to the text in pixels on the x axis.

Type: number
Default Value: 0.0

"text-dx": number

text-dy

Offset to apply to the text in pixels on the y axis.

Type: number
Default Value: 0.0

"text-dy": number

text-outline-color

Text outline color.

Type: color
Default Value: "#000000"

"text-outline-color": color

text-outline-width

Text outline width in pixels.

Type: number
Default Value: 0.0

"text-outline-width": number

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-placement": string

text-size

Text font size in pixels.

Type: number
Default Value: 18.0

"text-size": number

visible

Controls whether the icon is visible (drawn on the map).

Type: boolean
Default Value: true

"visible": boolean

line

The line technique renders line geometry.

color

The color of the line.

Type: color
Default Value: "#ffffff"

"color": color

visible

Controls whether the line is visible (drawn on the map).

Type: boolean
Default Value: true

"visible": boolean

width

The width of the line in meters.

Type: number
Default Value: 1.0

"width": number

polygon

The polygon technique renders filled polygon geometry.

color

The color of the polygon.

Type: color
Default Value: "#ffffff"

"color": color

visible

Controls whether the polygon is visible (drawn on the map).

Type: boolean
Default Value: true

"visible": boolean

Next steps

Explore the following documents when customizing map style: