Traffic control

Open in CodeSandbox

A control is a visual object that allows the user to manipulate the map (for example, move the map, change its type, or change the zoom).

Each control is implemented by a separate class from the 'control' namespace (for example, control.Button).

The "Traffic" control can be enabled either via the 'trafficControl' key, or by creating an instance of the control.TrafficControl class. When creating an instance of the class, you can specify the initial state of the control. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. "Traffic" control</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="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: [],
    });

    // Creating the "Traffic" control.
    var trafficControl = new ymaps.control.TrafficControl({
        state: {
            // Displaying traffic "Now".
            providerKey: "traffic#actual",
            // Begin immediately showing traffic on the map.
            trafficShown: true,
        },
    });
    // Adding the control to the map.
    myMap.controls.add(trafficControl);
    // Getting a reference to the "Now" traffic provider and enabling the display of information points.
    trafficControl
        .getProvider("traffic#actual")
        .state.set("infoLayerShown", true);
}