# Circle Layer
A circle layer renders map features as filled circles. The layer data source should supply point data. The radius (in pixels) of a circle is specified by the circle-radius property. A stroked outline can be added by specifying the circle-stroke-width, circle-stroke-color and circle-stroke-opacity properties.
<flow-map-layer type="circle" ...>
circle-color: red;
circle-radius: @prop1 * 10;
</flow-map-layer>
# Layout Properties
▸ circle-sort-key (opens new window)
number.
Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key.
# Paint Properties
▸ circle-blur (opens new window)
Optional number (default: 0).
Amount to blur the circle. 1 blurs the circle such that only the centerpoint is full opacity.
▸ circle-opacity (opens new window)
Optional number (default: 1): between 0 and 1 inclusive.
The opacity at which the circle will be drawn.
▸ circle-translate (opens new window)
Optional array (default: 0,0).
The geometry's offset. Values are [x, y] where negatives indicate left and up, respectively.
▸ circle-translate-anchor (opens new window)
Optional enum (default: map).
| Value | Description |
|---|---|
map | The circle is translated relative to the map. |
viewport | The circle is translated relative to the viewport. |
Controls the frame of reference for
circle-translate.▸ circle-pitch-scale (opens new window)
Optional enum (default: map).
| Value | Description |
|---|---|
map | Circles are scaled according to their apparent distance to the camera. |
viewport | Circles are not scaled. |
Controls the scaling behavior of the circle when the map is pitched.
▸ circle-pitch-alignment (opens new window)
Optional enum (default: viewport).
| Value | Description |
|---|---|
map | The circle is aligned to the plane of the map. |
viewport | The circle is aligned to the plane of the viewport. |
Orientation of circle when map is pitched.
▸ circle-stroke-width (opens new window)
Optional number (default: 0): minimum = 0.
The width of the circle's stroke. Strokes are placed outside of the
circle-radius.▸ circle-stroke-color (opens new window)
Optional color (default: #000000).
The stroke color of the circle.
▸ circle-stroke-opacity (opens new window)
Optional number (default: 1): between 0 and 1 inclusive.
The opacity of the circle's stroke.