---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/circle.md
- https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/circle.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/en/llms.txt
# Circle
Open in CodeSandbox
A circle can be created using the Circle class.
When creating a circle, you must specify the coordinates of its center and radius (in meters). You can also set properties (such as the contents of the balloon or hint) and options (such as the fill color) for the circle.
Circles can be combined in a collection.
{% list tabs %}
- index.html
```html
Examples. Circle
```
- circle.js
```js
ymaps.ready(init);
function init() {
// Creating the map.
var myMap = new ymaps.Map(
"map",
{
center: [55.76, 37.64],
zoom: 10,
},
{
searchControlProvider: "yandex#search",
}
);
// Creating a circle.
var myCircle = new ymaps.Circle(
[
// The coordinates of the center of the circle.
[55.76, 37.6],
// The radius of the circle in meters.
10000,
],
{
/**
* Describing the properties of the circle.
* The contents of the balloon.
*/
balloonContent: "Radius of the circle: 10 km",
// The contents of the hint.
hintContent: "Move me",
},
{
/**
* Setting the circle options.
* Enabling drag-n-drop for the circle.
*/
draggable: true,
/**
* Fill color.
* The last byte (77) defines transparency.
* The transparency of the fill can also be set using the option "fillOpacity".
*/
fillColor: "#DB709377",
// Stroke color.
strokeColor: "#990066",
// Stroke transparency.
strokeOpacity: 0.8,
// The width of the stroke in pixels.
strokeWidth: 5,
}
);
// Adding the circle to the map.
myMap.geoObjects.add(myCircle);
}
```
{% endlist %}