Building a driving multiroute

Open in CodeSandbox

The multirouter allows planning multiple routes at once using the set points.

The multiRouter.MultiRoute class is used for creating a multiroute. The following objects are passed as its parameters:

  • The multiroute model. It is defined as an object with fields:
    • referencePoints - Array of reference points for the route. Note that if more than two reference points are set, the router only returns one route.
    • params - Routing parameters (for example, the type of routing, consider traffic, and so on).
  • router options. The options specify rules for displaying routes on the map.

All anchor points on the route are divided into waypoints (wayPoint) and throughpoints (viaPoint). Waypoints are points at which you must stop, and throughpoints are passed through on the route without stopping.

After all the routes are built, the shortest one is activated automatically. This route is shown in purple on the map. Gray dotted lines denote transfers from one type of transport to another, or crossing from one station to another (for public transport routes).
Inactive routes are shown in gray. To switch the active route, just right-click the desired route. The active route can also be switched programmatically. See multiRouter.MultiRouteModel#methods-summary. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Building a driving 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_driving.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.
     * The first argument passes either the model or object description model.
     * The second argument passes the multiroute display options.
     * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml
     * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel.xml
     */
    var multiRoute = new ymaps.multiRouter.MultiRoute(
        {
            // The description of the reference points on the multi-stop route.
            referencePoints: [
                [55.734876, 37.59308],
                "Moscow, Myasnitskaya Street",
            ],
            // Routing options.
            params: {
                // Limit on the maximum number of routes returned by the router.
                results: 2,
            },
        },
        {
            // Automatically set the map boundaries so the entire route is visible.
            boundsAutoApply: true,
        }
    );

    // Creating buttons for controlling the multiroute.
    var trafficButton = new ymaps.control.Button({
            data: { content: "Considering traffic" },
            options: { selectOnClick: true },
        }),
        viaPointButton = new ymaps.control.Button({
            data: { content: "Adding a throughpoint" },
            options: { selectOnClick: true },
        });

    // Declaring handlers for the buttons.
    trafficButton.events.add("select", function () {
        /**
         * Setting routing parameters for the multiroute model.
         * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel.xml#setParams
         */
        multiRoute.model.setParams({ avoidTrafficJams: true }, true);
    });

    trafficButton.events.add("deselect", function () {
        multiRoute.model.setParams({ avoidTrafficJams: false }, true);
    });

    viaPointButton.events.add("select", function () {
        var referencePoints = multiRoute.model.getReferencePoints();
        referencePoints.splice(1, 0, "Moscow, Solyanka Street, 7");
        /**
         * Adding a throughpoint to the multiroute model.
         * Note that throughpoints can only be placed between two waypoints.
         * In other words, they can't be end points on a route.
         * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel.xml#setReferencePoints
         */
        multiRoute.model.setReferencePoints(referencePoints, [1]);
    });

    viaPointButton.events.add("deselect", function () {
        var referencePoints = multiRoute.model.getReferencePoints();
        referencePoints.splice(1, 1);
        multiRoute.model.setReferencePoints(referencePoints, []);
    });

    // Creating the map with buttons added to it.
    var myMap = new ymaps.Map(
        "map",
        {
            center: [55.750625, 37.626],
            zoom: 7,
            controls: [trafficButton, viaPointButton],
        },
        {
            buttonMaxWidth: 300,
        }
    );

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

ymaps.ready(init);