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. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Circle</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
            type="text/javascript"
        ></script>
        <script src="circle.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

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);
}