Элемент управления "Пробки"

Open in CodeSandbox

Элемент управления — визуальный объект, позволяющий пользователю управлять картой (например, перемещать карту, изменять её тип или коэффициент масштабирования).

Каждый элемент управления реализуется отдельным классом из пространства имен control (например, control.Button).

Элемент управления "пробки" можно подключать как через ключ 'trafficControl', так и создавая экземпляр класса control.TrafficControl. При создании экземпляра класса можно указывать начальное состояние элемента управления. 

<!DOCTYPE html>
<html>
    <head>
        <title>Элементы управления "Пробки"</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script src="traffic_control.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() {
    var myMap = new ymaps.Map("map", {
        center: [56.136, 40.39],
        zoom: 10,
        controls: [],
    });

    // Создадим элемент управления "Пробки".
    var trafficControl = new ymaps.control.TrafficControl({
        state: {
            // Отображаются пробки "Сейчас".
            providerKey: "traffic#actual",
            // Начинаем сразу показывать пробки на карте.
            trafficShown: true,
        },
    });
    // Добавим контрол на карту.
    myMap.controls.add(trafficControl);
    // Получим ссылку на провайдер пробок "Сейчас" и включим показ инфоточек.
    trafficControl
        .getProvider("traffic#actual")
        .state.set("infoLayerShown", true);
}