On this page
Properties
background-colorbackground-color-transitionbackground-opacitybackground-opacity-transitionbackground-patternbackground-pattern-transitioncircle-blurcircle-blur-transitioncircle-colorcircle-color-transitioncircle-opacitycircle-opacity-transitioncircle-pitch-alignmentcircle-pitch-scalecircle-radiuscircle-radius-transitioncircle-stroke-colorcircle-stroke-color-transitioncircle-stroke-opacitycircle-stroke-opacity-transitioncircle-stroke-widthcircle-stroke-width-transitioncircle-translatecircle-translate-anchorcircle-translate-transitioncolor-relief-colorcolor-relief-opacitycolor-relief-opacity-transitionfill-antialiasfill-colorfill-color-transitionfill-extrusion-basefill-extrusion-base-transitionfill-extrusion-colorfill-extrusion-color-transitionfill-extrusion-heightfill-extrusion-height-transitionfill-extrusion-opacityfill-extrusion-opacity-transitionfill-extrusion-patternfill-extrusion-pattern-transitionfill-extrusion-translatefill-extrusion-translate-anchorfill-extrusion-translate-transitionfill-extrusion-vertical-gradientfill-layer-opacityfill-layer-opacity-transitionfill-opacityfill-opacity-transitionfill-outline-colorfill-outline-color-transitionfill-patternfill-pattern-transitionfill-translatefill-translate-anchorfill-translate-transitionheatmap-colorheatmap-intensityheatmap-intensity-transitionheatmap-opacityheatmap-opacity-transitionheatmap-radiusheatmap-radius-transitionheatmap-weighthillshade-accent-colorhillshade-accent-color-transitionhillshade-exaggerationhillshade-exaggeration-transitionhillshade-highlight-colorhillshade-highlight-color-transitionhillshade-illumination-altitudehillshade-illumination-anchorhillshade-illumination-directionhillshade-methodhillshade-shadow-colorhillshade-shadow-color-transitionicon-coloricon-color-transitionicon-halo-bluricon-halo-blur-transitionicon-halo-coloricon-halo-color-transitionicon-halo-widthicon-halo-width-transitionicon-opacityicon-opacity-transitionicon-translateicon-translate-anchoricon-translate-transitionline-blurline-blur-transitionline-colorline-color-transitionline-dasharrayline-dasharray-transitionline-gap-widthline-gap-width-transitionline-gradientline-layer-opacityline-layer-opacity-transitionline-offsetline-offset-transitionline-opacityline-opacity-transitionline-patternline-pattern-transitionline-translateline-translate-anchorline-translate-transitionline-widthline-width-transitionraster-brightness-maxraster-brightness-max-transitionraster-brightness-minraster-brightness-min-transitionraster-contrastraster-contrast-transitionraster-fade-durationraster-hue-rotateraster-hue-rotate-transitionraster-opacityraster-opacity-transitionraster-resamplingraster-saturationraster-saturation-transitionresamplingtext-colortext-color-transitiontext-halo-blurtext-halo-blur-transitiontext-halo-colortext-halo-color-transitiontext-halo-widthtext-halo-width-transitiontext-opacitytext-opacity-transitiontext-translatetext-translate-anchortext-translate-transition

Type Alias AllPaintProperties

Union of all paint properties across all layer types.

type AllPaintProperties = {
    "background-color"?: PropertyValueSpecification<ColorSpecification>;
    "background-color-transition"?: TransitionSpecification;
    "background-opacity"?: PropertyValueSpecification<number>;
    "background-opacity-transition"?: TransitionSpecification;
    "background-pattern"?: PropertyValueSpecification<
        ResolvedImageSpecification,
    >;
    "background-pattern-transition"?: TransitionSpecification;
    "circle-blur"?: DataDrivenPropertyValueSpecification<number>;
    "circle-blur-transition"?: TransitionSpecification;
    "circle-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    "circle-color-transition"?: TransitionSpecification;
    "circle-opacity"?: DataDrivenPropertyValueSpecification<number>;
    "circle-opacity-transition"?: TransitionSpecification;
    "circle-pitch-alignment"?: PropertyValueSpecification<"map" | "viewport">;
    "circle-pitch-scale"?: PropertyValueSpecification<"map" | "viewport">;
    "circle-radius"?: DataDrivenPropertyValueSpecification<number>;
    "circle-radius-transition"?: TransitionSpecification;
    "circle-stroke-color"?: DataDrivenPropertyValueSpecification<
        ColorSpecification,
    >;
    "circle-stroke-color-transition"?: TransitionSpecification;
    "circle-stroke-opacity"?: DataDrivenPropertyValueSpecification<number>;
    "circle-stroke-opacity-transition"?: TransitionSpecification;
    "circle-stroke-width"?: DataDrivenPropertyValueSpecification<number>;
    "circle-stroke-width-transition"?: TransitionSpecification;
    "circle-translate"?: PropertyValueSpecification<[number, number]>;
    "circle-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">;
    "circle-translate-transition"?: TransitionSpecification;
    "color-relief-color"?: ExpressionSpecification;
    "color-relief-opacity"?: PropertyValueSpecification<number>;
    "color-relief-opacity-transition"?: TransitionSpecification;
    "fill-antialias"?: PropertyValueSpecification<boolean>;
    "fill-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    "fill-color-transition"?: TransitionSpecification;
    "fill-extrusion-base"?: DataDrivenPropertyValueSpecification<number>;
    "fill-extrusion-base-transition"?: TransitionSpecification;
    "fill-extrusion-color"?: DataDrivenPropertyValueSpecification<
        ColorSpecification,
    >;
    "fill-extrusion-color-transition"?: TransitionSpecification;
    "fill-extrusion-height"?: DataDrivenPropertyValueSpecification<number>;
    "fill-extrusion-height-transition"?: TransitionSpecification;
    "fill-extrusion-opacity"?: PropertyValueSpecification<number>;
    "fill-extrusion-opacity-transition"?: TransitionSpecification;
    "fill-extrusion-pattern"?: DataDrivenPropertyValueSpecification<
        ResolvedImageSpecification,
    >;
    "fill-extrusion-pattern-transition"?: TransitionSpecification;
    "fill-extrusion-translate"?: PropertyValueSpecification<[number, number]>;
    "fill-extrusion-translate-anchor"?: PropertyValueSpecification<
        "map"
        | "viewport",
    >;
    "fill-extrusion-translate-transition"?: TransitionSpecification;
    "fill-extrusion-vertical-gradient"?: PropertyValueSpecification<boolean>;
    "fill-layer-opacity"?: PropertyValueSpecification<number>;
    "fill-layer-opacity-transition"?: TransitionSpecification;
    "fill-opacity"?: DataDrivenPropertyValueSpecification<number>;
    "fill-opacity-transition"?: TransitionSpecification;
    "fill-outline-color"?: DataDrivenPropertyValueSpecification<
        ColorSpecification,
    >;
    "fill-outline-color-transition"?: TransitionSpecification;
    "fill-pattern"?: DataDrivenPropertyValueSpecification<
        ResolvedImageSpecification,
    >;
    "fill-pattern-transition"?: TransitionSpecification;
    "fill-translate"?: PropertyValueSpecification<[number, number]>;
    "fill-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">;
    "fill-translate-transition"?: TransitionSpecification;
    "heatmap-color"?: ExpressionSpecification;
    "heatmap-intensity"?: PropertyValueSpecification<number>;
    "heatmap-intensity-transition"?: TransitionSpecification;
    "heatmap-opacity"?: PropertyValueSpecification<number>;
    "heatmap-opacity-transition"?: TransitionSpecification;
    "heatmap-radius"?: DataDrivenPropertyValueSpecification<number>;
    "heatmap-radius-transition"?: TransitionSpecification;
    "heatmap-weight"?: DataDrivenPropertyValueSpecification<number>;
    "hillshade-accent-color"?: PropertyValueSpecification<ColorSpecification>;
    "hillshade-accent-color-transition"?: TransitionSpecification;
    "hillshade-exaggeration"?: PropertyValueSpecification<number>;
    "hillshade-exaggeration-transition"?: TransitionSpecification;
    "hillshade-highlight-color"?: PropertyValueSpecification<
        ColorArraySpecification,
    >;
    "hillshade-highlight-color-transition"?: TransitionSpecification;
    "hillshade-illumination-altitude"?: PropertyValueSpecification<
        NumberArraySpecification,
    >;
    "hillshade-illumination-anchor"?: PropertyValueSpecification<
        "map"
        | "viewport",
    >;
    "hillshade-illumination-direction"?: PropertyValueSpecification<
        NumberArraySpecification,
    >;
    "hillshade-method"?: PropertyValueSpecification<
        "standard"
        | "basic"
        | "combined"
        | "igor"
        | "multidirectional",
    >;
    "hillshade-shadow-color"?: PropertyValueSpecification<
        ColorArraySpecification,
    >;
    "hillshade-shadow-color-transition"?: TransitionSpecification;
    "icon-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    "icon-color-transition"?: TransitionSpecification;
    "icon-halo-blur"?: DataDrivenPropertyValueSpecification<number>;
    "icon-halo-blur-transition"?: TransitionSpecification;
    "icon-halo-color"?: DataDrivenPropertyValueSpecification<
        ColorSpecification,
    >;
    "icon-halo-color-transition"?: TransitionSpecification;
    "icon-halo-width"?: DataDrivenPropertyValueSpecification<number>;
    "icon-halo-width-transition"?: TransitionSpecification;
    "icon-opacity"?: DataDrivenPropertyValueSpecification<number>;
    "icon-opacity-transition"?: TransitionSpecification;
    "icon-translate"?: PropertyValueSpecification<[number, number]>;
    "icon-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">;
    "icon-translate-transition"?: TransitionSpecification;
    "line-blur"?: DataDrivenPropertyValueSpecification<number>;
    "line-blur-transition"?: TransitionSpecification;
    "line-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    "line-color-transition"?: TransitionSpecification;
    "line-dasharray"?: DataDrivenPropertyValueSpecification<number[]>;
    "line-dasharray-transition"?: TransitionSpecification;
    "line-gap-width"?: DataDrivenPropertyValueSpecification<number>;
    "line-gap-width-transition"?: TransitionSpecification;
    "line-gradient"?: ExpressionSpecification;
    "line-layer-opacity"?: PropertyValueSpecification<number>;
    "line-layer-opacity-transition"?: TransitionSpecification;
    "line-offset"?: DataDrivenPropertyValueSpecification<number>;
    "line-offset-transition"?: TransitionSpecification;
    "line-opacity"?: DataDrivenPropertyValueSpecification<number>;
    "line-opacity-transition"?: TransitionSpecification;
    "line-pattern"?: DataDrivenPropertyValueSpecification<
        ResolvedImageSpecification,
    >;
    "line-pattern-transition"?: TransitionSpecification;
    "line-translate"?: PropertyValueSpecification<[number, number]>;
    "line-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">;
    "line-translate-transition"?: TransitionSpecification;
    "line-width"?: DataDrivenPropertyValueSpecification<number>;
    "line-width-transition"?: TransitionSpecification;
    "raster-brightness-max"?: PropertyValueSpecification<number>;
    "raster-brightness-max-transition"?: TransitionSpecification;
    "raster-brightness-min"?: PropertyValueSpecification<number>;
    "raster-brightness-min-transition"?: TransitionSpecification;
    "raster-contrast"?: PropertyValueSpecification<number>;
    "raster-contrast-transition"?: TransitionSpecification;
    "raster-fade-duration"?: PropertyValueSpecification<number>;
    "raster-hue-rotate"?: PropertyValueSpecification<number>;
    "raster-hue-rotate-transition"?: TransitionSpecification;
    "raster-opacity"?: PropertyValueSpecification<number>;
    "raster-opacity-transition"?: TransitionSpecification;
    "raster-resampling"?: PropertyValueSpecification<"linear" | "nearest">;
    "raster-saturation"?: PropertyValueSpecification<number>;
    "raster-saturation-transition"?: TransitionSpecification;
    resampling?: PropertyValueSpecification<"linear" | "nearest">;
    "text-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    "text-color-transition"?: TransitionSpecification;
    "text-halo-blur"?: DataDrivenPropertyValueSpecification<number>;
    "text-halo-blur-transition"?: TransitionSpecification;
    "text-halo-color"?: DataDrivenPropertyValueSpecification<
        ColorSpecification,
    >;
    "text-halo-color-transition"?: TransitionSpecification;
    "text-halo-width"?: DataDrivenPropertyValueSpecification<number>;
    "text-halo-width-transition"?: TransitionSpecification;
    "text-opacity"?: DataDrivenPropertyValueSpecification<number>;
    "text-opacity-transition"?: TransitionSpecification;
    "text-translate"?: PropertyValueSpecification<[number, number]>;
    "text-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">;
    "text-translate-transition"?: TransitionSpecification;
}
Index

Properties

background-color? background-color-transition? background-opacity? background-opacity-transition? background-pattern? background-pattern-transition? circle-blur? circle-blur-transition? circle-color? circle-color-transition? circle-opacity? circle-opacity-transition? circle-pitch-alignment? circle-pitch-scale? circle-radius? circle-radius-transition? circle-stroke-color? circle-stroke-color-transition? circle-stroke-opacity? circle-stroke-opacity-transition? circle-stroke-width? circle-stroke-width-transition? circle-translate? circle-translate-anchor? circle-translate-transition? color-relief-color? color-relief-opacity? color-relief-opacity-transition? fill-antialias? fill-color? fill-color-transition? fill-extrusion-base? fill-extrusion-base-transition? fill-extrusion-color? fill-extrusion-color-transition? fill-extrusion-height? fill-extrusion-height-transition? fill-extrusion-opacity? fill-extrusion-opacity-transition? fill-extrusion-pattern? fill-extrusion-pattern-transition? fill-extrusion-translate? fill-extrusion-translate-anchor? fill-extrusion-translate-transition? fill-extrusion-vertical-gradient? fill-layer-opacity? fill-layer-opacity-transition? fill-opacity? fill-opacity-transition? fill-outline-color? fill-outline-color-transition? fill-pattern? fill-pattern-transition? fill-translate? fill-translate-anchor? fill-translate-transition? heatmap-color? heatmap-intensity? heatmap-intensity-transition? heatmap-opacity? heatmap-opacity-transition? heatmap-radius? heatmap-radius-transition? heatmap-weight? hillshade-accent-color? hillshade-accent-color-transition? hillshade-exaggeration? hillshade-exaggeration-transition? hillshade-highlight-color? hillshade-highlight-color-transition? hillshade-illumination-altitude? hillshade-illumination-anchor? hillshade-illumination-direction? hillshade-method? hillshade-shadow-color? hillshade-shadow-color-transition? icon-color? icon-color-transition? icon-halo-blur? icon-halo-blur-transition? icon-halo-color? icon-halo-color-transition? icon-halo-width? icon-halo-width-transition? icon-opacity? icon-opacity-transition? icon-translate? icon-translate-anchor? icon-translate-transition? line-blur? line-blur-transition? line-color? line-color-transition? line-dasharray? line-dasharray-transition? line-gap-width? line-gap-width-transition? line-gradient? line-layer-opacity? line-layer-opacity-transition? line-offset? line-offset-transition? line-opacity? line-opacity-transition? line-pattern? line-pattern-transition? line-translate? line-translate-anchor? line-translate-transition? line-width? line-width-transition? raster-brightness-max? raster-brightness-max-transition? raster-brightness-min? raster-brightness-min-transition? raster-contrast? raster-contrast-transition? raster-fade-duration? raster-hue-rotate? raster-hue-rotate-transition? raster-opacity? raster-opacity-transition? raster-resampling? raster-saturation? raster-saturation-transition? resampling? text-color? text-color-transition? text-halo-blur? text-halo-blur-transition? text-halo-color? text-halo-color-transition? text-halo-width? text-halo-width-transition? text-opacity? text-opacity-transition? text-translate? text-translate-anchor? text-translate-transition?

Properties

The color with which the background will be drawn.

"#000000"
"background-color-transition"?: TransitionSpecification
"background-opacity"?: PropertyValueSpecification<number>

The opacity at which the background will be drawn.

1
"background-opacity-transition"?: TransitionSpecification

Name of image in sprite to use for drawing an image background. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.

"background-pattern-transition"?: TransitionSpecification
"circle-blur"?: DataDrivenPropertyValueSpecification<number>

Amount to blur the circle. 1 blurs the circle such that only the centerpoint is full opacity.

"circle-blur-transition"?: TransitionSpecification

The fill color of the circle.

"#000000"
"circle-color-transition"?: TransitionSpecification
"circle-opacity"?: DataDrivenPropertyValueSpecification<number>

The opacity at which the circle will be drawn.

1
"circle-opacity-transition"?: TransitionSpecification
"circle-pitch-alignment"?: PropertyValueSpecification<"map" | "viewport">

Orientation of circle when map is pitched.

"viewport"
"circle-pitch-scale"?: PropertyValueSpecification<"map" | "viewport">

Controls the scaling behavior of the circle when the map is pitched.

"map"
"circle-radius"?: DataDrivenPropertyValueSpecification<number>

Circle radius.

5
"circle-radius-transition"?: TransitionSpecification

The stroke color of the circle.

"#000000"
"circle-stroke-color-transition"?: TransitionSpecification
"circle-stroke-opacity"?: DataDrivenPropertyValueSpecification<number>

The opacity of the circle's stroke.

1
"circle-stroke-opacity-transition"?: TransitionSpecification
"circle-stroke-width"?: DataDrivenPropertyValueSpecification<number>

The width of the circle's stroke. Strokes are placed outside of the circle-radius.

"circle-stroke-width-transition"?: TransitionSpecification
"circle-translate"?: PropertyValueSpecification<[number, number]>

The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.

[0, 0]
"circle-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">

Controls the frame of reference for circle-translate.

"map"
"circle-translate-transition"?: TransitionSpecification
"color-relief-color"?: ExpressionSpecification

Defines the color of each pixel based on its elevation. Should be an expression that uses ["elevation"] as input.

[
    "interpolate",
    ["linear"],
    ["elevation"],
    0,
    "black",
    8849,
    "white"
]
"color-relief-opacity"?: PropertyValueSpecification<number>

The opacity at which the color-relief will be drawn.

1
"color-relief-opacity-transition"?: TransitionSpecification
"fill-antialias"?: PropertyValueSpecification<boolean>

Whether or not the fill should be antialiased.

true

The color of the filled part of this layer. This color can be specified as rgba with an alpha component and the color's opacity will not affect the opacity of the 1px stroke, if it is used. When used with an SDF fill pattern, this serves as the foreground color of the pattern.

"#000000"
"fill-color-transition"?: TransitionSpecification
"fill-extrusion-base"?: DataDrivenPropertyValueSpecification<number>

The height with which to extrude the base of this layer. Must be less than or equal to fill-extrusion-height.

"fill-extrusion-base-transition"?: TransitionSpecification
"fill-extrusion-color"?: DataDrivenPropertyValueSpecification<
    ColorSpecification,
>

The base color of the extruded fill. The extrusion's surfaces will be shaded differently based on this color in combination with the root light settings. If this color is specified as rgba with an alpha component, the alpha component will be ignored; use fill-extrusion-opacity to set layer opacity.

"#000000"
"fill-extrusion-color-transition"?: TransitionSpecification
"fill-extrusion-height"?: DataDrivenPropertyValueSpecification<number>

The height with which to extrude this layer.

"fill-extrusion-height-transition"?: TransitionSpecification
"fill-extrusion-opacity"?: PropertyValueSpecification<number>

The opacity of the entire fill extrusion layer. This is rendered on a per-layer, not per-feature, basis, and data-driven styling is not available.

1
"fill-extrusion-opacity-transition"?: TransitionSpecification

Name of image in sprite to use for drawing images on extruded fills. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.

"fill-extrusion-pattern-transition"?: TransitionSpecification
"fill-extrusion-translate"?: PropertyValueSpecification<[number, number]>

The geometry's offset. Values are [x, y] where negatives indicate left and up (on the flat plane), respectively.

[0, 0]
"fill-extrusion-translate-anchor"?: PropertyValueSpecification<
    "map"
    | "viewport",
>

Controls the frame of reference for fill-extrusion-translate.

"map"
"fill-extrusion-translate-transition"?: TransitionSpecification
"fill-extrusion-vertical-gradient"?: PropertyValueSpecification<boolean>

Whether to apply a vertical gradient to the sides of a fill-extrusion layer. If true, sides will be shaded slightly darker farther down.

true
"fill-layer-opacity"?: PropertyValueSpecification<number>

Opacity applied to the layer as a whole. Unlike fill-opacity and alpha values in fill-color, which are applied per feature and accumulate where fills overlap, fill-layer-opacity is applied once so overlapping fills appear as a single surface at the given opacity. When both fill-opacity and fill-layer-opacity are set, the per-feature, overlap accumulation is preserved, then fill-layer-opacity composites the result. This property affects only the layer it is set on and cannot be used to composite multiple layers together or control how this layer blends with layers above or below it.

fill-opacity vs. fill-layer-opacity

1
"fill-layer-opacity-transition"?: TransitionSpecification
"fill-opacity"?: DataDrivenPropertyValueSpecification<number>

The opacity of the entire fill layer. In contrast to the fill-color, this value will also affect the 1px stroke around the fill, if the stroke is used.

1
"fill-opacity-transition"?: TransitionSpecification

The outline color of the fill. Matches the value of fill-color if unspecified.

"fill-outline-color-transition"?: TransitionSpecification

Name of image in sprite to use for drawing image fills. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.

"fill-pattern-transition"?: TransitionSpecification
"fill-translate"?: PropertyValueSpecification<[number, number]>

The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.

[0, 0]
"fill-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">

Controls the frame of reference for fill-translate.

"map"
"fill-translate-transition"?: TransitionSpecification
"heatmap-color"?: ExpressionSpecification

Defines the color of each pixel based on its density value in a heatmap. Should be an expression that uses ["heatmap-density"] as input.

[
    "interpolate",
    ["linear"],
    ["heatmap-density"],
    0,
    "rgba(0, 0, 255, 0)",
    0.1,
    "royalblue",
    0.3,
    "cyan",
    0.5,
    "lime",
    0.7,
    "yellow",
    1,
    "red"
]
"heatmap-intensity"?: PropertyValueSpecification<number>

Similar to heatmap-weight but controls the intensity of the heatmap globally. Primarily used for adjusting the heatmap based on zoom level.

1
"heatmap-intensity-transition"?: TransitionSpecification
"heatmap-opacity"?: PropertyValueSpecification<number>

The global opacity at which the heatmap layer will be drawn.

1
"heatmap-opacity-transition"?: TransitionSpecification
"heatmap-radius"?: DataDrivenPropertyValueSpecification<number>

Radius of influence of one heatmap point in pixels. Increasing the value makes the heatmap smoother, but less detailed.

30
"heatmap-radius-transition"?: TransitionSpecification
"heatmap-weight"?: DataDrivenPropertyValueSpecification<number>

A measure of how much an individual point contributes to the heatmap. A value of 10 would be equivalent to having 10 points of weight 1 in the same spot. Especially useful when combined with clustering.

1

The shading color used to accentuate rugged terrain like sharp cliffs and gorges.

"#000000"
"hillshade-accent-color-transition"?: TransitionSpecification
"hillshade-exaggeration"?: PropertyValueSpecification<number>

Intensity of the hillshade

0.5
"hillshade-exaggeration-transition"?: TransitionSpecification
"hillshade-highlight-color"?: PropertyValueSpecification<
    ColorArraySpecification,
>

The shading color of areas that faces towards the light source(s). Only when hillshade-method is set to multidirectional can you specify multiple light sources.

"#FFFFFF"
"hillshade-highlight-color-transition"?: TransitionSpecification
"hillshade-illumination-altitude"?: PropertyValueSpecification<
    NumberArraySpecification,
>

The altitude of the light source(s) used to generate the hillshading with 0 as sunset and 90 as noon. Only when hillshade-method is set to multidirectional can you specify multiple light sources.

45
"hillshade-illumination-anchor"?: PropertyValueSpecification<"map" | "viewport">

Direction of light source when map is rotated.

"viewport"
"hillshade-illumination-direction"?: PropertyValueSpecification<
    NumberArraySpecification,
>

The direction of the light source(s) used to generate the hillshading with 0 as the top of the viewport if hillshade-illumination-anchor is set to viewport and due north if hillshade-illumination-anchor is set to map. Only when hillshade-method is set to multidirectional can you specify multiple light sources.

335
"hillshade-method"?: PropertyValueSpecification<
    "standard"
    | "basic"
    | "combined"
    | "igor"
    | "multidirectional",
>

The hillshade algorithm to use, one of standard, basic, combined, igor, or multidirectional. Visual comparison of standard, basic, igor, combined, and multidirectional hillshade-method

"standard"

The shading color of areas that face away from the light source(s). Only when hillshade-method is set to multidirectional can you specify multiple light sources.

"#000000"
"hillshade-shadow-color-transition"?: TransitionSpecification

The color of the icon. This can only be used with SDF icons.

"#000000"
"icon-color-transition"?: TransitionSpecification
"icon-halo-blur"?: DataDrivenPropertyValueSpecification<number>

Fade out the halo towards the outside.

"icon-halo-blur-transition"?: TransitionSpecification

The color of the icon's halo. Icon halos can only be used with SDF icons.

"rgba(0, 0, 0, 0)"
"icon-halo-color-transition"?: TransitionSpecification
"icon-halo-width"?: DataDrivenPropertyValueSpecification<number>

Distance of halo to the icon outline.

The unit is in pixels only for SDF sprites that were created with a blur radius of 8, multiplied by the display density. I.e., the radius needs to be 16 for @2x sprites, etc.

"icon-halo-width-transition"?: TransitionSpecification
"icon-opacity"?: DataDrivenPropertyValueSpecification<number>

The opacity at which the icon will be drawn.

1
"icon-opacity-transition"?: TransitionSpecification
"icon-translate"?: PropertyValueSpecification<[number, number]>

Distance that the icon's anchor is moved from its original placement. Positive values indicate right and down, while negative values indicate left and up.

[0, 0]
"icon-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">

Controls the frame of reference for icon-translate.

"map"
"icon-translate-transition"?: TransitionSpecification

Blur applied to the line, in pixels.

"line-blur-transition"?: TransitionSpecification

The color with which the line will be drawn.

"#000000"
"line-color-transition"?: TransitionSpecification
"line-dasharray"?: DataDrivenPropertyValueSpecification<number[]>

Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. GeoJSON sources with lineMetrics: true specified won't render dashed lines to the expected scale. Zoom-dependent expressions will be evaluated only at integer zoom levels. The only way to create an array value is using ["literal", [...]]; arrays cannot be read from or derived from feature properties.

"line-dasharray-transition"?: TransitionSpecification
"line-gap-width"?: DataDrivenPropertyValueSpecification<number>

Draws a line casing outside of a line's actual path. Value indicates the width of the inner gap.

"line-gap-width-transition"?: TransitionSpecification
"line-gradient"?: ExpressionSpecification

Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify "lineMetrics": true.

"line-layer-opacity"?: PropertyValueSpecification<number>

Opacity applied to the layer as a whole. Unlike line-opacity and alpha values in line-color, which are applied per feature and accumulate where lines overlap, line-layer-opacity is applied once so overlapping lines appear as a single surface at the given opacity. When both line-opacity and line-layer-opacity are set, the per-feature, overlap accumulation is preserved, then layer-opacity composites the result. This property affects only the layer it is set on and cannot be used to composite multiple layers together or control how this layer blends with layers above or below it.

line-opacity vs. line-layer-opacity

1
"line-layer-opacity-transition"?: TransitionSpecification
"line-offset"?: DataDrivenPropertyValueSpecification<number>

The line's offset. For linear features, a positive value offsets the line to the right, relative to the direction of the line, and a negative value to the left. For polygon features, a positive value results in an inset, and a negative value results in an outset.

"line-offset-transition"?: TransitionSpecification
"line-opacity"?: DataDrivenPropertyValueSpecification<number>

The opacity at which the line will be drawn.

1
"line-opacity-transition"?: TransitionSpecification

Name of image in sprite to use for drawing image lines. For seamless patterns, image width must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.

"line-pattern-transition"?: TransitionSpecification
"line-translate"?: PropertyValueSpecification<[number, number]>

The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.

[0, 0]
"line-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">

Controls the frame of reference for line-translate.

"map"
"line-translate-transition"?: TransitionSpecification

Stroke thickness.

1
"line-width-transition"?: TransitionSpecification
"raster-brightness-max"?: PropertyValueSpecification<number>

Increase or reduce the brightness of the image. The value is the maximum brightness.

1
"raster-brightness-max-transition"?: TransitionSpecification
"raster-brightness-min"?: PropertyValueSpecification<number>

Increase or reduce the brightness of the image. The value is the minimum brightness.

"raster-brightness-min-transition"?: TransitionSpecification
"raster-contrast"?: PropertyValueSpecification<number>

Increase or reduce the contrast of the image.

"raster-contrast-transition"?: TransitionSpecification
"raster-fade-duration"?: PropertyValueSpecification<number>

Fade duration when a new tile is added, or when a video is started or its coordinates are updated.

300
"raster-hue-rotate"?: PropertyValueSpecification<number>

Rotates hues around the color wheel.

"raster-hue-rotate-transition"?: TransitionSpecification
"raster-opacity"?: PropertyValueSpecification<number>

The opacity at which the image will be drawn.

1
"raster-opacity-transition"?: TransitionSpecification
"raster-resampling"?: PropertyValueSpecification<"linear" | "nearest">

The resampling/interpolation method to use for overscaling, also known as texture magnification filter. It is advised to use the generic resampling paint property instead.

"linear"
"raster-saturation"?: PropertyValueSpecification<number>

Increase or reduce the saturation of the image.

"raster-saturation-transition"?: TransitionSpecification
resampling?: PropertyValueSpecification<"linear" | "nearest">

The resampling/interpolation method to use for overscaling, also known as texture magnification filter. Visual comparison of linear resampling versus nearest resampling

"linear"

The color with which the text will be drawn.

"#000000"
"text-color-transition"?: TransitionSpecification
"text-halo-blur"?: DataDrivenPropertyValueSpecification<number>

The halo's fadeout distance towards the outside.

"text-halo-blur-transition"?: TransitionSpecification

The color of the text's halo, which helps it stand out from backgrounds.

"rgba(0, 0, 0, 0)"
"text-halo-color-transition"?: TransitionSpecification
"text-halo-width"?: DataDrivenPropertyValueSpecification<number>

Distance of halo to the font outline. Max text halo width is 1/4 of the font-size.

"text-halo-width-transition"?: TransitionSpecification
"text-opacity"?: DataDrivenPropertyValueSpecification<number>

The opacity at which the text will be drawn.

1
"text-opacity-transition"?: TransitionSpecification
"text-translate"?: PropertyValueSpecification<[number, number]>

Distance that the text's anchor is moved from its original placement. Positive values indicate right and down, while negative values indicate left and up.

[0, 0]
"text-translate-anchor"?: PropertyValueSpecification<"map" | "viewport">

Controls the frame of reference for text-translate.

"map"
"text-translate-transition"?: TransitionSpecification
Was this helpful?
SDK JS
Reference
AllPaintProperties