Multistroke outline

Open in CodeSandbox

A polyline is a shape consisting of a set of sequentially connected vertices. The polyline can have self-intersections.

The polyline can be created in two ways: using the GeoObject class with the "Polyline" geometry type, or using the Polyline auxiliary class.

When creating a polyline, you can set properties (such as the contents of a balloon or hint) and options (such as color and line width).

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

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Multistroke outline</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="multystroke.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.72, 37.44],
            zoom: 10,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Creating a polyline using the GeoObject class.
    var myGeoObject = new ymaps.GeoObject(
        {
            // Describing the geometry of the geo object.
            geometry: {
                // The "Polyline" geometry type.
                type: "LineString",
                // Specifying the coordinates of the vertices of the polyline.
                coordinates: [
                    [55.8, 37.5],
                    [55.7, 37.4],
                ],
            },
            // Defining properties of the geo object.
            properties: {
                // The contents of the hint.
                hintContent: "I'm a geo object",
                // The contents of the balloon.
                balloonContent: "You can drag me",
            },
        },
        {
            /**
             * Setting the geo object options.
             *  Enabling drag-n-drop for the polyline.
             */
            draggable: true,
            // Line color - two values
            strokeColor: ["#000", "#FFFF00"],
            // Line width - two values
            strokeWidth: [8, 5],
        }
    );

    // Creating a polyline using the Polyline auxiliary class.
    var myPolyline = new ymaps.Polyline(
        [
            // Specifying the coordinates of the vertices of the polyline.
            [55.8, 37.5],
            [55.8, 37.4],
            [55.7, 37.5],
            [55.7, 37.4],
        ],
        {
            /**
             * Describing the properties of the geo object.
             *  The contents of the balloon.
             */
            balloonContent: "Polyline",
        },
        {
            /**
             * Setting options for the geo object. Disabling the close button on a balloon.
             *
             */
            balloonCloseButton: false,
            // Line color - black, white and red
            strokeColor: ["#000000", "#FFF", "#F00"],
            // Line width.
            strokeWidth: [9, 8, 1],
            // Setting the style for the third outline
            strokeStyle: [0, 0, "dash"],
        }
    );

    // Adding lines to the map.
    myMap.geoObjects.add(myGeoObject).add(myPolyline);
}