> For the complete documentation index, see [llms.txt](https://docs.fleaflet.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fleaflet.dev/v7/layers/circle-layer.md).

# Circle Layer

You can add circle areas to maps by making them out of a center coordinate and radius using `CircleLayer` and `CircleMarker`s.

{% embed url="<https://pub.dev/documentation/flutter_map/latest/flutter_map/CircleLayer-class.html>" %}

{% embed url="<https://pub.dev/documentation/flutter_map/latest/flutter_map/CircleMarker-class.html>" %}

<figure><img src="https://content.gitbook.com/content/O2hE9FJb0PVZ0w3qEsM8/blobs/tpDh0DOAi3TM8rN58C7E/ExampleCircle.png" alt=""><figcaption><p>An example <code>CircleMarker</code></p></figcaption></figure>

```dart
CircleLayer(
  circles: [
    CircleMarker(
      point: LatLng(51.50739215592943, -0.127709825533512),
      radius: 10000,
      useRadiusInMeter: true,
    ),
  ],
),
```

{% hint style="warning" %}
Excessive use of circles may create performance issues.
{% endhint %}

## Interactivity

`CircleLayer`s and `CircleMarker`s support hit detection and interactivity.

{% content-ref url="/pages/eErmULMNQoTVxxGRc11H" %}
[Layer Interactivity](/v7/layers/layer-interactivity.md)
{% endcontent-ref %}