Rectangle

Open in CodeSandbox

A rectangle can be created in two ways: using the GeoObject class indicating the "Rectangle" geometry type, or using an auxiliary Rectangle class.

When creating a rectangle, you must specify the coordinates of two opposite vertices. You may also specify its properties (for example, the contents of its balloon or hint) and options (such as fill color).

Rectangles can be combined in a collection. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Rectangle</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="rectangle.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);
var myMap, myGeoObject, myRectangle;

function init() {
    myMap = new ymaps.Map(
        "map",
        {
            center: [55.674, 37.601],
            zoom: 11,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Creating a geo object with the "rectangle" geometry type.
    myGeoObject = new ymaps.GeoObject(
        {
            // Geometry = geometry type + the coordinates of the geo object.
            geometry: {
                // The geometry type is rectangle.
                type: "Rectangle",
                // The coordinates.
                coordinates: [
                    [55.665, 37.66],
                    [55.64, 37.53],
                ],
            },
            // Properties.
            properties: {
                hintContent: "Drag me!",
                balloonContent: "Rectangle 2",
            },
        },
        {
            /**
             * Options.
             *  The object can be dragged.
             */
            draggable: true,
            // The fill color and transparency.
            fillColor: "#ffff0022",
            // The color and transparency of borders.
            strokeColor: "#3caa3c88",
            // Line width.
            strokeWidth: 7,
        }
    );

    // Creating a rectangle using an auxiliary class.
    myRectangle = new ymaps.Rectangle(
        [
            // Setting the coordinates of the diagonal corners of the rectangle.
            [55.66, 37.6],
            [55.71, 37.69],
        ],
        {
            //Properties
            hintContent: "You can't drag me!",
            balloonContent: "Rectangle 1",
        },
        {
            /**
             * Options.
             *  The fill color and transparency.
             */
            fillColor: "#7df9ff33",
            /**
             * Additional fill transparency.
             *  The resulting transparency will not be #33(0.2), but 0.1(0.2*0.5).
             */
            fillOpacity: 0.5,
            // Stroke color.
            strokeColor: "#0000FF",
            // Stroke transparency.
            strokeOpacity: 0.5,
            // Line width.
            strokeWidth: 2,
            /**
             * The radius of rounded corners.
             *  This option is accepted only for a rectangle.
             */
            borderRadius: 6,
        }
    );

    myMap.geoObjects.add(myRectangle).add(myGeoObject);
}