---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/traffic_provider.md
  - https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/traffic_provider.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt

# Traffic layer on the map without buttons added

<iframe id="LIVE-EXAMPLE" style="width:100%;height: 400px;border-radius: 8px;border: 1px solid rgba(92, 94, 102, 0.14);" frameBorder="0" src="https://yastatic.net/s3/front-maps-static/maps-front-jsapi-v2-1/examples/2/out/s3-cases/en/traffic_provider/index.html" allow="fullscreen"></iframe>

<a target="_blank" rel="noopener noreferrer" style="display: inline-block;margin-top: 10px;cursor: pointer;border-radius: 4px;padding: 9px 12px;background: #151515;color: white;text-decoration: none;font-weight: 500" href="https://codesandbox.io/p/sandbox/lqqj7x?file=index.html">Open in CodeSandbox</a>

<div id="references">
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ready">ready</a>,
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Map">Map</a>, 
    <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/traffic.provider.Actual">traffic.provider.Actual</a>
</div>
<p>
    You can add a map layer with traffic information. However, you don't have to put the "Traffic" control on the map. You just have to add the corresponding traffic data provider to the map. This example uses the "Current" traffic provider <a href="https://yandex.ru/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/traffic.provider.Actual">traffic.provider.Actual</a>. 
</p>

{% list tabs %}

-   index.html

    ```html
    <!DOCTYPE html>
    <html>
        <head>
            <title>
                Examples. Traffic layer on the map without buttons added
            </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/
        -->
            
            
            
        </head>
        <body>
            <div id="map"></div>
        </body>
    </html>
    ```

-   traffic_provider.js

    ```js
    ymaps.ready(init);

    function init() {
        var myMap = new ymaps.Map("map", {
            center: [56.136, 40.39],
            zoom: 10,
            controls: [],
        });

        // Creating a "Now" traffic provider with the layer of information points enabled.
        var actualProvider = new ymaps.traffic.provider.Actual(
            {},
            { infoLayerShown: true }
        );
        // And then adding it to the map.
        actualProvider.setMap(myMap);

        /**
         * Removing the provider from the map is also performed through setMap.
         * actualProvider.setMap(null);
         */
    }
    ```

{% endlist %}
