IconOptions interface

Options used to customize the icons in a SymbolLayer

Extends

Properties

allowOverlap

Specifies if the symbol icon can overlay other symbols on the map. If true the icon will be visible even if it collides with other previously drawn symbols. Tip: Set this to true if animating an symbol to ensure smooth rendering. Default false.

anchor

Specifies which part of the icon is placed closest to the icons anchor position on the map.

`"center"`: The center of the icon is placed closest to the anchor.

`"left"`: The left side of the icon is placed closest to the anchor.

`"right"`: The right side of the icon is placed closest to the anchor.

`"top"`: The top of the icon is placed closest to the anchor.

`"bottom"`: The bottom of the icon is placed closest to the anchor.

`"top-left"`: The top left corner of the icon is placed closest to the anchor.

`"top-right"`: The top right corner of the icon is placed closest to the anchor.

`"bottom-left"`: The bottom left corner of the icon is placed closest to the anchor.

`"bottom-right"`: The bottom right corner of the icon is placed closest to the anchor.

Default `"bottom"`.
ignorePlacement

Specifies if other symbols can overlap this symbol. If true, other symbols can be visible even if they collide with the icon. Default false.

image

The name of the image in the map's image sprite to use for drawing the icon. Available built-in images are: marker-black, marker-blue, marker-darkblue, marker-red, marker-yellow, pin-blue, pin-darkblue, pin-red, pin-round-blue, pin-round-darkblue, pin-round-red. Default "marker-blue".

offset

Specifies an offset distance of the icon from its anchor in pixels. Positive values indicate right and down, while negative values indicate left and up. Each component is multiplied by the value of size to obtain the final offset in pixels. When combined with rotation the offset will be as if the rotated direction was up. Default [0, 0].

opacity

A number between 0 and 1 that indicates the opacity at which the icon will be drawn. Default 1.

optional

Specifies if a symbols icon can be hidden but its text displayed if it is overlapped with another symbol. If true, text will display without their corresponding icons when the icon collides with other symbols and the text does not. Default false.

rotation

The amount to rotate the icon clockwise in degrees Default 0.

rotationAlignment

In combination with the placement property of a SymbolLayerOptions this determines the rotation behavior of icons.

`"auto"`: When placement is "point" this is equivalent to "viewport". When placement is "line" this is equivalent to "map".

`"map"`: When placement is "point" aligns icons east-west. When placement is "line" aligns the icons' x-axes with the line.

`"viewport"`: Icons' x-axes will align with the x-axis of the viewport.

Default `"auto"`.
size

Scales the original size of the icon by the provided factor. Must be greater or equal to 0. Default 1.

Property Details

allowOverlap

Specifies if the symbol icon can overlay other symbols on the map. If true the icon will be visible even if it collides with other previously drawn symbols. Tip: Set this to true if animating an symbol to ensure smooth rendering. Default false.

allowOverlap?: boolean

Property Value

boolean

anchor

Specifies which part of the icon is placed closest to the icons anchor position on the map.

`"center"`: The center of the icon is placed closest to the anchor.

`"left"`: The left side of the icon is placed closest to the anchor.

`"right"`: The right side of the icon is placed closest to the anchor.

`"top"`: The top of the icon is placed closest to the anchor.

`"bottom"`: The bottom of the icon is placed closest to the anchor.

`"top-left"`: The top left corner of the icon is placed closest to the anchor.

`"top-right"`: The top right corner of the icon is placed closest to the anchor.

`"bottom-left"`: The bottom left corner of the icon is placed closest to the anchor.

`"bottom-right"`: The bottom right corner of the icon is placed closest to the anchor.

Default `"bottom"`.
anchor?: "center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right"

Property Value

"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right"

ignorePlacement

Specifies if other symbols can overlap this symbol. If true, other symbols can be visible even if they collide with the icon. Default false.

ignorePlacement?: boolean

Property Value

boolean

image

The name of the image in the map's image sprite to use for drawing the icon. Available built-in images are: marker-black, marker-blue, marker-darkblue, marker-red, marker-yellow, pin-blue, pin-darkblue, pin-red, pin-round-blue, pin-round-darkblue, pin-round-red. Default "marker-blue".

image?: string | Expression

Property Value

string | Expression

offset

Specifies an offset distance of the icon from its anchor in pixels. Positive values indicate right and down, while negative values indicate left and up. Each component is multiplied by the value of size to obtain the final offset in pixels. When combined with rotation the offset will be as if the rotated direction was up. Default [0, 0].

offset?: Pixel | Expression

Property Value

opacity

A number between 0 and 1 that indicates the opacity at which the icon will be drawn. Default 1.

opacity?: number | Expression

Property Value

number | Expression

optional

Specifies if a symbols icon can be hidden but its text displayed if it is overlapped with another symbol. If true, text will display without their corresponding icons when the icon collides with other symbols and the text does not. Default false.

optional?: boolean

Property Value

boolean

rotation

The amount to rotate the icon clockwise in degrees Default 0.

rotation?: number | Expression

Property Value

number | Expression

rotationAlignment

In combination with the placement property of a SymbolLayerOptions this determines the rotation behavior of icons.

`"auto"`: When placement is "point" this is equivalent to "viewport". When placement is "line" this is equivalent to "map".

`"map"`: When placement is "point" aligns icons east-west. When placement is "line" aligns the icons' x-axes with the line.

`"viewport"`: Icons' x-axes will align with the x-axis of the viewport.

Default `"auto"`.
rotationAlignment?: "auto" | "map" | "viewport"

Property Value

"auto" | "map" | "viewport"

size

Scales the original size of the icon by the provided factor. Must be greater or equal to 0. Default 1.

size?: number | Expression

Property Value

number | Expression