Vector layers can be styled with an object literal containing properties for stroke, fill, image, and text styles. The types below can be composed into a single object. For example, a style with both stroke and fill properties could look like this:
const style = {
'stroke-color': 'yellow',
'stroke-width': 1.5,
'fill-color': 'orange',
};
See details about the available properties depending on what type of symbolizer should be applied:
Stroke
- properties for applying a stroke to lines and polygonsFill
- properties for filling polygonsText
- properties for labeling points, lines, and polygonsIcon
- properties for rendering points with an iconCircle
- properties for rendering points with a circleShape
- properties for rendering points with a regular shape
To conditionally apply styles based on a filter, a list of rules
can be used.
For example, to style points with a big orange circle if the population is greater than 1 million and
a smaller blue circle otherwise:
const rules = [
{
filter: ['>', ['get', 'population'], 1_000_000],
style: {
'circle-radius': 10,
'circle-fill-color': 'red',
}
},
{
else: true,
style: {
'circle-radius': 5,
'circle-fill-color': 'blue',
},
},
];
Type Definitions
-
BooleanExpression{boolean} {Array}
-
A literal boolean (e.g.
true
) or an expression that evaluates to a boolean (e.g.['>', ['get', 'population'], 1_000_000]
). -
ColorExpression{Color} {string} {Array}
-
A CSS named color (e.g.
'blue'
), an array of 3 RGB values (e.g.[0, 255, 0]
), an array of 4 RGBA values (e.g.[0, 255, 0, 0.5]
), or an expression that evaluates to one of these color types (e.g.['get', 'color']
). -
DefaultStyle{Object}
-
These default style properties are applied when no other style is given.
Properties:
Name Type Description fill-color
string 'rgba(255,255,255,0.4)'
stroke-color
string '#3399CC'
stroke-width
number 1.25
circle-radius
number 5
circle-fill-color
string 'rgba(255,255,255,0.4)'
circle-stroke-width
number 1.25
circle-stroke-color
string '#3399CC'
-
FlatCircle{Object}
-
Circle style properties for rendering point features. At least
circle-radius
must be provided.Properties:
Name Type Description circle-radius
number | undefined Circle radius.
circle-fill-color
ColorExpression | undefined The fill color.
'none'
means no fill and no hit detection.circle-stroke-color
ColorExpression | undefined The stroke color.
circle-stroke-width
NumberExpression | undefined Stroke pixel width.
circle-stroke-line-cap
StringExpression
(defaults to 'round')Line cap style:
butt
,round
, orsquare
.circle-stroke-line-join
StringExpression
(defaults to 'round')Line join style:
bevel
,round
, ormiter
.circle-stroke-line-dash
NumberArrayExpression | undefined Line dash pattern.
circle-stroke-line-dash-offset
NumberExpression
(defaults to 0)Line dash offset.
circle-stroke-miter-limit
NumberExpression
(defaults to 10)Miter limit.
circle-displacement
NumberArrayExpression
(defaults to [0,0])displacement
circle-scale
SizeExpression
(defaults to 1)Scale. A two dimensional scale will produce an ellipse. Unless two dimensional scaling is required a better result may be obtained with an appropriate setting for
circle-radius
.circle-rotation
NumberExpression
(defaults to 0)Rotation in radians (positive rotation clockwise, meaningful only when used in conjunction with a two dimensional scale).
circle-rotate-with-view
BooleanExpression
(defaults to false)Whether to rotate the shape with the view (meaningful only when used in conjunction with a two dimensional scale).
circle-declutter-mode
DeclutterMode | undefined Declutter mode
z-index
NumberExpression | undefined The zIndex of the style.
-
FlatFill{Object}
-
Fill style properties applied to polygon features.
Properties:
Name Type Description fill-color
ColorExpression | undefined The fill color.
'none'
means no fill and no hit detection.fill-pattern-src
StringExpression | undefined Fill pattern image URL.
fill-pattern-size
SizeExpression | undefined Fill pattern image size in pixels. Can be used together with
fill-pattern-offset
to define the sub-rectangle to use from a fill pattern image sprite sheet.fill-pattern-offset
SizeExpression | undefined Fill pattern image offset in pixels.
-
FlatIcon{Object}
-
Icon style properties applied to point features.
icon-src
must be provided to render points with an icon.Properties:
Name Type Description icon-src
string | undefined Image source URI.
icon-anchor
NumberArrayExpression
(defaults to [0.5, 0.5])Anchor. Default value is the icon center.
icon-anchor-origin
IconOrigin
(defaults to 'top-left')Origin of the anchor:
bottom-left
,bottom-right
,top-left
ortop-right
.icon-anchor-x-units
IconAnchorUnits
(defaults to 'fraction')Units in which the anchor x value is specified. A value of
'fraction'
indicates the x value is a fraction of the icon. A value of'pixels'
indicates the x value in pixels.icon-anchor-y-units
IconAnchorUnits
(defaults to 'fraction')Units in which the anchor y value is specified. A value of
'fraction'
indicates the y value is a fraction of the icon. A value of'pixels'
indicates the y value in pixels.icon-color
Color | string | undefined Color to tint the icon. If not specified, the icon will be left as is.
icon-cross-origin
null | string | undefined The
crossOrigin
attribute for loaded images. Note that you must provide aicon-cross-origin
value if you want to access pixel data with the Canvas renderer. See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.icon-offset
Array.<number>
(defaults to [0, 0])Offset, which, together with the size and the offset origin, define the sub-rectangle to use from the original icon image.
icon-displacement
NumberArrayExpression
(defaults to [0,0])Displacement of the icon.
icon-offset-origin
IconOrigin
(defaults to 'top-left')Origin of the offset:
bottom-left
,bottom-right
,top-left
ortop-right
.icon-opacity
NumberExpression
(defaults to 1)Opacity of the icon.
icon-scale
SizeExpression
(defaults to 1)Scale.
icon-width
number | undefined Width of the icon. If not specified, the actual image width will be used. Cannot be combined with
scale
.icon-height
number | undefined Height of the icon. If not specified, the actual image height will be used. Cannot be combined with
scale
.icon-rotation
NumberExpression
(defaults to 0)Rotation in radians (positive rotation clockwise).
icon-rotate-with-view
BooleanExpression
(defaults to false)Whether to rotate the icon with the view.
icon-size
Size | undefined Icon size in pixel. Can be used together with
icon-offset
to define the sub-rectangle to use from the origin (sprite) icon image.icon-declutter-mode
DeclutterMode | undefined Declutter mode
z-index
NumberExpression | undefined The zIndex of the style.
-
FlatShape{Object}
-
Regular shape style properties for rendering point features. At least
shape-points
must be provided.Properties:
Name Type Description shape-points
number | undefined Number of points for stars and regular polygons. In case of a polygon, the number of points is the number of sides.
shape-fill-color
ColorExpression | undefined The fill color.
'none'
means no fill and no hit detection.shape-stroke-color
ColorExpression | undefined The stroke color.
shape-stroke-width
NumberExpression | undefined Stroke pixel width.
shape-stroke-line-cap
StringExpression
(defaults to 'round')Line cap style:
butt
,round
, orsquare
.shape-stroke-line-join
StringExpression
(defaults to 'round')Line join style:
bevel
,round
, ormiter
.shape-stroke-line-dash
NumberArrayExpression | undefined Line dash pattern.
shape-stroke-line-dash-offset
NumberExpression
(defaults to 0)Line dash offset.
shape-stroke-miter-limit
NumberExpression
(defaults to 10)Miter limit.
shape-radius
number | undefined Radius of a regular polygon.
shape-radius2
number | undefined Second radius to make a star instead of a regular polygon.
shape-angle
number
(defaults to 0)Shape's angle in radians. A value of 0 will have one of the shape's point facing up.
shape-displacement
NumberArrayExpression
(defaults to [0,0])Displacement of the shape
shape-rotation
NumberExpression
(defaults to 0)Rotation in radians (positive rotation clockwise).
shape-rotate-with-view
BooleanExpression
(defaults to false)Whether to rotate the shape with the view.
shape-scale
SizeExpression
(defaults to 1)Scale. Unless two dimensional scaling is required a better result may be obtained with appropriate settings for
shape-radius
andshape-radius2
.shape-declutter-mode
DeclutterMode | undefined Declutter mode.
z-index
NumberExpression | undefined The zIndex of the style.
-
FlatStroke{Object}
-
Stroke style properties applied to line strings and polygon boundaries. To apply a stroke, at least one of
stroke-color
orstroke-width
must be provided.Properties:
Name Type Description stroke-color
ColorExpression | undefined The stroke color.
stroke-width
NumberExpression | undefined Stroke pixel width.
stroke-line-cap
StringExpression
(defaults to 'round')Line cap style:
butt
,round
, orsquare
.stroke-line-join
StringExpression
(defaults to 'round')Line join style:
bevel
,round
, ormiter
.stroke-line-dash
NumberArrayExpression | undefined Line dash pattern.
stroke-line-dash-offset
NumberExpression
(defaults to 0)Line dash offset.
stroke-miter-limit
NumberExpression
(defaults to 10)Miter limit.
z-index
NumberExpression | undefined The zIndex of the style.
-
FlatStyle{FlatFill} {FlatStroke} {FlatText} {FlatIcon} {FlatShape} {FlatCircle}
-
For static styling, the
layer.setStyle()
method can be called with an object literal that has fill, stroke, text, icon, regular shape, and/or circle properties. -
A flat style literal or an array of the same.
-
FlatText{Object}
-
Label style properties applied to all features. At a minimum, a
text-value
must be provided.Properties:
Name Type Description text-value
StringExpression | undefined Text content (with
\n
for line breaks).text-font
StringExpression
(defaults to '10px sans-serif')Font style as CSS
font
value.text-max-angle
NumberExpression
(defaults to Math.PI/4)When
text-placement
is set to'line'
, allow a maximum angle between adjacent characters. The expected value is in radians, and the default is 45° (Math.PI / 4
).text-offset-x
NumberExpression
(defaults to 0)Horizontal text offset in pixels. A positive will shift the text right.
text-offset-y
NumberExpression
(defaults to 0)Vertical text offset in pixels. A positive will shift the text down.
text-overflow
BooleanExpression
(defaults to false)For polygon labels or when
placement
is set to'line'
, allow text to exceed the width of the polygon at the label position or the length of the path that it follows.text-placement
StringExpression
(defaults to 'point')Text placement.
text-repeat
NumberExpression | undefined Repeat interval in pixels. When set, the text will be repeated at this interval. Only available when
text-placement
is set to'line'
. Overridestext-align
.text-scale
SizeExpression | undefined Scale.
text-rotate-with-view
BooleanExpression
(defaults to false)Whether to rotate the text with the view.
text-rotation
NumberExpression
(defaults to 0)Rotation in radians (positive rotation clockwise).
text-align
StringExpression | undefined Text alignment. Possible values:
'left'
,'right'
,'center'
,'end'
or'start'
. Default is'center'
for'text-placement': 'point'
. For'text-placement': 'line'
, the default is to let the renderer choose a placement wheretext-max-angle
is not exceeded.text-justify
StringExpression | undefined Text justification within the text box. If not set, text is justified towards the
textAlign
anchor. Otherwise, use options'left'
,'center'
, or'right'
to justify the text within the text box. Note:text-justify
is ignored for immediate rendering and also for'text-placement': 'line'
.text-baseline
StringExpression
(defaults to 'middle')Text base line. Possible values:
'bottom'
,'top'
,'middle'
,'alphabetic'
,'hanging'
,'ideographic'
.text-padding
NumberArrayExpression
(defaults to [0, 0, 0, 0])Padding in pixels around the text for decluttering and background. The order of values in the array is
[top, right, bottom, left]
.text-fill-color
ColorExpression | undefined The fill color.
'none'
means no fill and no hit detection.text-background-fill-color
ColorExpression | undefined The fill color.
'none'
means no fill and no hit detection.text-stroke-color
ColorExpression | undefined The stroke color.
text-stroke-line-cap
StringExpression
(defaults to 'round')Line cap style:
butt
,round
, orsquare
.text-stroke-line-join
StringExpression
(defaults to 'round')Line join style:
bevel
,round
, ormiter
.text-stroke-line-dash
NumberArrayExpression | undefined Line dash pattern.
text-stroke-line-dash-offset
NumberExpression
(defaults to 0)Line dash offset.
text-stroke-miter-limit
NumberExpression
(defaults to 10)Miter limit.
text-stroke-width
NumberExpression | undefined Stroke pixel width.
text-background-stroke-color
ColorExpression | undefined The stroke color.
text-background-stroke-line-cap
StringExpression
(defaults to 'round')Line cap style:
butt
,round
, orsquare
.text-background-stroke-line-join
StringExpression
(defaults to 'round')Line join style:
bevel
,round
, ormiter
.text-background-stroke-line-dash
NumberArrayExpression | undefined Line dash pattern.
text-background-stroke-line-dash-offset
NumberExpression
(defaults to 0)Line dash offset.
text-background-stroke-miter-limit
NumberExpression
(defaults to 10)Miter limit.
text-background-stroke-width
NumberExpression | undefined Stroke pixel width.
text-declutter-mode
DeclutterMode | undefined Declutter mode
z-index
NumberExpression | undefined The zIndex of the style.
-
NumberArrayExpression{Array.<number>} {Array}
-
An array of numbers (e.g.
[1, 2, 3]
) or an expression that evaluates to the same (e.g.['get', 'values']
). -
NumberExpression{number} {Array}
-
A literal number (e.g.
42
) or an expression that evaluates to a number (e.g.['+', 40, 2]
). -
Rule{Object}
-
A rule is used to conditionally apply a style. If the rule's filter evaluates to true, the style will be applied.
Properties:
Name Type Description style
FlatStyle | Array<FlatStyle> The style to be applied if the filter matches.
filter
EncodedExpression | undefined The filter used to determine if a style applies. If no filter is included, the rule always applies (unless it is an else rule).
else
boolean | undefined If true, the rule applies only if no other previous rule applies. If the else rule also has a filter, the rule will not apply if the filter does not match.
-
SizeExpression{number} {Array.<number>} {Array}
-
An array of two numbers (e.g.
[10, 20]
) or an expression that evaluates to the same (e.g.['get', 'size']
). -
StringExpression{string} {Array}
-
A literal string (e.g.
'hello'
) or an expression that evaluates to a string (e.g.['get', 'greeting']
). -
StyleVariables{Object.<string, (number|Array.<number>|string|boolean)>}
-
Style variables are provided as an object. The variables can be read in a
style expression
using the['var', 'varName']
operator. Each variable must hold a literal value (not an expression).