Editing a multiroute

Open in CodeSandbox

The link to the route editor is located in the editor field for an instance of the multiRouter.MultiRoute class.

To turn the multiroute edit mode on/off, use the functions start() and stop (), respectively.

When you turn on the edit mode, the start() function may be passed the editing parameters. For a list of valid parameters, see the comments in the code.

Note that the parameters midPointsType (a type of intermediate points that can be added when editing) and drawOver (forbidding adding points on top of map objects) are passed in the router parameters with the "editor" prefix. 

<!DOCTYPE html>

<html>
    <head>
        <title>Examples. Editing a multiroute</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="multiroute_edit.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>

function init() {
    /**
     * Creating a multiroute.
     * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml
     */
    var multiRoute = new ymaps.multiRouter.MultiRoute(
        {
            referencePoints: ["Moscow", "Tver"],
        },
        {
            /**
             * A type of intermediate points that can be added
             * when editing.
             */
            editorMidPointsType: "via",
            // In the mode for adding new waypoints, we do not allow putting points on top of the map objects.
            editorDrawOver: false,
        }
    );

    var buttonEditor = new ymaps.control.Button({
        data: { content: "Editing mode" },
    });

    buttonEditor.events.add("select", function () {
        /**
         * Enabling edit mode.
         * As options, you can pass an object with fields:
         * addWayPoints - Allows adding new waypoints by clicking on the map. Default value: false.
         * dragWayPoints - Allows dragging existing waypoints. Default value: true.
         * removeWayPoints - Allows deleting waypoints by double-clicking them. Default value: false.
         * dragViaPoints - Allows dragging existing throughpoints. Default value: true.
         * removeViaPoints - Allows deleting throughpoints by double-clicking them. Default value: true.
         * addMidPoints - Allows adding intermediate points or waypoints by dragging the marker that appears when pointing the mouse at the active route. The type of points to add is set by the midPointsType option. Default value: true.
         * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml#editor
         */
        multiRoute.editor.start({
            addWayPoints: true,
            removeWayPoints: true,
        });
    });

    buttonEditor.events.add("deselect", function () {
        // Turning off edit mode.
        multiRoute.editor.stop();
    });

    // Creating the map with the button added to it.
    var myMap = new ymaps.Map(
        "map",
        {
            center: [56.399625, 36.7112],
            zoom: 7,
            controls: [buttonEditor],
        },
        {
            buttonMaxWidth: 300,
        }
    );

    // Adding a multiroute to the map.
    myMap.geoObjects.add(multiRoute);
}

ymaps.ready(init);