Filling a polygon with the image

Open in CodeSandbox

You can fill polygon, rectangle and circle with a background image. Specify a link to the background image in the fillImageHref option.

Type of the background fill - fillMethod. The option can take one of two values:

  • stretch - the background image stretches to fit the overlay.
  • tile - the background image is repeated without changes in size.

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Filling a polygon with the image.</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_with_image.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: [60.179022977567406, 30.505805864880234],
            zoom: 12,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Creating a polygon using the Polygon auxiliary class.
    var myPolygon = new ymaps.Polygon(
        [
            // Specifying the coordinates of the vertices of the polygon.
            [
                [60.1918981644201, 30.513391151974343],
                [60.190786978271895, 30.517596855709733],
                [60.18411906873506, 30.52532161767263],
                [60.17744980033012, 30.52789653832693],
                [60.17505537249033, 30.526866570065202],
                [60.16949620406973, 30.51313365990895],
                [60.16744334943163, 30.512961998532003],
                [60.16590362399728, 30.52034343774098],
                [60.16325170493725, 30.518626823971463],
                [60.161968441206376, 30.512790337155053],
                [60.16094179402215, 30.513476982662866],
                [60.1600006725024, 30.51055873925465],
                [60.16136956759276, 30.5016323476531],
                [60.16556145295854, 30.49922908837575],
                [60.16992386592128, 30.50060237939137],
                [60.171292346312335, 30.502147331783966],
                [60.17257524473589, 30.50060237939137],
                [60.17334495966222, 30.49734081322926],
                [60.176167092910546, 30.481719627926545],
                [60.17719326286712, 30.479659691403086],
                [60.17787735830078, 30.474509850094513],
                [60.181725128740176, 30.471248283932404],
                [60.18198163068699, 30.468158379147237],
                [60.18300761837183, 30.469531670162862],
                [60.182409129464446, 30.47210659081716],
                [60.18437555191994, 30.475368156979272],
                [60.18574342829046, 30.479659691403086],
                [60.18694027321249, 30.482921257565195],
                [60.1886499757379, 30.48446620995779],
                [60.189419312729555, 30.485496178219496],
                [60.189846714352946, 30.48927272851247],
                [60.1905305453375, 30.49098934228201],
                [60.19155626501584, 30.4903026967742],
                [60.192752897330365, 30.49665416772145],
                [60.191043409196396, 30.5042072683074],
                [60.19232553367115, 30.509185448239027],
                [60.1918981644201, 30.513391151974343],
            ],
        ],
        // Defining properties of the geo object.
        {
            // The contents of the balloon.
            balloonContent: "Fishing spots",
        },
        {
            /**
             * Describing the geo object options.
             * Fill color.
             */
            fillImageHref: "lake.svg",
            // Type of background fill.
            fillMethod: "stretch",
            // Hiding the stroke.
            stroke: false,
        }
    );

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