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.

padding

Size of the additional area around the icon bounding box used for detecting symbol collisions. Default 2.

pitchAlignment

Specifies the orientation of the icon when the map is pitched.

`"auto"`: Automatically matches the value of `rotationAlignment`.

`"map"`: The icon is aligned to the plane of the map.

`"viewport"`: The icon is aligned to the plane of the viewport

Default `"auto"`
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?: PositionAnchor | DataDrivenPropertyValueSpecification<PositionAnchor>

Property Value

PositionAnchor | DataDrivenPropertyValueSpecification<PositionAnchor>

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 | DataDrivenPropertyValueSpecification<string>

Property Value

string | DataDrivenPropertyValueSpecification<string>

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 | DataDrivenPropertyValueSpecification<Pixel>

Property Value

Pixel | DataDrivenPropertyValueSpecification<Pixel>

opacity

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

opacity?: number | DataDrivenPropertyValueSpecification<number>

Property Value

number | DataDrivenPropertyValueSpecification<number>

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

padding

Size of the additional area around the icon bounding box used for detecting symbol collisions. Default 2.

padding?: number | DataDrivenPropertyValueSpecification<number>

Property Value

number | DataDrivenPropertyValueSpecification<number>

pitchAlignment

Specifies the orientation of the icon when the map is pitched.

`"auto"`: Automatically matches the value of `rotationAlignment`.

`"map"`: The icon is aligned to the plane of the map.

`"viewport"`: The icon is aligned to the plane of the viewport

Default `"auto"`
pitchAlignment?: "auto" | "map" | "viewport"

Property Value

"auto" | "map" | "viewport"

rotation

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

rotation?: number | DataDrivenPropertyValueSpecification<number>

Property Value

number | DataDrivenPropertyValueSpecification<number>

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

Property Value

number | DataDrivenPropertyValueSpecification<number>