Skip to main content

<CircleLayer />

CircleLayer is a style layer that renders one or more filled circles on the map.

Props​

PropTypeDefaultRequiredDescription
styleCircleLayerStylenonefalseCustomizable style attributes
sourceIDFIX ME UNKNOWN TYPEMLRNModule.StyleSource.DefaultSourceIDfalseFIX ME NO DESCRIPTION

Styles​

circleSortKey​

Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.

Type
number
Expression Parameters
zoom, feature

visibility​

Whether this layer is displayed.

Type
enum
Default Value
visible
Supported Values

  • visible: The layer is shown.

  • none: The layer is not shown.

circleRadius​

Circle radius.

Type
number
Default Value
5
Units
pixels
Minimum
0
Expression Parameters
zoom, feature, feature-state

circleRadiusTransition​

The transition affecting any changes to this layer’s circleRadius property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

circleColor​

The fill color of the circle.

Type
color
Default Value
#000000
Expression Parameters
zoom, feature, feature-state

circleColorTransition​

The transition affecting any changes to this layer’s circleColor property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

circleBlur​

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

Type
number
Default Value
0
Expression Parameters
zoom, feature, feature-state

circleBlurTransition​

The transition affecting any changes to this layer’s circleBlur property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

circleOpacity​

The opacity at which the circle will be drawn.

Type
number
Default Value
1
Minimum
0
Maximum
1
Expression Parameters
zoom, feature, feature-state

circleOpacityTransition​

The transition affecting any changes to this layer’s circleOpacity property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

circleTranslate​

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

Type
number[]
Default Value
0,0
Units
pixels
Expression Parameters
zoom

circleTranslateTransition​

The transition affecting any changes to this layer’s circleTranslate property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

circleTranslateAnchor​

Controls the frame of reference for circleTranslate.

Type
enum
Default Value
map
Supported Values

  • map: The circle is translated relative to the map.

  • viewport: The circle is translated relative to the viewport.

Requires
circleTranslate
Expression Parameters
zoom

circlePitchScale​

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

Type
enum
Default Value
map
Supported Values

  • map: Circles are scaled according to their apparent distance to the camera.

  • viewport: Circles are not scaled.

Expression Parameters
zoom

circlePitchAlignment​

Orientation of circle when map is pitched.

Type
enum
Default Value
viewport
Supported Values

  • map: The circle is aligned to the plane of the map.

  • viewport: The circle is aligned to the plane of the viewport.

Expression Parameters
zoom

circleStrokeWidth​

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

Type
number
Default Value
0
Units
pixels
Minimum
0
Expression Parameters
zoom, feature, feature-state

circleStrokeWidthTransition​

The transition affecting any changes to this layer’s circleStrokeWidth property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

circleStrokeColor​

The stroke color of the circle.

Type
color
Default Value
#000000
Expression Parameters
zoom, feature, feature-state

circleStrokeColorTransition​

The transition affecting any changes to this layer’s circleStrokeColor property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }

circleStrokeOpacity​

The opacity of the circle's stroke.

Type
number
Default Value
1
Minimum
0
Maximum
1
Expression Parameters
zoom, feature, feature-state

circleStrokeOpacityTransition​

The transition affecting any changes to this layer’s circleStrokeOpacity property.

Type
{ duration, delay }
Units
milliseconds
Default Value
{ duration: 300, delay: 0 }