Configuring the view of a multiroute

Open in CodeSandbox

Rules for displaying routes are set in the router options.

The following prefixes are available for setting options for sections of a multiroute: 

<ul>
    <li>wayPoint - display options for waypoints.</li>
    <li>wayPointStart - display options for the starting waypoint.</li>
    <li>wayPointFinish - display options for the destination waypoint.</li>
    <li>viaPoint - display options for thru points.</li>
    <li>pin - display options for point markers at waypoints.</li>
    <li>route - display options for routes.</li>
    <li>routeActive - display options for the active route.</li>
    <li>routePedestrianSegment - Options for walking segment lines on the route.</li>
    <li>editor - multiroute editor options (see <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/multiRouter.Editor">multiRouter.Editor</a>).</li>
</ul>
In this example, two routes with different display options are added to the map. To find out how to set two different views for routes that share the same model, see the Reference. 
<!DOCTYPE html>

<html>
    <head>
        <title>Examples. Configuring the view of 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_view_options.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() {
    // Declaring a set of reference points and an array of throughpoint indexes
    var referencePoints = [
        "Moscow, Leninsky Avenue",
        "Moscow, Lva Tolstogo Street, 16",
        "Moscow, Kremlin embankment",
        "Moscow, Sokolniki Park",
    ];
    viaIndexes = [2];

    // Creating a multiroute and using options to configure its appearance.
    var multiRoute = new ymaps.multiRouter.MultiRoute(
        {
            referencePoints: referencePoints,
            params: { viaIndexes: viaIndexes },
        },
        {
            // Display options for waypoints.
            wayPointStartIconColor: "#000000",
            // Setting a custom image for the last waypoint.
            wayPointFinishIconLayout: "default#image",
            wayPointFinishIconImageHref: "leaf.svg",
            wayPointFinishIconImageSize: [30, 30],
            wayPointFinishIconImageOffset: [-15, -15],
            /**
             * This allows hiding the icon for the route's waypoints.
             * wayPointVisible:false,
             */

            // Display options for throughpoints.
            viaPointIconRadius: 7,
            viaPointIconFillColor: "#000088",
            viaPointActiveIconFillColor: "#E63E92",
            /**
             * Throughpoints can be dragged,
             * and the route will adjust.
             */
            viaPointDraggable: true,
            /**
             * This allows hiding the icon for the route's throughpoints.
             * viaPointVisible:false,
             */

            // Display options for pin markers under waypoints.
            pinIconFillColor: "#000088",
            pinActiveIconFillColor: "#E63E92",
            /**
             * This allows hiding pin markers for waypoints.
             * pinVisible:false,
             */

            // Display options for the route line.
            routeStrokeWidth: 2,
            routeStrokeColor: "#000088",
            routeActiveStrokeWidth: 6,
            routeActiveStrokeColor: "#E63E92",

            // The appearance of a walking route line.
            routeActivePedestrianSegmentStrokeStyle: "solid",
            routeActivePedestrianSegmentStrokeColor: "#00CDCD",

            // Automatically set the map boundaries so the entire route is visible.
            boundsAutoApply: true,
        }
    );

    // Setting the display options for the second point by directly accessing it.
    customizeSecondPoint();

    // Creating buttons.
    var removePointsButton = new ymaps.control.Button({
            data: { content: "Deleting intermediate points" },
            options: { selectOnClick: true },
        }),
        routingModeButton = new ymaps.control.Button({
            data: { content: "Route type" },
            options: { selectOnClick: true },
        });

    // Declaring handlers for the buttons.
    removePointsButton.events.add("select", function () {
        multiRoute.model.setReferencePoints(
            [
                referencePoints[0],
                referencePoints[referencePoints.length - 1],
            ],
            []
        );
    });

    removePointsButton.events.add("deselect", function () {
        multiRoute.model.setReferencePoints(referencePoints, viaIndexes);
        // Since the second point was deleted, we have to set it up again.
        customizeSecondPoint();
    });

    routingModeButton.events.add("select", function () {
        multiRoute.model.setParams({ routingMode: "pedestrian" }, true);
    });

    routingModeButton.events.add("deselect", function () {
        multiRoute.model.setParams({ routingMode: "auto" }, true);
    });

    // Function for configuring the appearance of the second point.
    function customizeSecondPoint() {
        /**
         * Waiting for the multiroute data to load and the views of the waypoints to be created.
         * @see https://tech.yandex.com/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRouteModel-docpage/#event-requestsuccess
         */
        multiRoute.model.events.once("requestsuccess", function () {
            var yandexWayPoint = multiRoute.getWayPoints().get(1);
            // Creating a balloon for the second waypoint's marker.
            ymaps.geoObject.addon.balloon.get(yandexWayPoint);
            yandexWayPoint.options.set({
                preset: "islands#grayStretchyIcon",
                iconContentLayout: ymaps.templateLayoutFactory.createClass(
                    '<span style="color: red;">Y</span>andex'
                ),
                balloonContentLayout:
                    ymaps.templateLayoutFactory.createClass(
                        "{{ properties.address|raw }}"
                    ),
            });
        });
    }

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

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

ymaps.ready(init);