Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface Style

The Style object defines how certain features should be rendered. A style object must always contain the attributes "zIndex" and "type" as well as the mandatory attributes of the corresponding "type":

  • Circle: "radius" must be included and either "fill" or "stroke" should be included.
  • Rect: "width" must be included and "height" will be set with the same value as "width" if only "width" is present. Either "fill" or "stroke" should be included
  • Text: "text" or "textRef" should be included and "fill" or "stroke" should also be included for text color
  • Image: "src" and "width" must be included. "height" will be set with the same value as "width" if only "width" is present.
  • Line: "stroke" must be included.
  • Polygon: "fill" or "stroke" must be included.
  • Box: "width" must be included, while "height" and "depth" will be set with the same value as "width" if only "width" is present. Either "fill" or "stroke" should be included
  • Sphere: A style of type Sphere must include "radius" and "fill".
  • VerticalLine: "stroke" must be included.
example
// example of Circle:
{zIndex: 0, type: "Circle", radius: 16, fill: "#FFFF00"}

// example of Rect:
{zIndex: 0, type: "Rect", fill: "#4C9EEF", stroke: "#0156BB", width: 20, height: 20}

// example of Text:
{zIndex:1, type: "Text", fill: "#FFFFFF", text: "HERE", font: "normal 12px Arial"}

// example of Image:
{zIndex: 0, type: "Image", src: "./xyz.png", width: 20, height: 20}

// example of Line:
{zIndex: 0, type: "Line", opacity: 0.5, stroke: "#BE6B65", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 16}

// example of Polygon:
{zIndex: 0, type: "Polygon", opacity: 0.5, stroke: "#BE6B65", fill: "#FFFFFF"}

// example of Box:
{zIndex: 0, type: "Box", width: 16, height: 16, depth: 16, stroke: "#BE6B65", fill: "#FFFFFF"}

// example of Sphere:
{zIndex: 0, type: "Sphere", radius: 16, fill: "#FFFFFF"}

Hierarchy

  • Style

Index

Properties

Optional alignment

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

Alignment for styles of type "Circle", "Rect", "Image" and "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> | StyleExpression<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. This attribute is valid for styles of type "Rect", "Image", "Text", "Circle", "Line", "Box" or "Sphere".

defaultvalue

false

experimental

Optional anchor

anchor: "Line" | "Coordinate" | "Centroid" | "Center" | StyleValueFunction<string> | StyleZoomRange<string> | StyleExpression<string>

Sets the anchor point for styles of type "Circle", "Rect", "Image" and "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", while "Coordinate" is the default for styles of type "Circle", "Rect" or "Image".

Optional checkLineSpace

checkLineSpace: boolean | StyleValueFunction<boolean> | StyleZoomRange<boolean> | StyleExpression<boolean>

Enable or disable the space check for point styles on line geometries. Only applies to "Circle", "Rect", "Image" and "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> | StyleExpression<boolean>

Enable or disable collision detection. Works for styles of type "Circle", "Rect", "Image" and "Text". 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 for "Text", true for all other.

Optional collisionGroup

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

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

Optional depth

depth: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<number>

The depth of the style in pixels. The depth defines the length of the edges of a "Box" parallel to the Z axis. The unit of depth is defined in pixels and only required by styles of type "Box".

example
// define a Box that has a width, height and depth of 16px
{
    zIndex: 0,
    type: "Box",
    stroke: "blue",
    fill: "red",
    width: 16,
    height: 16,
    depth: 16
}

Optional emissive

Sets the emissive color of the feature, giving it a glow effect.

This property is only applicable for Styles of type "Polygon", "Box", "Sphere" or "Model";

see

Color for a detailed list of possible supported formats.

Optional extrude

extrude: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<number>

Extrude a Polygon or MultiPolygon geometry in meters. This attribute is validate for styles of type "Polygon" only.

Optional extrudeBase

extrudeBase: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<number>

The base of the Extrude in meters. The extrudeBase is defined from the ground to the bottom of the extruded Polygon in meters. The extrudeBase must be less or equal then extrude. This attribute applies only to styles of type "Polygon".

defaultvalue

0

Optional fill

Sets the color to fill the shape. This attribute is valid for Circle, Rect, Text and Polygon.

see

Color for a detailed list of possible supported formats.

Optional fillIntensity

fillIntensity: number

Controls the intensity of the fill color under directional lighting.

fillIntensity determines how much the feature's fill color is affected by the directional lighting in the scene. A higher value increases the intensity of the fill color, making it more vibrant under strong lighting, while a lower value reduces the effect, resulting in a more muted color.

This property is only applicable for Styles of type "Polygon", "Box" or "Sphere";

The value should range from 0 to 1, where 0 means no color intensity and 1 represents full intensity.

defaultvalue

1

Optional filter

filter: StyleValueFunction<boolean> | StyleExpression<boolean>

Sets the condition(s) to determine whether a feature should be rendered with the respective style. The filter expression is evaluated to determine if the respective style should be applied to a feature. It must resolve to a boolean value where true means the style applies and false means it does not.

This property is only used when LayerStyle.assign is not defined; otherwise, filter is ignored.

example

// Render features where the "type" property is equal to "park" filter: ['==', ['get', 'type'], 'park']

example

// Render features where the "population" property is greater than 1000 filter: ['>', ['get', 'population'], 1000]

example

// Render features where the "type" property is "park" and "population" is less than 500 filter: ['all', ['==', ['get', 'type'], 'park'], ['<', ['get', 'population'], 500]]

example

// Render features where the "type" property is not "residential" filter: ['!=', ['get', 'type'], 'residential']

example

// Render features where the "type" property is either "park" or "garden" filter: ['any', ['==', ['get', 'type'], 'park'], ['==', ['get', 'type'], 'garden']]

Optional font

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

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

defaultvalue

“normal 12px Arial”

Optional from

from: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<number>

Define the starting position of a segment of the entire line in %. A Segment allows to display and style parts of the entire line individually. The value must be between 0 and 1. The Default is 0.

example

from: 0.0 // -> 0%, the segment has the same starting point as the entire line from: 0.5 // -> 50%, the segment starts in the middle of the entire line

Optional height

height: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<number>

Height of the style in pixels. It is only required by Rect and Image. The maximum supported height for "Image" is 64 pixels. The unit of height is defined in pixels. For styles of type "Rect" the height can also be defined in meters by using a string: "${width}m".

example
// define a Rect that has a width of 2 meter and a height of 1 meter.
{
    zIndex: 0,
    type: "Line",
    stroke: "blue",
    width: "2m",
    height: "1m"
}
example
// define a Rect that has a width of 20 pixel and a height of 28 pixel.
{
    zIndex: 0,
    type: "Line",
    stroke: "green",
    width: 20,
    height: 28
}
example
// define a Image/Icon style with/height of 32pixel
{
    zIndex: 0,
    type: "Image",
    src: "urlToMyImageResource",
    width: 32
}

Optional light

light: string

Specifies the name of the light group to use for illuminating specific features on a layer. This property must reference a key corresponding to a light group defined in LayerStyle.lights. A light group consists of lighting sources such as ambient or directional lights that affect the appearance of features.

If light is not defined, the default light group "defaultLight" will be used to illuminate the layer's features.

see

LayerStyle.lights for defining and referencing available light groups.

defaultvalue

"defaultLight"

Optional lineWrap

lineWrap: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<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 offset

offset: number | string | StyleValueFunction<number | string> | StyleZoomRange<number | string> | StyleExpression<number | string>

Offset a line to the left or right side in pixel or meter. A positive values offsets to the right side, a negative value offsets to the left. The side is defined relative to the direction of the line geometry. The default unit is pixels. To define the offset in meters a string that contains the offset value and ends with "m" must be used. Applies to Line style only.

example
// offset line by 8px
{ type: "Line", zIndex: 0, stroke:'blue', strokeWidth: 4, offset: 8}

// offset line by 2m
{ type: "Line", zIndex: 0, stroke:'blue', strokeWidth: 4, offset: "2m"}

Optional offsetX

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

Offset the shape in pixels on x-axis. It is valid for Circle, Rect, Text, Image, Box and Sphere. A positive value offsets to the right, a negative value to the left. The default unit is pixels.

example
// offset Image by 8px to the right.
{ type: "Image", zIndex: 0, src: '...', offsetX: 8}

// offset Circle by 1m to the left
{ type: "Circle", zIndex: 0, fill:'blue', radius: 4, offsetX: "-1m"}

Optional offsetY

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

Offset the shape in pixels on y-axis. It is valid for Circle, Rect, Text, Image, Box and Sphere. A positive value offsetY offsets downwards, a negative value upwards. The default unit is pixels.

example
// offset Image by 8px to the bottom
{ type: "Image", zIndex: 0, src: '...', offsetY: 8}

// offset Circle by 1m to the top
{ type: "Circle", zIndex: 0, fill:'blue', radius: 4, offsetY: "-1m"}

Optional offsetZ

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

Offset the shape in pixels on z-axis. It is valid for Circle, Rect, Text, Image, Box and Sphere. A positive value offsets up, a negative value down. The default unit is pixels.

example
// offset Image by 8px to the top.
{ type: "Image", zIndex: 0, src: '...', offsetZ: 8}

// offset Circle by 1m to the top
{ type: "Circle", zIndex: 0, fill:'blue', radius: 4, offsetZ: "1m"}

Optional opacity

opacity: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<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> | StyleExpression<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 radius

radius: number | string | StyleValueFunction<number | string> | StyleZoomRange<number | string> | StyleExpression<number | string>

The Radius of the Circle and Sphere. It is required by styles of type "Circle" and "Sphere". The default unit is pixels. To define the radius of a Circle in meters a string can be used: "${width}m". The radius of "Sphere" must be defined in pixels.

example
// define a Sphere with a radius of 32 pixel.
{
    zIndex: 0,
    type: "Sphere",
    fill: "red",
    radius: 32
}
example
// define a Circle with a radius of 1 meter
{
    zIndex: 0,
    type: "Circle",
    fill: "red",
    radius: "1m"
}
// define a Circle with a radius of 16 pixel
{
    zIndex: 0,
    type: "Circle",
    fill: "red",
    radius: 16
}

Optional repeat

repeat: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<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> | StyleExpression<number>

Rotate the shape of the style to the angle in degrees. This attribute is validate for Rect and Image.

Optional scaleByAltitude

scaleByAltitude: boolean | StyleValueFunction<boolean> | StyleZoomRange<boolean> | StyleExpression<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, 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 shininess

shininess: number

Sets the shininess of the feature, determining how glossy its surface appears. A higher value makes the polygon surface more reflective.

This property is only applicable for Styles of type "Polygon", "Box", "Sphere" or "Model";

Relationship with Specular

  • Effect: The shininess value controls the size and intensity of the specular highlight, which is colored by the specular property.
  • Specular Dependency: The shininess property enhances the effect of the specular color. If specular is not set, shininess has no visible effect.

Shininess Value Range and Effect

  • Range: The shininess value typically ranges from 0 to 128.
  • Low Values (0-10): Produce a wide, diffused highlight, resulting in a matte or dull appearance.
  • High Values (50-128): Produce a small, intense highlight, resulting in a glossy or shiny appearance.
defaultvalue

32

Optional specular

Sets the specular color of the feature, affecting how it reflects light.

This property is only applicable for Styles of type "Polygon", "Box", "Sphere" or "Model";

Relationship with Shininess

  • Effect: The specular property determines the color of the light reflection, while the shininess value controls the intensity and size of the reflection.
  • Shininess Dependency: If specular is set and shininess is not explicitly set, the default shininess value will be used to control the reflection's appearance.
see

Color for a detailed list of possible supported formats.

Optional src

src: string | StyleValueFunction<string> | StyleZoomRange<string> | StyleExpression<string>

Specifies the URL of an image. It can be either absolute or relative path. It is only required by "Image".

Optional stroke

Sets the stroke color of the shape. This attribute is valid for Circle, Rect, Line, Text and Polygon.

see

Color for a detailed list of possible supported formats.

Optional strokeDasharray

strokeDasharray: (number | string)[] | StyleValueFunction<(number | string)[]> | StyleZoomRange<(number | string)[]> | StyleExpression<(number | string)[]> | "none"

The strokeDasharray attribute controls the pattern of dashes and gaps used to stroke paths. It's an array of that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2. The size of dashes and gaps can be defined in pixel or meter. The default unit for dash and gap size is pixel. In a pattern utilizing both meter and pixel units, only the initial "dash" and "gap" combination is utilized, with the subsequent ones being skipped. To define the size in meters, a string containing the "dash"/"gap" size and ending with "m" must be used. This attribute is valid for Line and Polygon styles only.

example

// dash and gap size is defined in pixel. strokeDasharray: [20,10] // dash and gap size is defined in meter. strokeDasharray: ["20m","10m"] // dash -> 10 meter, gap -> 10 pixel. strokeDasharray: ["20m",10] || ["20m","10px"]

Optional strokeLinecap

strokeLinecap: string | StyleValueFunction<string> | StyleZoomRange<string> | StyleExpression<string>

This controls the shape of the ends of lines. there are three possible values for strokeLinecap:

  • "butt" closes the line off with a straight edge that's normal (at 90 degrees) to the direction of the stroke and crosses its end.
  • "square" has essentially the same appearance, but stretches the stroke slightly beyond the actual path. The distance that the stroke goes beyond the path is half the strokeWidth.
  • "round" produces a rounded effect on the end of the stroke. The radius of this curve is also controlled by the strokeWidth. This attribute is valid for Line styles only.

If "strokeLinecap" is used in combination with "altitude", only "butt" is supported for "strokeLinecap".

Optional strokeLinejoin

strokeLinejoin: string | StyleValueFunction<string> | StyleZoomRange<string> | StyleExpression<string>

The joint where the two segments in a line meet is controlled by the strokeLinejoin attribute, There are three possible values for this attribute:

  • "miter" extends the line slightly beyond its normal width to create a square corner where only one angle is used.
  • "round" creates a rounded line segment.
  • "bevel" creates a new angle to aid in the transition between the two segments. This attribute is valid for Line styles only.

If "strokeLinejoin" is used in combination with "altitude", the use of "round" is not supported.

Optional strokeWidth

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

Sets the width of the stroke. This attribute is valid for Circle, Rect, Line, Text and Polygon. The unit of strokeWidth is defined in pixels. For Polygons that are using extrude, the maximum possible strokeWidth is 1.0 pixel. For Styles of type Line the strokeWidth can also be defined in meters by using a string: "${width}m".

example
// define a Line that has a with of 1 meter
{
    zIndex: 0,
    type: "Line",
    stroke: "blue",
    strokeWidth: "1m"
}
// define a Line that has a with of 16 pixel
{
    zIndex: 0,
    type: "Line",
    stroke: "green",
    strokeWidth: "16
}
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> | StyleExpression<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 textRef

textRef: string | StyleValueFunction<string> | StyleZoomRange<string> | StyleExpression<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 featurre
...
textRef: "id"

Optional to

to: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<number>

Define the end position of a segment of the entire line in %. A Segment allows to display and style parts of the entire line individually. The value must be between 0 and 1. The Default is 1.

example

to: 0.5 // -> 50%, the segment ends in the middle of the entire line to: 1.0 // -> 100%, the segment has the same end point as the entire line

type

type: "Circle" | "Rect" | "Image" | "Text" | "Line" | "Polygon" | "VerticalLine" | "Box" | "Sphere" | string

Indicates type of the shape to render. Its value must be one of the following: "Circle", "Rect", "Text", "Image", "Line", "Polygon", "VerticalLine", "Box" or "Sphere",

Optional width

width: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<number>

Width of the style in pixels. It is only required by Rect, Image and Box. The maximum supported width for "Image" is 64 pixels. The unit of width is defined in pixels. For styles of type "Rect" the width can also be defined in meters by using a string: "${width}m".

example
// define a Rect that has a width (and height) of 2.2 meter
{
    zIndex: 0,
    type: "Line",
    stroke: "blue",
    width: "2.2m"
}
example
// define a Rect that has a width (and height) of 16 pixel
{
    zIndex: 0,
    type: "Line",
    stroke: "green",
    width: 16
}

zIndex

zIndex: number | StyleValueFunction<number> | StyleZoomRange<number> | StyleExpression<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> | StyleExpression<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, it will fall back to the LayerStyle.zLayer or depend on the display layer order. If no zLayer is defined, it will fall back to the LayerStyle.zLayer or depend 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