Skip to main content
CircleLayer is a style layer that renders one or more filled circles on the map. Mapbox Style Specification

​
Props

​
id
string
required
A unique identifier for the layer.
​
existing
boolean
If true, references an existing layer in the style instead of creating a new one.
​
sourceID
string
default:"Mapbox.StyleSource.DefaultSourceID"
The source from which to obtain the data to style. Inferred from parent source only if the layer is a direct child to it.
​
sourceLayerID
string
Identifier of the layer within the source identified by sourceID.
​
aboveLayerID
string
Inserts the layer above the specified layer ID.
​
belowLayerID
string
Inserts the layer below the specified layer ID.
​
layerIndex
number
Inserts the layer at a specified index in the layer stack.
​
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
​
minZoomLevel
number
The minimum zoom level at which the layer is visible.
​
maxZoomLevel
number
The maximum zoom level at which the layer is visible.
​
filter
FilterExpression
Filters features from the source layer based on a condition.
​
style
CircleLayerStyleProps
Customizable style attributes for the circle layer.

​
Style Properties

​
style.visibility
'visible' | 'none'
default:"visible"
Controls whether the layer is displayed.
​
style.circleRadius
number
default:"5"
Circle radius in pixels. Minimum: 0
​
style.circleColor
string
default:"#000000"
The fill color of the circle.
​
style.circleOpacity
number
default:"1"
The opacity at which the circle will be drawn. Range: 0-1.
​
style.circleStrokeWidth
number
default:"0"
The width of the circle’s stroke in pixels. Strokes are placed outside of the circleRadius. Minimum: 0
​
style.circleStrokeColor
string
default:"#000000"
The stroke color of the circle.
​
style.circleStrokeOpacity
number
default:"1"
The opacity of the circle’s stroke. Range: 0-1.
​
style.circleBlur
number
default:"0"
Amount to blur the circle. 1 blurs the circle such that only the centerpoint is full opacity.

​
Example

import { MapView, ShapeSource, CircleLayer } from '@rnmapbox/maps';

const points = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [-122.4, 37.8],
      },
      properties: { name: 'San Francisco' },
    },
  ],
};

function Map() {
  return (
    <MapView>
      <ShapeSource id="points" shape={points}>
        <CircleLayer
          id="points-circle"
          style={{
            circleRadius: 8,
            circleColor: '#3887be',
            circleOpacity: 0.8,
            circleStrokeWidth: 2,
            circleStrokeColor: '#ffffff',
          }}
        />
      </ShapeSource>
    </MapView>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us