---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/llms.txt

# control.TrafficControl

Расширяет [IControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md), [ICustomizable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md).

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

## Конструктор {#constructor}

```javascript
control.TrafficControl([state[, options]])
```

**Параметры:**

#|
|| **Параметр** | **Значение по умолчанию** | **Описание** ||
|| `state` | — | Тип: Object

Состояние контрола. ||
|| `state.providerKey` | 'traffic#actual' | Тип: String

Ключ провайдера пробок, показываемых на карте. 
• 'traffic#actual' - пробки "сейчас"

• 'traffic#archive' - пробки "обычно" ||
|| `state.shown` | false | Тип: Boolean

Показаны ли данные по пробкам на карте. ||
|| `options` | — | Тип: Object

Опции контрола. ||
|| `options.layout` | — | Тип: Function\|String

Макет элемента управления. В конструктор макета передается объект, содержащий поля: 
• control - ссылка на элемент управления;

• options - менеджер опций элемента управления control.TrafficControl.options;

• data - менеджер данных элемента управления [control.TrafficControl.data](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#data);

• state - менеджер состояния элемента управления [control.TrafficControl.state](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#state).

Макет меняет свой внешний вид на основе данных, состояния и опций элемента управления. Элемент управления, в свою очередь, реагирует на интерфейсные события макета и меняет значения полей [control.TrafficControl.state](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#state) в зависимости от полученных команд. (Тип: конструктор объекта с интерфейсом [ITrafficControlLayout](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ITrafficControlLayout.md) или ключ макета). ||
|| `options.position` | \{top: 5, right: 120\}  | Тип: Object

Положение элемента управления над картой. Задается в виде объекта со следующими полями: 
• top - отступ от верхнего края контейнера карты в пикселах;

• right - отступ от правого края контейнера карты в пикселах;

• bottom - отступ от нижнего края контейнера карты в пикселах;

• left - отступ от левого края контейнера карты в пикселах.

Если при этом заданы одновременно и top, и bottom, то значение bottom игнорируется. Аналогично, если заданы одновременно и left, и right, то значение right игнорируется. Если элемент управления добавляется в группу элементов (например, в тулбар или раскрывающийся список), то значение position не применяется. ||
|| `options.visible` | true | Тип: Boolean

Признак того, что элемент управления отображается. ||
|#

**Примеры:**

**1.**

```javascript
// Пример 1.
// Добавление на карту элемента управления пробками
// с включенными пробками "сейчас".
var trafficControl = new ymaps.control.TrafficControl({shown: true});
map.controls.add(trafficControl, {top: 10, left: 10});
```

**2.**

```javascript
// Пример 2.
// В примере используется jQuery, загруженный с http://yandex.st/jquery/1.6.4/jquery.min.js
// Добавление на карту пользовательской панели управления пробками.
var MyTrafficControlLayout = ymaps.templateLayoutFactory.createClass("<div id='traffic'>" +
    "<div id='shown'>[if state.shown]hide[else]show[endif]</div>" +
    "[if state.shown]" +
        "<div id='now'>now</div>" +
        "<div id='usually'>usually</div>" +
    "[endif]" +
    "</div>", {
              
    build: function () {
        // Вызываем родительский метод.
        MyTrafficControlLayout.superclass.build.call(this);
        // Запоминаем функции-обработчики, для которых закреплен контекст,
        // чтобы потом от них отписаться.
        this.actualCallback = ymaps.util.bind(this.setActualProvider, this);
        this.archiveCallback = ymaps.util.bind(this.setArchiveProvider, this);
        this.shownCallback = ymaps.util.bind(this.checkShown, this);
        // Подписываемся на клики на элементах панели.
        $('#shown').bind('click', this.shownCallback);
        $('#now').bind('click', this.actualCallback);
        $('#usually').bind('click', this.archiveCallback);
     },
     clear: function () {
         // Отписываемся от событий на элементах панели.
         $('#shown').unbind('click', this.shownCallback);
         $('#now').unbind('click', this.actualCallback);
         $('#usually').unbind('click', this.archiveCallback);
         // Вызываем родительский метод.
         MyTrafficControlLayout.superclass.clear.call(this);
     },
                  
     setActualProvider: function () {
         // Для смены провайдера инициируем событие, описанное в ITrafficControlLayout.
         this.events.fire('providerkeychange', {newProviderKey: 'traffic#actual'});
     },
                  
     setArchiveProvider: function () {
         // Для смены провайдера инициируем событие, описанное в ITrafficControlLayout.
         this.events.fire('providerkeychange', {newProviderKey: 'traffic#archive'});
     },
                  
     checkShown: function () {
         // Проверяем состояние элемента управления,
         // и в зависимости от результата генерируем одно из событий
         // интерфейса ITrafficControlLayout.
         if (this.getData().state.get('shown')) {
             this.events.fire('hide');
         } else {
             this.events.fire('show');
         }
     }
});
var trafficControl = new ymaps.control.TrafficControl({}, {layout: MyTrafficControlLayout});
```
## Поля {#fields}

#|
|| **Имя** | **Тип** | **Описание** ||
|| [data](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBoxItem.md#data) | [data.Manager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/data.Manager.md) | Данные панели. ||
|| [events](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IEventEmitter.md#events) | [IEventManager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IEventManager.md) | Менеджер событий.

Унаследовано от [IEventEmitter](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IEventEmitter.md#events). ||
|| [options](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#options) | [IOptionManager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IOptionManager.md) | Менеджер опций.

Унаследовано от [ICustomizable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#options). ||
|| [state](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBoxItem.md#state) | [data.Manager](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/data.Manager.md) | Состояние панели. Имена полей, доступных через метод data.Manager.get:
• shown - признак, показан ли на карте провайдер пробок;

• providerKey - ключ провайдера, который показывает панель. Может принимать значения 'traffic#actual' или 'traffic#archive';

• expanded - признак, развернута ли панель. ||
|#

## События {#events}

#|
|| **Имя** | **Описание** ||
|| [collapse](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#collapse) | Панель пробок свернута. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). ||
|| [expand](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#expand) | Панель пробок развернута. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). ||
|| [hide](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#hide) | Пробки скрыты. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). ||
|| [mapchange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChildOnMap.md#mapchange) | Сменилась карта. Поля данных:

• oldMap - старая карта;

• newMap - новая карта.

Унаследовано от [IChildOnMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChildOnMap.md#mapchange). ||
|| [optionschange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#optionschange) | Изменение в опциях объекта.

Унаследовано от [ICustomizable](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ICustomizable.md#optionschange). ||
|| [parentchange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChild.md#parentchange) | Сменился родительский объект.

Поля данных:

• oldParent - старый родитель;

• newParent - новый родитель.

Унаследовано от [IChild](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChild.md#parentchange). ||
|| [providerkeychange](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#providerkeychange) | Сменился ключ провайдера. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). Имена полей, доступных через метод Event.get:

• newProviderKey - новое значение ключа провайдера;

• oldProviderKey - старое значение ключа. ||
|| [show](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#show) | Показаны пробки. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). ||
|#

## Методы {#method}

#|
|| **Имя** | **Возвращает** | **Описание** ||
|| [collapse](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#collapse)() |  | Свернуть панель пробок. ||
|| [expand](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#expand)() |  | Развернуть панель пробок. ||
|| [getParent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#getParent)() | [IControlParent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControlParent.md) | Returns ссылку на родительский объект.

Унаследован от [IControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#getParent). ||
|| [getProvider](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#getProvider)([[key](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#getProvider-param-key)]) | [ITrafficProvider](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ITrafficProvider.md) | Returns экземпляр провайдера пробок. ||
|| [hide](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#hide)() |  | Скрыть провайдер пробок с карты. ||
|| [isExpanded](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#isExpanded)() | Boolean | Returns признак, развернута ли панель. ||
|| [isShown](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#isShown)() | Boolean | Returns признак, показан ли провайдер пробок на карте. ||
|| [setParent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#setParent)([parent](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#setParent-param-parent)) | [IChildOnMap](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IChildOnMap.md) | Устанавливает родительский объект.

Унаследован от [IControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md#setParent). ||
|| [show](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.TrafficControl.md#show)() |  | Показать провайдер пробок на карте. ||
|#

## Описание полей {#description-fields}

### data

```javascript
{data.Manager} data
```

Данные панели.

### state

```javascript
{data.Manager} state
```

Состояние панели. Имена полей, доступных через метод data.Manager.get:

• shown - признак, показан ли на карте провайдер пробок;

• providerKey - ключ провайдера, который показывает панель. Может принимать значения 'traffic#actual' или 'traffic#archive';

• expanded - признак, развернута ли панель.

## Описание событий {#description-events}

### collapse

Панель пробок свернута. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md).

### expand

Панель пробок развернута. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md).

### hide

Пробки скрыты. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md).

### providerkeychange

Сменился ключ провайдера. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md). Имена полей, доступных через метод Event.get:

• newProviderKey - новое значение ключа провайдера;

-• oldProviderKey - старое значение ключа.

### show

Показаны пробки. Экземпляр класса [Event](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Event.md).

## Описание методов {#description-methods}

### collapse

```javascript
{} collapse()
```

Свернуть панель пробок.

### expand

```javascript
{} expand()
```

Развернуть панель пробок.

### getProvider

```javascript
{ITrafficProvider} getProvider([key])
```

**Returns** экземпляр провайдера пробок.

**Параметры:**

#|
|| **Параметр** | **Значение по умолчанию** | **Описание** ||
|| `key` | — | Тип: String

Ключ провайдера информации о пробках. Список доступных ключей: 
• 'traffic#actual' - провайдер пробок "сейчас";

• 'traffic#archive' - провайдер пробок "обычно".

Если параметр не передан, возвращается текущий провайдер. ||
|#

**Пример:**

```javascript
// Добавим на карту контрол пробок.
map.controls.add('trafficControl');
// Провайдер пробок "сейчас" при открытии будет показывать слой дорожных событий.
map.controls.get('trafficControl').getProvider('traffic#actual').state.set('infoLayerShown', true);
```
### hide

```javascript
{} hide()
```

Скрыть провайдер пробок с карты.

### isExpanded

```javascript
{Boolean} isExpanded()
```

**Returns** признак, развернута ли панель.

### isShown

```javascript
{Boolean} isShown()
```

**Returns** признак, показан ли провайдер пробок на карте.

### show

```javascript
{} show()
```

Показать провайдер пробок на карте.