Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface TextStyle

Interface for configuring the visual appearance of Text.

Hierarchy

  • TextStyle

Index

Properties

Optional alignment

alignment: "map" | "viewport" | StyleValueFunction<string> | StyleZoomRange<string>

Alignment for styles of type "Text". Possible values are: "map" and "viewport". "map" aligns to the plane of the map and "viewport" aligns to the plane of the viewport/screen. Default alignment for Text based on point geometries is "viewport" while "map" is the default for line geometries.

Optional altitude

altitude: number | boolean | StyleValueFunction<number | boolean> | StyleZoomRange<number | boolean>

The altitude of the style in meters. The altitude defines the distance in the vertical direction between the ground plane at 0 meters and the geometry/style. If altitude is set to true, the altitude from the feature's geometry coordinates will be used automatically. If a number is set for altitude, the altitude of the feature's geometry is ignored and the value of "altitude" is used instead. The height must be defined in meters.

defaultvalue

false

experimental

Optional anchor

anchor: "Line" | "Coordinate" | "Centroid" | "Center"

Sets the anchor point for styles of type "Text" used with Line or Polygon geometry.

Possible values for Line geometry are "Coordinate" and "Line".

  • "Coordinate": the respective style is displayed at each coordinate of the polyline.
  • "Line": the respective style is displayed on the shape of the polyline when there is enough space. See checkLineSpace to disable the space check.

Possible values for Polygon geometry are "Center" and "Centroid".

  • "Center": the center of the bounding box of the polygon.
  • "Centroid": the geometric centroid of the polygon geometry.
defaultvalue

For Polygon geometry the default is "Center". For Line geometry the default for styles of type "Text" is "Line".

Optional checkLineSpace

checkLineSpace: boolean

Enable or disable the space check for point styles on line geometries. Only applies to "Text" styles with anchor set to "Line". If check checkLineSpace is enabled the respective style is only displayed if there is enough space on the line, otherwise it is not displayed.

defaultvalue

true

Optional collide

collide: boolean | StyleValueFunction<boolean> | StyleZoomRange<boolean>

Enable or disable collision detection. If the collision detection is enabled for multiple Styles within the same StyleGroup, the respective Styles are handled as a single Object ("CollisionGroup") where the combined bounding-box is determined automatically.

  • true: collision are allowed, Collision detection is disabled.
  • false: avoid collisions, Collision detection is enabled.
defaultvalue

false

Optional collisionGroup

collisionGroup: string | StyleValueFunction<string> | StyleZoomRange<string>

Enables collision detection and combines all styles of a StyleGroup with the same "CollisionGroup" into a single logical object for collision detection.

Optional fill

Sets the color to fill the text.

see

Color for a detailed list of possible supported formats.

Optional font

font: string | StyleValueFunction<string> | StyleZoomRange<string>

CSS font string for texts. It is only valid for Text.

defaultvalue

“normal 12px Arial”

Optional lineWrap

lineWrap: number | StyleValueFunction<number> | StyleZoomRange<number>

Enable oder Disable line wrapping for styles of type "Text". The line wrapping for text on (Multi)Linestring geometry with anchor set to "Line" is disabled by default, otherwise it's 14 characters.

  • number: Maximum number of characters per line [Default 14 characters]
  • false: disable line wrapping
  • true: enable line wrapping [Default 14 characters]
defaultvalue

14

Optional offsetX

offsetX: number | string | StyleValueFunction<number | string> | StyleZoomRange<number | string>

Offset the text in pixels on x-axis. A positive value offsets to the right, a negative value to the left. The default unit is pixels.

example
// offset Text by 1m to the left
{ type: "Text", zIndex: 0, fill:'blue', offsetX: "-1m", text: 'XYZ'}

Optional offsetY

offsetY: number | StyleValueFunction<number> | StyleZoomRange<number>

Offset the text in pixels on y-axis. A positive value offsetY offsets downwards, a negative value upwards. The default unit is pixels.

example
// offset Text by 1m to the left
{ type: "Text", zIndex: 0, fill:'blue', offsetY: "-1m", text: 'XYZ'}

Optional offsetZ

offsetZ: number | string | StyleValueFunction<number | string> | StyleZoomRange<number | string>

Offset the text in pixels on z-axis. A positive value offsets up, a negative value down. The default unit is pixels.

example
// offset Text by 1m to the top
{ type: "Text", zIndex: 0, fill:'blue', text: 'XYZ', offsetZ: "1m"}

Optional opacity

opacity: number | StyleValueFunction<number> | StyleZoomRange<number>

Defines the opacity of the style. The value must be between 0.0 (fully transparent) and 1.0 (fully opaque). It is valid for all style types.

defaultvalue

1

Optional priority

priority: number | StyleValueFunction<number> | StyleZoomRange<number>

In case of label collision, Text with a higher priority (lower value) will be drawn before lower priorities (higher value). If the collision detection is enabled for multiple Styles within the same StyleGroup, the highest priority (lowest value) is used.

Optional repeat

repeat: number | StyleValueFunction<number> | StyleZoomRange<number>

Minimum distance in pixels between repeated style-groups on line geometries. Applies per tile only.

defaultvalue

256 (pixels)

Optional rotation

rotation: number | StyleValueFunction<number> | StyleZoomRange<number>

Rotate text around it's center in degrees.

Optional scaleByAltitude

scaleByAltitude: boolean | StyleValueFunction<boolean> | StyleZoomRange<boolean>

Scales the size of a style based on the feature's altitude. If it's enabled (true), features closer to the camera will be drawn larger than those farther away. When off (false), the size of the style is always the same size, regardless of its actual altitude, as if it were placed on the ground (altitude 0). This attribute applies to styles of type "Rect", "Image", "Text", "Circle", "Line", "Box", or "Sphere" whose size (width, {@link radius}, strokeWidth) that are using "map" alignment only. If the size attribute is defined in meters, scaleByAltitude is enabled by default, for pixels it is disabled.

defaultvalue

false (pixels), true (meters)

experimental

Optional stroke

Sets the stroke color of the text (outline).

see

Color for a detailed list of possible supported formats.

Optional strokeWidth

strokeWidth: number | string | StyleValueFunction<number | number> | StyleZoomRange<string | number>

Sets the width of the stroke (outline) to display the text with. The unit of strokeWidth is defined in pixels.

example
// define a Text style with a strokeWidth of 8px
{
    zIndex: 0,
    type: "Text",
    text: "doc",
    fill: "white",
    stroke: "black,
    strokeWidth: 8
}

Optional text

text: string | number | boolean | StyleValueFunction<string | number | boolean> | StyleZoomRange<string | number | boolean>

Text is either a string or a function that generates the string that should be displayed. It is valid for Text style only.

example
// display the name property of a feature in uppercase
...
text: function(feature){
  return feature.properties.name.toUpperCase();
}

Optional textAnchor

textAnchor: "Left" | "Center" | "Right" | "Top" | "TopLeft" | "TopRight" | "Bottom" | "BottomLeft" | "BottomRight"

The "textAnchor" attribute is used to align the text relative to the anchor point.

Possible values:

  • "Left": The text is aligned left to the anchor.
  • "Right": The text is aligned right to the anchor.
  • "Center": The center of the Text is placed at the anchor point.
  • "Top": The top of the Text is placed closest the anchor point.
  • "TopLeft": The top left side of the Text is placed closest the anchor point.
  • "TopRight": The top right side of the Text is placed closest the anchor point.
  • "Bottom": The bottom of the Text is placed closest to the anchor point.
  • "BottomLeft": The bottom left side of the Text is placed closest the anchor point.
  • "BottomRight": The bottom right side of the Text is placed closest the anchor point.
defaultvalue

"Center"

Optional textRef

textRef: string | StyleValueFunction<string> | StyleZoomRange<string>

"textRef" Reference to an attribute of an feature that's value should be displayed as text. If both "text" and "textRef" are set, "text" prevails. It is only required by Text.

example
// display the property "name" of the feature's properties
...
textRef: "properties.name"
example
// display the id of the feature
...
textRef: "id"

type

type: "Text"

Specifies the type of style to render.

zIndex

zIndex: number | StyleValueFunction<number> | StyleZoomRange<number>

Indicates the drawing order within a layer. Styles with larger zIndex value are rendered above those with smaller values. The zIndex is defined relative to the "zLayer" property. If "zLayer" is defined all zIndex values are relative to the "zLayer" value.

Optional zLayer

zLayer: number | StyleValueFunction<number>

Indicates drawing order across multiple layers. Styles using zLayer with a high value are rendered on top of zLayers with a low value. If no zLayer is defined the zLayer depends on the display layer order. The first (lowest) layer has a zLayer value of 1.

example

{...zLayer: 2, zIndex: 5} will be rendered on top of {...zLayer: 1, zIndex: 10}

Generated using TypeDoc