TextOptions interface
Options used to customize the text in a SymbolLayer
- Extends
Properties
allow |
Specifies if the text will be visible if it collides with other symbols.
If true, the text will be visible even if it collides with other previously drawn symbols.
Default |
anchor | Specifies which part of the icon is placed closest to the icons anchor position on the map. |
color | The color of the text.
Default |
font | The font stack to use for displaying text.
Possible values: |
halo |
The halo's fadeout distance towards the outside in pixels.
Must be a number greater or equal to 0.
Default |
halo |
The color of the text's halo, which helps it stand out from backgrounds.
Default |
halo |
The distance of the halo to the font outline in pixels.
Must be a number greater or equal to 0.
The maximum text halo width is 1/4 of the font size.
Default |
ignore |
Specifies if the other symbols are allowed to collide with the text.
If true, other symbols can be visible even if they collide with the text.
Default |
justify | Text justification options. |
offset | Specifies an offset distance of the icon from its anchor in ems.
Positive values indicate right and down, while negative values indicate left and up.
Default |
opacity | A number between 0 and 1 that indicates the opacity at which the text will be drawn.
Default |
optional | Specifies if the text can be hidden if it is overlapped by another symbol.
If true, icons will display without their corresponding text
when the text collides wit other symbols and the icon does not.
Default |
padding | Size of the additional area around the text bounding box used for detecting
symbol collisions.
Default |
pitch |
Specifies the orientation of the text when the map is pitched. |
radial |
Radial offset of text, in the direction of the symbol's anchor. Useful in combination
with |
rotation | The amount to rotate the text clockwise in degrees.
Default |
rotation |
In combination with the |
size | The size of the font in pixels.
Must be a number greater or equal to 0.
Default |
text |
Specifies the name of a property on the features to use for a text label. |
variable |
List of potential anchor locations, to increase the chance of placing high-priority
labels on the map. The renderer will attempt to place the label at each location,
in order, before moving onto the next label. Use |
Property Details
allowOverlap
Specifies if the text will be visible if it collides with other symbols.
If true, the text will be visible even if it collides with other previously drawn symbols.
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 "center"
.
anchor?: PositionAnchor | DataDrivenPropertyValueSpecification<PositionAnchor>
Property Value
PositionAnchor | DataDrivenPropertyValueSpecification<PositionAnchor>
color
The color of the text.
Default "#000000"
.
color?: string | DataDrivenPropertyValueSpecification<string>
Property Value
string | DataDrivenPropertyValueSpecification<string>
font
The font stack to use for displaying text.
Possible values: "SegoeFrutigerHelveticaMYingHei-Bold"
, "SegoeFrutigerHelveticaMYingHei-Medium"
,
"SegoeFrutigerHelveticaMYingHei-Regular"
, "SegoeUi-Bold"
, "SegoeUi-Light"
, "SegoeUi-Regular"
,
"SegoeUi-SemiBold"
, "SegoeUi-SemiLight"
, "SegoeUi-SymbolRegular"
, "StandardCondensedSegoeUi-Black"
,
"StandardCondensedSegoeUi-Bold"
, "StandardCondensedSegoeUi-Light"
, "StandardCondensedSegoeUi-Regular"
,
"StandardFont-Black"
, "StandardFont-Bold"
, "StandardFont-Light"
, "StandardFont-Regular"
,
"StandardFontCondensed-Black"
, "StandardFontCondensed-Bold"
, "StandardFontCondensed-Light"
,
"StandardFontCondensed-Regular"
.
Default ["StandardFont-Regular"]
.
font?: string[] | DataDrivenPropertyValueSpecification<string[]>
Property Value
string[] | DataDrivenPropertyValueSpecification<string[]>
haloBlur
The halo's fadeout distance towards the outside in pixels.
Must be a number greater or equal to 0.
Default 0
.
haloBlur?: number | DataDrivenPropertyValueSpecification<number>
Property Value
number | DataDrivenPropertyValueSpecification<number>
haloColor
The color of the text's halo, which helps it stand out from backgrounds.
Default "rgba(0,0,0,0)"
.
haloColor?: string | DataDrivenPropertyValueSpecification<string>
Property Value
string | DataDrivenPropertyValueSpecification<string>
haloWidth
The distance of the halo to the font outline in pixels.
Must be a number greater or equal to 0.
The maximum text halo width is 1/4 of the font size.
Default 0
.
haloWidth?: number | DataDrivenPropertyValueSpecification<number>
Property Value
number | DataDrivenPropertyValueSpecification<number>
ignorePlacement
Specifies if the other symbols are allowed to collide with the text.
If true, other symbols can be visible even if they collide with the text.
Default false
.
ignorePlacement?: boolean
Property Value
boolean
justify
Text justification options.
"auto"
: The text is aligned towards the anchor position.
"left"
: The text is aligned to the left.
"center"
: The text is centered.
"right"
: The text is aligned to the right.
Default "center"
.
justify?: "auto" | "left" | "center" | "right"
Property Value
"auto" | "left" | "center" | "right"
offset
Specifies an offset distance of the icon from its anchor in ems.
Positive values indicate right and down, while negative values indicate left and up.
Default [0, 0]
.
offset?: Pixel | DataDrivenPropertyValueSpecification<Pixel>
Property Value
opacity
A number between 0 and 1 that indicates the opacity at which the text will be drawn.
Default 1
.
opacity?: number | DataDrivenPropertyValueSpecification<number>
Property Value
number | DataDrivenPropertyValueSpecification<number>
optional
Specifies if the text can be hidden if it is overlapped by another symbol.
If true, icons will display without their corresponding text
when the text collides wit other symbols and the icon does not.
Default false
.
optional?: boolean
Property Value
boolean
padding
Size of the additional area around the text bounding box used for detecting
symbol collisions.
Default 2
.
padding?: number | PropertyValueSpecification<number>
Property Value
number | PropertyValueSpecification<number>
pitchAlignment
Specifies the orientation of the text when the map is pitched.
"auto"
: Automatically matches the value of rotationAlignment
.
"map"
: The text is aligned to the plane of the map.
"viewport"
: The text is aligned to the plane of the viewport.
Default: "auto"
pitchAlignment?: "auto" | "map" | "viewport"
Property Value
"auto" | "map" | "viewport"
radialOffset
Radial offset of text, in the direction of the symbol's anchor. Useful in combination
with variableAnchor
, which defaults to using the two-dimensional offset
if present.
Default: 0
radialOffset?: number | DataDrivenPropertyValueSpecification<number>
Property Value
number | DataDrivenPropertyValueSpecification<number>
rotation
The amount to rotate the text clockwise in degrees.
Default 0
rotation?: number | DataDrivenPropertyValueSpecification<number>
Property Value
number | DataDrivenPropertyValueSpecification<number>
rotationAlignment
In combination with the placement
property of the SymbolLayerOptions
,
specifies the rotation behavior of the individual glyphs forming the text.
"auto"
: When the placement
is set to "point"
, this is equivalent to "map"
.
When the placement
is set to "line"
this is equivalent to "map"
.
"map"
: When the placement
is set to "point"
, aligns text east-west.
When the placement
is set to "line"
, aligns text x-axes with the line.
"viewport"
: Produces glyphs whose x-axes are aligned with the x-axis of the viewport,
regardless of the value of placement
.
Default: "auto"
rotationAlignment?: "auto" | "map" | "viewport"
Property Value
"auto" | "map" | "viewport"
size
The size of the font in pixels.
Must be a number greater or equal to 0.
Default 16
.
size?: number | DataDrivenPropertyValueSpecification<number>
Property Value
number | DataDrivenPropertyValueSpecification<number>
textField
Specifies the name of a property on the features to use for a text label.
textField?: string | DataDrivenPropertyValueSpecification<string>
Property Value
string | DataDrivenPropertyValueSpecification<string>
variableAnchor
List of potential anchor locations, to increase the chance of placing high-priority
labels on the map. The renderer will attempt to place the label at each location,
in order, before moving onto the next label. Use justify: "auto"
to choose text
justification based on anchor position. To apply an offset use the radialOffset
or
two-dimensional offset
options.
"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: undefined
variableAnchor?: PositionAnchor[]