Polygon

Open in CodeSandbox

A polygon is a closed shape consisting of a set of sequentially connected vertices. A polygon can have internal contours.

A polygon can be created in two ways: using the GeoObject class with the "Polygon" geometry type, or using the Polygon auxiliary class.

When creating a polygon, you must specify the coordinates of its vertices. You can also set the properties (for example the contents of a balloon or hint) and options (such as fill color or contour style) of the polygon.

A visual editor is available for polygons. A link to the editor is in the editor field of the polygon object.

Polygons, like other geo objects, can be combined in collections. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Polygon</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="polygon.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() {
    var myMap = new ymaps.Map(
        "map",
        {
            center: [55.73, 37.75],
            zoom: 10,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Creating a polygon using the GeoObject class.
    var myGeoObject = new ymaps.GeoObject(
        {
            // Describing the geometry of the geo object.
            geometry: {
                // The "Polygon" geometry type.
                type: "Polygon",
                // Specifying the coordinates of the vertices of the polygon.
                coordinates: [
                    // The coordinates of the vertices of the external contour.
                    [
                        [55.75, 37.8],
                        [55.8, 37.9],
                        [55.75, 38.0],
                        [55.7, 38.0],
                        [55.7, 37.8],
                    ],
                    // The coordinates of the vertices of the inner contour.
                    [
                        [55.75, 37.82],
                        [55.75, 37.98],
                        [55.65, 37.9],
                    ],
                ],
                // Setting the fill rule for internal contours using the "nonZero" algorithm.
                fillRule: "nonZero",
            },
            // Defining properties of the geo object.
            properties: {
                // The contents of the balloon.
                balloonContent: "Polygon",
            },
        },
        {
            /**
             * Describing the geo object options.
             *  Fill color.
             */
            fillColor: "#00FF00",
            // Stroke color.
            strokeColor: "#0000FF",
            // The overall transparency (for both fill and stroke).
            opacity: 0.5,
            // The stroke width.
            strokeWidth: 5,
            // The stroke style.
            strokeStyle: "shortdash",
        }
    );

    // Adding the polygon to the map.
    myMap.geoObjects.add(myGeoObject);

    // Creating a polygon using the Polygon auxiliary class.
    var myPolygon = new ymaps.Polygon(
        [
            /**
             * Specifying the coordinates of the vertices of the polygon.
             *  The coordinates of the vertices of the external contour.
             */
            [
                [55.75, 37.5],
                [55.8, 37.6],
                [55.75, 37.7],
                [55.7, 37.7],
                [55.7, 37.5],
            ],
            // The coordinates of the vertices of the inner contour.
            [
                [55.75, 37.52],
                [55.75, 37.68],
                [55.65, 37.6],
            ],
        ],
        {
            /**
             * Describing the properties of the geo object.
             *  The contents of the balloon.
             */
            hintContent: "Polygon",
        },
        {
            /**
             * Setting geo object options.
             *  Fill color.
             */
            fillColor: "#00FF0088",
            // The stroke width.
            strokeWidth: 5,
        }
    );

    // Adding the polygon to the map.
    myMap.geoObjects.add(myPolygon);
}