Skip to content

Symbol styles

Vector Symbol styles are grouped into the following categories:

This document covers vector style properties. 3D styles are defined by rendering materials — see the material reference.

marker style properties

marker style properties fall into the following categories:

  • Basic properties: the most commonly used icon style properties
  • Vector icons: style properties adjustable for vector icons
  • Alignment: how the icon aligns with its coordinate point
  • Placement: whether and how icons are placed along a line
  • Collision detection: related settings
  • 3D perspective: related properties
  • Text fit: style properties that auto-fit the icon width and height to its text
CategoryProperties
Basic propertiesmarkerFile, markerOpacity, markerWidth, markerHeight, markerDx, markerDy, markerRotation
AlignmentmarkerVerticalAlignment, markerHorizontalAlignment, markerRotationAlignment, markerPitchAlignment
PlacementmarkerPlacement*, markerSpacing, mergeOnProperty
Collision detectionmarkerAllowOverlap, markerIgnorePlacement
3D perspectivemarkerPerspectiveRatio*
Text fitmarkerTextFit, markerTextFitPadding
Vector iconsmarkerType, markerFill, markerFillPatternFile, markerFillOpacity, markerLineColor, markerLineWidth, markerLineOpacity, markerLineDasharray, markerLinePatternFile

NOTE

Properties whose names carry an asterisk (*) do not support function-type.


markerFile

Default: null

String — the icon's URL, either a url or a base64 string.


markerOpacity

Default: 1

Number — icon opacity, range 0-1.


markerWidth

Default: 15

Number — icon width, range 0-254.


markerHeight

Default: 15

Number — icon height, range 0-254.


markerDx

Default: 0

Number — the icon offset along the screen x-axis, range 0-127.


markerDy

Default: 0

Number — the icon offset along the screen y-axis, range 0-127.


markerRotation

Default: 0

Number — the icon rotation angle in degrees, range 0-360.


markerHorizontalAlignment

Default: middle

String — horizontal alignment of the icon relative to its coordinate point. Options: left, middle, right.


markerVerticalAlignment

Default: middle

String — vertical alignment of the icon relative to its coordinate point. Options: top, middle, bottom.


markerRotationAlignment

Default: null

String — when set to map, the icon rotates automatically with the map rotation.


markerPitchAlignment

Default: null

String — when set to map, the icon tilts automatically with the map pitch.


markerPlacement

Default: point

Does not support function-type.

String — the placement of icons: along a line or at normal point positions. Options: point, line.

When the data is a line and markerPlacement is point, the coordinate of the first endpoint of the line is used.

When the data is a line and markerPlacement is line, a coordinate is picked along the line at intervals of markerSpacing.

When the data is a polygon and markerPlacement is point, the pole of inaccessibility of the polygon is used, which is guaranteed to be inside the polygon even if it is concave.


markerSpacing

Default: 250

Number — requires markerPlacement to be line. The interval between icons placed along a line, in pixels.


mergeOnProperty

Default: null

String — requires markerPlacement to be line. Whether to merge lines that share the same value of the given property, so that icons placed along the line are drawn more accurately, e.g.:

json
{
  "mergeOnProperty": "road_name"
}

markerAllowOverlap

Default: false

Boolean — requires collision detection to be enabled. Whether this icon is still displayed when it collides with other icons.


markerIgnorePlacement

Default: false

Boolean — requires collision detection to be enabled. Whether other icons are still displayed when they collide with this icon.


markerPerspectiveRatio

Default: true

Does not support function-type.

Boolean — whether to enable 3D perspective, so that icons appear larger when closer and smaller when farther away.


markerTextFit

Default: none

String — requires textName to be set. Whether the icon automatically sizes its height and width to fit the text. Options: both (fit both width and height), width (fit width only), height (fit height only).


markerTextFitPadding

Default: [0, 0, 0, 0]

Number[] — requires text to be set and markerTextFit to be true. A four-element array, in pixels, defining the padding between the icon and the text on its top, right, bottom and left edges, in that order.


markerType

Default: null

String — the vector icon type. Options: ellipse, cross, x, diamond, bar, square, triangle, pin, pie, rectangle.


markerFill

Default: #00f

String|Number[] — requires a valid markerType. The fill color of the vector icon, either a css color value or a normalized four-element array.


markerFillPatternFile

Default: null

String — requires a valid markerType. The pattern image URL for filling the vector icon, either a url or a base64 string.


markerFillOpacity

Default: 1

Number — requires a valid markerType. The fill opacity of the vector icon, range 0-1.


markerLineColor

Default: #000

String|Number[] — requires a valid markerType. The border color of the vector icon, either a css color value or a normalized four-element array.


markerLineWidth

Default: 1

Number — requires a valid markerType. The border width of the vector icon.


markerLineOpacity

Default: 1

Number — requires a valid markerType. The border opacity of the vector icon, range 0-1.


markerLineDasharray

Default: []

Note: per the 2026 source code, the default value is [] (an empty array, i.e. a solid line, matching the maptalks core default); the old documentation wrote 1, which was incorrect.

Number[] — requires a valid markerType. The dashed border style of the vector icon, same as the dash styles supported by the canvas.setLineDash method.


markerLinePatternFile

Default: null

String — requires a valid markerType. The pattern image URL for the vector icon border, either a url or a base64 string.


text style properties

text style properties fall into the following categories:

  • Basic properties: the most commonly used text style properties
  • Text halo: properties related to the text halo
  • Alignment: how the text aligns with its coordinate point
  • Collision detection: related settings
  • 3D perspective: related properties
CategoryProperties
Basic propertiestextName, textSize, textFill, textOpacity, textFaceName, textWeight, textStyle, textRotation, textDx, textDy, textWrapWidth
Text halotextHaloFill, textHaloRadius, textHaloOpacity, textHaloBlur
AlignmenttextHorizontalAlignment, textVerticalAlignment, textRotationAlignment, textPitchAlignment
PlacementtextPlacement*, textSpacing, mergeOnProperty
Collision detectiontextAllowOverlap, textIgnorePlacement
3D perspectivetextPerspectiveRatio*

NOTE

Properties whose names carry an asterisk (*) do not support function-type.


textName

Default: null

String — the text content to display. To display the value of a property, wrap the property name in braces, e.g.:

json
{
  // 用name属性的值作为文字内容
  "textName": "{name}"
}

textSize

Default: 14

Number — the font size.


textFill

Default: [0, 0, 0, 1]

Note: per the 2026 source code, the default value is [0, 0, 0, 1] (opaque black, vt create_text_painter DEFAULT_UNIFORMS); the old documentation wrote [0, 0, 0, 0], which was incorrect.

String | Number — the text color, either a css color value or a normalized four-element array.


textOpacity

Default: 1

Number — text opacity, range 0-1.


textFaceName

Default: monospace

String — the font family, same as the CSS font-family definition.


textWeight

Default: normal

Note: per the 2026 source code, the default value is 'normal' (numerically equivalent to 400, the maptalks core TextMarkerSymbolizer default); the old documentation wrote 400.

String — the font weight, same as the CSS font-weight definition.


textStyle

Default: normal

String — the font style, e.g. italic, same as the CSS font-style definition.


textRotation

Default: 0

Number — the text rotation angle in degrees, 0-360.


textDx

Default: 0

Number — the text offset along the screen x-axis, in pixels.


textDy

Default: 0

Number — the text offset along the screen y-axis, in pixels.


textWrapWidth

Default: 240

Number — the wrap width of the text; the text wraps automatically once its length exceeds this value.


textHaloFill

Default: [1, 1, 1, 1]

String | Number[] — the text halo color, either a css color value or a normalized four-element array.


textHaloRadius

Default: 0

Number — the text halo radius.


textHaloOpacity

Default: 1

Number — the text halo opacity, range 0-1.


textHaloBlur

Default: 0

Number — the sharpness of the text halo.


textHorizontalAlignment

Default: middle

String — horizontal alignment of the text relative to its coordinate point. Options: left, middle, right.


textVerticalAlignment

Default: middle

String — vertical alignment of the text relative to its coordinate point. Options: top, middle, bottom.


textRotationAlignment

Default: null

String — when set to map, the text rotates automatically with the map rotation.


textPitchAlignment

Default: null

String — when set to map, the text tilts automatically with the map pitch.


textPlacement

Default: point

Does not support function-type.

String — the placement of text: along a line or at normal point positions. Options: point, line. With the icon render plugin, if markerPlacement is set, it overrides this value.

When the data is a line and textPlacement is point, the coordinate of the first endpoint of the line is used.

When the data is a line and textPlacement is line, a coordinate is picked along the line at intervals of textSpacing.

When the data is a polygon and textPlacement is point, the pole of inaccessibility of the polygon is used, which is guaranteed to be inside the polygon even if it is concave.


textSpacing

Default: 250

Number — requires textPlacement to be line. The interval between text placed along a line, in pixels. With the icon render plugin, if markerSpacing is set, it overrides this value.


mergeOnProperty

Default: null

String — requires textPlacement to be line. Whether to merge lines that share the same value of the given property, so that text placed along the line is drawn more accurately, e.g.:

json
{
  "mergeOnProperty": "road_name"
}

textAllowOverlap

Default: false

Boolean — requires collision detection to be enabled. Whether this text is still displayed when it collides with other text.


textIgnorePlacement

Default: false

Boolean — requires collision detection to be enabled. Whether other text is still displayed when it collides with this text.


textPerspectiveRatio

Default: 0

Does not support function-type.

Number — the perspective ratio of the text, range 0-1. 0 disables 3D perspective (the default); the larger the value, the stronger the near-larger-far-smaller effect (the vt create_text_painter default uniform is 0, and it defaults to 1 when textPlacement is line).

Note: the old documentation described textPerspectiveRatio as a Boolean with a default of true; in the 2026 source code it is a numeric ratio from 0-1 with a default of 0 (2026 cross-check).


line style properties


lineColor

Default: #fff

Note: per the 2026 source code, the default value is white #fff (the vt LinePainter sets the default line color to white so it composites correctly with linePattern — see the source comments); the old documentation wrote #000.

String | Number[] — the line color, either a css color value or a normalized four-element array.


lineWidth

Default: 2

Number — line width, range 0-127.


lineOpacity

Default: 1

Number — line opacity, range 0-1.


lineJoin

Default: miter

String — the join style of the line. Options: miter, round, bevel.


lineCap

Default: butt

String — the cap style of the line. Options: butt, round, square.


lineDx

Default: 0

Number — the line offset along the screen x-axis, in pixels, range -128 - 127.


lineDy

Default: 0

Number — the line offset along the screen y-axis, in pixels, range -128 - 127.


lineStrokeWidth

Default: 0

Number — the stroke width of the line, range 0-127.


lineStrokeColor

Default: [0, 0, 0, 0]

Note: per the 2026 source code, the default value is [0, 0, 0, 0] (transparent, i.e. no stroke is drawn by default); the old documentation wrote #000.

String | Number[] — the stroke color of the line, either a css color value or a normalized four-element array.


linePatternFile

Default: null

String — the pattern image of the line, either a url or a base64 string.


lineJoinPatternMode

Default: 0

Number — the pattern fill mode at lineJoin. When 0, the pattern texture is drawn continuously across the join; when 1, the color of the first pixel of the image is used.

Note: lineJoinPatternMode no longer exists in the 2026 source code (grep of the whole vt package repository); it is a legacy property that no longer takes effect (2026 cross-check).


linePatternGap

Default: 0

Number — the gap between pattern images, as a multiple of the pattern image width. For example, a value of 1 means the gap between two adjacent images equals the image width.


linePatternAnimSpeed

Default: 0

Number — the animation speed, range -5 to 5. A negative value reverses the animation direction.

Note: the "line animation" illustration (assets/line-animation.gif) from the original documentation is missing in the migration source and has not been included (2026 cross-check).


lineDasharray

Default: [0, 0, 0, 0]

Number[] — the dash style of the line, a four-element array in pixels. Similar to canvas setLineDash, but only four elements are supported.


lineDashColor

Default: [0, 0, 0, 0]

String | Number[] — the color of the line dashes, either a css color value or a normalized four-element array.

polygon style properties


polygonFill

Default: #fff

String | Number[] — the fill color of the polygon, either a css color value or a normalized four-element array.


polygonOpacity

Default: 1

Number — the fill opacity of the polygon, range 0-1.


polygonPatternFile

Default: null

String — the pattern image of the polygon, either a url or a base64 string.


uvScale

Default: [1, 1]

Number[] — the texture scale, a two-element array.


uvOffset

Default: [0, 0]

Note: the uvOffset default has been adjusted to [0, 0] per the 2026 source code (FillPainter DEFAULT_UNIFORMS / PolygonLayer default); the old documentation wrote [0, 1].

Number[] — a two-element array: the texture offset. 0 means no offset, 1 means an offset equal to the image size; e.g. 0.5 offsets the texture by half the image.

New in 2026

The following symbol properties are newly added or supplemented in the 2026 source code (@maptalks/gl-layers vt package) and were not covered by the old documentation:

WaterSymbol (water render plugin)

Used by the water render plugin (realistic water), added in the 2026 source code:

PropertyTypeDescription
ssrBooleanScreen-space reflections
texWaveNormalStringWave normal texture
texWavePerturbationStringWave perturbation texture
waterBaseColorNumber[]Water base color
contrastNumberContrast
hsvNumber[]HSV adjustment
uvScaleNumberUV scale
animationBooleanWave animation
waterSpeedNumberWater flow speed
waterDirectionNumberWater flow direction

Note: water symbol defaults (2026 source code WaterPainter): ssr defaults to false, texWaveNormal / texWavePerturbation default to null, waterBaseColor defaults to [0.1451, 0.2588, 0.4863, 1], contrast defaults to 1, hsv defaults to [0, 0, 0], uvScale defaults to 3, animation defaults to false, waterSpeed defaults to 1, waterDirection defaults to 0.

LitSymbol (lit render plugin)

The symbol of the lit render plugin (PBR material 3D rendering), added in the 2026 source code:

PropertyTypeDescription
bloomBooleanWhether to enable bloom glow
ssrBooleanScreen-space reflections
polygonOpacityNumberPolygon opacity
materialObjectPBR material (LitMaterial); see the material reference for its fields

PolygonLayer / ExtrudePolygonLayer additions

  • uvOffsetInMeter (Boolean, default false): whether the uv offset is measured in meters.
  • polygonPatternFileWidth / polygonPatternFileHeight / polygonPatternFileOrigin: the width, height and origin settings of the fill texture.
  • polygonPatternUV: uv control of the fill texture.
  • Top/bottom face colors of ExtrudePolygonLayer: topPolygonFill and bottomPolygonFill (default [1, 1, 1, 1]).

This document has been cross-checked against the @maptalks/gl-layers 2026 source code (api-notes-vt-gl.md)