The paint block
Color properties (color, strokeColor) accept a literal color or a @palette shortcut, and strokeColor additionally accepts the smart keyword "auto" — see Colors & palettes. Point layers can be drawn as icons via iconImage — see Icons. For data-driven (categorical, numeric, h3) visualizations, paint properties may be arrays, one value per category/class.
Properties common to all visualization types.
isClickable
boolean
true
Optional. A flag to tell if features should be clickable
isHoverable
boolean
false
Optional. A flag to tell if features should be hoverable
isSandwiched
boolean
false
Optional. A flag to tell if features affected by this visualization need to be rendered below the basemap road and water layers. Only applies to polygon features, point and line features are already rendered on top of the basemap
maxZoom
number
24
Optional. The maximum zoom level at which the visualization will be shown
minZoom
number
0
Optional. The minimum zoom level at which the visualization will be shown
renderAsLines
boolean
false
Optional. Decides if a polygon dataset should be rendered as lines thus making them render above the basemap. Note that using this requires that the style uses line properties instead of polygon ones.
Simple visualizations
The following properties are available for the simple type of visualization
dashArray
number[]
Lines
Optional. The dash line definition — an array of dash/gap lengths with an even number of entries, e.g. [2, 1]
highlightColor
string
Points, lines and polygons
Optional. The color to be used when a feature is selected
highlightStrokeColor
string
Points, lines and polygons
Optional. The stroke color to be used when a feature is selected
highlightStrokeWidth
number | Interpolator
Points and polygons
Optional. The stroke width when a feature is selected
lineCap
"butt" | "round" | "square"| Interpolator
Lines
Optional. The shape used to draw the end points of lines
lineJoin
"bevel" | "round"| "miter"| Interpolator
Lines
Optional. The shape used to join two line segments when they meet
See default values for the default values of these attributes on each geometry type.
Categorical and numeric visualizations
categorical and numeric visualizations use the same color, opacity, size, strokeColor, strokeWidth, and line properties listed above (highlightColor/highlightStrokeColor are simple-only). The difference is that each property may be an array: a single value applies to every category/class, or one value per category/class. See the categorical and numeric pages for worked examples.
Icon properties (points)
When a point layer should be drawn as icons instead of circles, set iconImage in the paint block. The icon takes on the layer's color and size. See Icons for the full catalog and examples.
iconImage
string | string[]
An icon slug, or an emoji as "emoji::name:". Array form assigns an icon per category/class.
iconFrame
"none" | "frame-circle" | "frame-square"
A frame drawn behind built-in icons (not emojis).
iconRotation
number | string
Rotation in degrees, or a column name to rotate by.
iconHideOnZoom
number
Zoom level below which icons render as plain points.
Paint arrays (casing & layered rendering)
The paint property can be an array of paint objects for layered rendering. The layers render last-to-first (the last entry is the bottom layer, the first is on top). This is most often used for road-style casing: a wide dark outline beneath a narrower colored fill.
Paint arrays work on all geometries but are most useful for line casing.
Label block reference
Label rendering is configured separately, in the label block. See The label block for the full property reference, defaults, and placement-by-geometry guidance.
Default values
color
"#EE4D5A"
"#826DBA"
"#4CC8A3"
highlightColor
"#EA3891"
"#EA3891"
"#EA3891"
highlightStrokeColor
"#EA3891"
"#EA3891"
"#EA3891"
dashArray
-
-
lineCap
-
-
"round"
lineJoin
-
-
"round"
opacity
0.9
0.8
1
isSandwiched
-
false
-
size
4
-
2
strokeColor
"#F9F8Fb"
"#777777"
-
strokeWidth
1
1
-
Last updated
Was this helpful?