Mapbox spec: circle
import { CircleLayer } from '@rnmapbox/maps';
CircleLayerCircleLayer is a style layer that renders one or more filled circles on the map.
stringrequired A string that uniquely identifies the source in the style to which it is added.
booleanThe id refers to en existing layer in the style. Does not create a new layer.
stringThe 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
stringIdentifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
stringInserts a layer above aboveLayerID.
stringInserts a layer below belowLayerID
numberInserts a layer at a specified index
FilterExpressionFilter only the features in the source layer that satisfy a condition that you define
numberThe minimum zoom level at which the layer gets parsed and appears.
numberThe maximum zoom level at which the layer gets parsed and appears.
'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
CircleLayerStylePropsCustomizable style attributes
- circleSortKey
- visibility
- circleRadius
- circleColor
- circleBlur
- circleOpacity
- circleTranslate
- circleTranslateAnchor
- circlePitchScale
- circlePitchAlignment
- circleStrokeWidth
- circleStrokeColor
- circleStrokeOpacity
Name: circleSortKey
Mapbox spec: circle-sort-key
Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
number
Parameters: zoom, feature
Name: visibility
Mapbox spec: visibility
Whether this layer is displayed.
enum
visible
visible - The layer is shown.
none - The layer is not shown.
Parameters: ``
Name: circleRadius
Mapbox spec: circle-radius
Circle radius.
number
5
pixels
0
Parameters: zoom, feature, feature-state, measure-light
Name: circleRadiusTransition
The transition affecting any changes to this layer’s circleRadius property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: circleColor
Mapbox spec: circle-color
The fill color of the circle.
color
#000000
Parameters: zoom, feature, feature-state, measure-light
Name: circleColorTransition
The transition affecting any changes to this layer’s circleColor property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: circleBlur
Mapbox spec: circle-blur
Amount to blur the circle. 1 blurs the circle such that only the centerpoint is full opacity.
number
0
Parameters: zoom, feature, feature-state, measure-light
Name: circleBlurTransition
The transition affecting any changes to this layer’s circleBlur property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: circleOpacity
Mapbox spec: circle-opacity
The opacity at which the circle will be drawn.
number
1
0
1
Parameters: zoom, feature, feature-state, measure-light
Name: circleOpacityTransition
The transition affecting any changes to this layer’s circleOpacity property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: circleTranslate
Mapbox spec: circle-translate
The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.
array<number>
[0,0]
pixels
Parameters: zoom
Name: circleTranslateTransition
The transition affecting any changes to this layer’s circleTranslate property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: circleTranslateAnchor
Mapbox spec: circle-translate-anchor
Controls the frame of reference for circleTranslate.
enum
map
map - The circle is translated relative to the map.
viewport - The circle is translated relative to the viewport.
circleTranslate
Parameters: zoom
Name: circlePitchScale
Mapbox spec: circle-pitch-scale
Controls the scaling behavior of the circle when the map is pitched.
enum
map
map - Circles are scaled according to their apparent distance to the camera.
viewport - Circles are not scaled.
Parameters: zoom
Name: circlePitchAlignment
Mapbox spec: circle-pitch-alignment
Orientation of circle when map is pitched.
enum
viewport
map - The circle is aligned to the plane of the map.
viewport - The circle is aligned to the plane of the viewport.
Parameters: zoom
Name: circleStrokeWidth
Mapbox spec: circle-stroke-width
The width of the circle's stroke. Strokes are placed outside of the circleRadius.
number
0
pixels
0
Parameters: zoom, feature, feature-state, measure-light
Name: circleStrokeWidthTransition
The transition affecting any changes to this layer’s circleStrokeWidth property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: circleStrokeColor
Mapbox spec: circle-stroke-color
The stroke color of the circle.
color
#000000
Parameters: zoom, feature, feature-state, measure-light
Name: circleStrokeColorTransition
The transition affecting any changes to this layer’s circleStrokeColor property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}
Name: circleStrokeOpacity
Mapbox spec: circle-stroke-opacity
The opacity of the circle's stroke.
number
1
0
1
Parameters: zoom, feature, feature-state, measure-light
Name: circleStrokeOpacityTransition
The transition affecting any changes to this layer’s circleStrokeOpacity property.
{ duration, delay }
milliseconds
{duration: 300, delay: 0}