PolygonStyle | XYZ Maps Documentation

Interface for configuring the visual appearance of Polygons.

Hierarchy

PolygonStyle

Index

Properties

Optional altitude

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 emissive

emissive: Color | StyleValueFunction<Color> | StyleZoomRange<Color> | StyleExpression<Color>

Sets the emissive color of the extruded polygon, giving it a glow effect. This property is only applicable when the polygon is extruded.

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.

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.

defaultvalue: 0

Optional fill

fill: Color | StyleValueFunction<Color> | StyleZoomRange<Color> | StyleExpression<Color>

Sets the color to fill the 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 polygon'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.

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

defaultvalue: 1

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 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 offset

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 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 shininess

shininess: number

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

This property is only applicable when the polygon is extruded.

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

specular: Color | StyleValueFunction<Color> | StyleZoomRange<Color> | StyleExpression<Color>

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

This property is only applicable when the polygon is extruded.

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 stroke

stroke: Color | StyleValueFunction<Color> | StyleZoomRange<Color> | StyleExpression<Color>

Sets the stroke color of the polygon.

see: Color for a detailed list of possible supported formats.

Optional strokeDasharray

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.

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

Sets the width of the stroke of the polygon (outline). 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 red colored polygon with a 2 pixel blue stroke (outline).
{
    zIndex: 0,
    type: "Line",
    fill: "red",
    stroke: "blue",
    strokeWidth: 2
}

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: "Polygon"

Specifies the type of style to render.

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. 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}