Skip to main content

CircleLayer

Mapbox spec: circle

import { CircleLayer } from '@rnmapbox/maps';

CircleLayer

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

props​

id​

string

required A string that uniquely identifies the source in the style to which it is added.

existing​

boolean

The id refers to an existing layer in the style. Does not create a new layer.

sourceID​

string

The source from which to obtain the data to style. If the source has not yet been added to the current style, the behavior is undefined. Inferred from parent source only if the layer is a direct child to it.

defaults to: Mapbox.StyleSource.DefaultSourceID

sourceLayerID​

string

Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.

aboveLayerID​

string

Inserts a layer above aboveLayerID.

belowLayerID​

string

Inserts a layer below belowLayerID

layerIndex​

number

Inserts a layer at a specified index

filter​

FilterExpression

Filter only the features in the source layer that satisfy a condition that you define

minZoomLevel​

number

The minimum zoom level at which the layer gets parsed and appears.

maxZoomLevel​

number

The maximum zoom level at which the layer gets parsed and appears.

slot​

'bottom' | 'middle' | 'top'

The slot this layer is assigned to. If specified, and a slot with that name exists, it will be placed at that position in the layer order.

v11 only

style​

CircleLayerStyleProps

Customizable style attributes

styles​

circleSortKey​

Name: circleSortKey

Mapbox spec: circle-sort-key

Description​

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

circleElevationReference​

Name: circleElevationReference

Mapbox spec: circle-elevation-reference

Description​

Selects the base of circleElevation. Some modes might require precomputed elevation data in the tileset.

Type​

enum

Default Value​

none

Supported Values​

none - Elevated rendering is disabled.
hd-road-markup - Elevated rendering is enabled. Use this mode to describe additive and stackable features that should exist only on top of road polygons.

Expression​

Parameters: ``

visibility​

Name: visibility

Mapbox spec: visibility

Description​

Whether this layer is displayed.

Type​

enum

Default Value​

visible

Supported Values​

visible - The layer is shown.
none - The layer is not shown.

Expression​

Parameters: ``

circleRadius​

Name: circleRadius

Mapbox spec: circle-radius

Description​

Circle radius.

Type​

number

Default Value​

5

Units​

pixels

Minimum​

0

Expression​

Parameters: zoom, feature, feature-state, measure-light

circleRadiusTransition​

Name: circleRadiusTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

circleColor​

Name: circleColor

Mapbox spec: circle-color

Description​

The fill color of the circle.

Type​

color

Default Value​

#000000

Expression​

Parameters: zoom, feature, feature-state, measure-light

circleColorTransition​

Name: circleColorTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

circleBlur​

Name: circleBlur

Mapbox spec: circle-blur

Description​

Amount to blur the circle. 1 blurs the circle such that only the centerpoint is full opacity. Setting a negative value renders the blur as an inner glow effect.

Type​

number

Default Value​

0

Expression​

Parameters: zoom, feature, feature-state, measure-light

circleBlurTransition​

Name: circleBlurTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

circleOpacity​

Name: circleOpacity

Mapbox spec: circle-opacity

Description​

The opacity at which the circle will be drawn.

Type​

number

Default Value​

1

Minimum​

0

Maximum​

1

Expression​

Parameters: zoom, feature, feature-state, measure-light

circleOpacityTransition​

Name: circleOpacityTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

circleTranslate​

Name: circleTranslate

Mapbox spec: circle-translate

Description​

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

Type​

array<number>

Default Value​

[0,0]

Units​

pixels

Expression​

Parameters: zoom

circleTranslateTransition​

Name: circleTranslateTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

circleTranslateAnchor​

Name: circleTranslateAnchor

Mapbox spec: circle-translate-anchor

Description​

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​

Name: circlePitchScale

Mapbox spec: circle-pitch-scale

Description​

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​

Name: circlePitchAlignment

Mapbox spec: circle-pitch-alignment

Description​

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​

Name: circleStrokeWidth

Mapbox spec: circle-stroke-width

Description​

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, measure-light

circleStrokeWidthTransition​

Name: circleStrokeWidthTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

circleStrokeColor​

Name: circleStrokeColor

Mapbox spec: circle-stroke-color

Description​

The stroke color of the circle.

Type​

color

Default Value​

#000000

Expression​

Parameters: zoom, feature, feature-state, measure-light

circleStrokeColorTransition​

Name: circleStrokeColorTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

circleStrokeOpacity​

Name: circleStrokeOpacity

Mapbox spec: circle-stroke-opacity

Description​

The opacity of the circle's stroke.

Type​

number

Default Value​

1

Minimum​

0

Maximum​

1

Expression​

Parameters: zoom, feature, feature-state, measure-light

circleStrokeOpacityTransition​

Name: circleStrokeOpacityTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}

circleEmissiveStrength​

Name: circleEmissiveStrength

Mapbox spec: circle-emissive-strength

Description​

Controls the intensity of light emitted on the source features.

Type​

number

Default Value​

0

Units​

intensity

Minimum​

0

Requires​

lights

Expression​

Parameters: zoom, measure-light

circleEmissiveStrengthTransition​

Name: circleEmissiveStrengthTransition

Description​

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

Type​

{ duration, delay }

Units​

milliseconds

Default Value​

{duration: 300, delay: 0}