Specifying images for the polyline editor

Open in CodeSandbox

A visual editor is available for polylines. A link to the editor is in the editor field of the polyline object.

The vertexInteractiveOptions and edgeInteractiveOptions options allow you to use options with postfixes for the placemark vertices and interim points linked to the current status of the vertex. If you don't have to change the options of the vertices and the interim placemarks depending on their condition, you should disable the corresponding option. The following postfixes for the placemark vertices are available:

  • Hover - Options with this given postfix are used when the user hovers over a vertex with the mouse pointer.
  • Drag - Options with this given postfix are used when the user drags a vertex.
  • Active - Options with this given postfix are used when the context menu is open on a vertex.
Examples of such options: vertexLayoutHover, vertexIconImageSizeActive, vertexIconImageShapeHover, etc.

The following postfixes are available for intermediate points:

  • Hover - Options with this given postfix are used when the user hovers over a placemark with the mouse pointer.
  • Drag - Options with this given postfix are used when the user drags a placemark.
Examples of such options: edgeLayoutHover, edgeIconImageShapeHover, etc. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Specifying images for the polyline editor</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>&amp;coordorder=longlat"
            type="text/javascript"
        ></script>
        <script src="editor_icon_layout.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: [90, 15],
            zoom: 3,
            controls: [],
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Creating a polyline.
    var myPolyline = new ymaps.Polyline(
        [
            // Specifying the coordinates of the vertices.
            [70, 20],
            [70, 40],
            [90, 15],
            [70, -10],
        ],
        {},
        {
            /**
             * Setting geo object options.
             * Color with transparency.
             */
            strokeColor: "#FF008888",
        }
    );

    myPolyline.editor.options.set({
        /**
         * Specifying options with postfixes linked to the current state of the vertex.
         * The layout class for placemarks on the vertices of a polyline.
         */
        vertexLayout: "default#image",
        // URL of the image file.
        vertexIconImageHref: "icons/button1.svg",
        // Dimensions of the image layer.
        vertexIconImageSize: [16, 16],
        // Offset of the image relative to the anchor point.
        vertexIconImageOffset: [-8, -8],

        // Options with this given postfix are used when the user hovers over a vertex with the mouse pointer.
        vertexLayoutHover: "default#image",
        vertexIconImageSizeHover: [28, 28],
        vertexIconImageOffsetHover: [-14, -14],

        // Options with this given postfix are used when the context menu is open on a vertex.
        vertexLayoutActive: "default#image",
        vertexIconImageHrefActive: "icons/button1-active.svg",
        vertexIconImageSizeActive: [16, 16],
        vertexIconImageOffsetActive: [-8, -8],

        // Options with this given postfix are used when the user drags a vertex.
        vertexLayoutDrag: "default#image",
        vertexIconImageHrefDrag: "icons/button1-active.svg",
        vertexIconImageSizeDrag: [16, 16],
        vertexIconImageOffsetDrag: [-8, -8],

        // Specifying options with postfixes for interim placemarks which are linked to the current state of the interim placemarks.
        edgeLayout: "default#image",
        edgeIconImageHref: "icons/button2.svg",
        edgeIconImageSize: [16, 16],
        edgeIconImageOffset: [-8, -8],

        // Options with this given postfix are used when the user hovers over an interim placemark with the mouse pointer.
        edgeLayoutHover: "default#image",
        edgeIconImageSizeHover: [28, 28],
        edgeIconImageOffsetHover: [-14, -14],

        // Options with this given postfix are used when the user drags an interim placemark.
        edgeLayoutDrag: "default#image",
        edgeIconImageHrefDrag: "icons/button2-icon.svg",
        edgeIconImageSizeDrag: [16, 16],
        edgeIconImageOffsetDrag: [-8, -8],
    });

    // Adding a line to the map.
    myMap.geoObjects.add(myPolyline);

    // Turning on the edit mode.
    myPolyline.editor.startEditing();
}