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

# control.TrafficControl

Extends [IControl](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md), [ICustomizable](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md).

The traffic control panel on the map.

[Constructor](#constructor-summary) | [Fields](#properties-summary) | [Events](#events-summary) | [Methods](#methods-summary)

## Constructor {#constructor-summary}

```javascript
control.TrafficControl([parameters])
```

**Parameters:**

#|
|| **Parameter** | **Default value** | **Description**  ||
|| [`parameters`](#param-parameters) | — | Type: Object

Control parameters. ||
|| [`parameters.options`](#param-parameters.options) | — | Type: Object

Control options. ||
|| [`parameters.options.adjustMapMargin`](#param-parameters.options.adjustMapMargin) | false | Type: Boolean

Whether the control registers its size in the map margins manager [map.margin.Manager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/map.margin.Manager.md). ||
|| [`parameters.options.collapseOnBlur`](#param-parameters.options.collapseOnBlur) | true | Type: Boolean

This flag enables to collapse the panel when the control loses focus. For example, when a user clicks on the document. ||
|| [`parameters.options.float`](#param-parameters.options.float) | "right" | Type: String

The side to which you want to align the control. Can take three values: "left", "right" or "none". If set to "left" or "right", the controls are arranged one by one, starting from the left or right edge of the map, respectively. If set to "none", the controls are positioned according to the values of the left, right, bottom and top options, relative to the boundaries of the map. See also the description of the position option. ||
|| [`parameters.options.floatIndex`](#param-parameters.options.floatIndex) | 100 | Type: Number

The priority of the control positioning. The element with highest priority is positioned closer to the map boundary that is specified in the float property. Does not work with float = "none". ||
|| [`parameters.options.layout`](#param-parameters.options.layout) | — | Type: Function\|String

Control layout. The layout constructor is passed an object containing the fields: 
- control - Reference to the control.
- options - Control options manager for the control.TrafficControl.options control.
- data - Control data manager for the [control.TrafficControl.data](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#data) control.
- state - Control state manager for the [control.TrafficControl.state](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#state) control.
The layout's outward appearance changes based on the control's data, state and options. The control, in turn, reacts to layout interface events and changes the values of fields for [control.TrafficControl.state](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#state) depending on the commands received. (Type: constructor for an object with the [ITrafficControlLayout](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ITrafficControlLayout.md) interface). ||
|| [`parameters.options.maxWidth`](#param-parameters.options.maxWidth) | [26, 195, 195] | Type: Number\|Number[]

The maximum width of the button in different states. If a number is specified, it is assumed that the control has the same maximum dimensions in all states. If an array is specified, it will be interpreted as the maximum width in different states from the lesser to the greater. The number of states is set in the instance of the class [control.Manager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.Manager.md), which is usually a field of [Map.controls](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Map.md#controls), via the "states" option. By default, the controls have three states ['small', 'medium', 'large']. ||
|| [`parameters.options.position`](#param-parameters.options.position) | — | Type: Object

Object describing the position of a control. If the position option is set, the float option value is automatically treated as "none". ||
|| [`parameters.options.position.bottom`](#param-parameters.options.position.bottom) | 'auto' | Type: Number\|String

Position relative to the bottom edge of the map. ||
|| [`parameters.options.position.left`](#param-parameters.options.position.left) | 'auto' | Type: Number\|String

Position relative to the left edge of the map. ||
|| [`parameters.options.position.right`](#param-parameters.options.position.right) | 'auto' | Type: Number\|String

Position relative to the right edge of the map. ||
|| [`parameters.options.position.top`](#param-parameters.options.position.top) | 'auto' | Type: Number\|String

Position relative to the top edge of the map. ||
|| [`parameters.options.size`](#param-parameters.options.size) | 'auto' | Type: String

Defines the appearance of the standard traffic control layout. Takes the following values: 
- 'auto' - The layout is changed automatically depending on the dimensions of the map and the number of added controls.
- 'small' - The button layout displays the traffic light icon, regardless of the map size.
- 'large' - The button layout always displays both the traffic light icon and text, regardless of the map size. ||
|| [`parameters.options.visible`](#param-parameters.options.visible) | true | Type: Boolean

Indicates if the control is displayed. ||
|| [`parameters.state`](#param-parameters.state) | — | Type: Object

State of the control. ||
|| [`parameters.state.providerKey`](#param-parameters.state.providerKey) | 'traffic#actual' | Type: String

Key for the provider of traffic info shown on the map. 
- 'traffic#actual' - Traffic "right now".
- 'traffic#archive' - Traffic "normally". ||
|| [`parameters.state.trafficShown`](#param-parameters.state.trafficShown) | false | Type: Boolean

Whether traffic data is shown on the map. ||
|#


**Example:**

```javascript
// Adding the traffic control to the map
// with "current" traffic enabled.
var trafficControl = new ymaps.control.TrafficControl({state: {trafficShown: true}});
map.controls.add(trafficControl, {top: 10, left: 10});
```

## Fields {#properties-summary}

#|
|| **Name** | **Type** | **Description** ||
|| [data](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#data) | [data.Manager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/data.Manager.md)| Panel data. ||
|| [events](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md#events) | [IEventManager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventManager.md)| Event manager.

Inherited from [IEventEmitter](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md#events). ||
|| [options](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#options) | [IOptionManager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IOptionManager.md)| Options manager.

Inherited from [IControl](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#options). ||
|| [state](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#state) | [data.Manager](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/data.Manager.md)| State of the panel. Names of fields that are available via the data.Manager.get method: 
- trafficShown - Flag for whether the traffic provider is shown on the map.
- providerKey - Key of the provider that the panel shows. Accepts the values 'traffic#actual' and 'traffic#archive'.
- expanded - Flag for whether the panel is expanded. ||
|#

## Events {#events-summary}

#|
|| **Name** | **Description** ||
|| [collapse](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#event-collapse)| The traffic panel is collapsed. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. ||
|| [expand](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#event-expand)| The traffic panel is expanded. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. ||
|| [hidetraffic](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#event-hidetraffic)| Traffic is hidden. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. ||
|| [optionschange](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md#event-optionschange)| Change to the object options.

Inherited from [ICustomizable](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md#event-optionschange). ||
|| [parentchange](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IChild.md#event-parentchange)| The parent object reference changed.

Data fields:

- oldParent - Old parent.
- newParent - New parent.

Inherited from [IChild](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IChild.md#event-parentchange). ||
|| [providerkeychange](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#event-providerkeychange)| The provider key changed. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. Names of fields that are available via the [Event.get](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method: 
- newProviderKey - New value for the provider key.
- oldProviderKey - Old key value. ||
|| [showtraffic](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#event-showtraffic)| Traffic is shown. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. ||
|#

## Methods {#methods-summary}

#|
|| **Name** | **Returns** | **Description** ||
|| [collapse](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#collapse)() | | Collapse the traffic panel. ||
|| [expand](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#expand)() | | Expand the traffic panel. ||
|| [getMap](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#getMap)() | [Map](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Map.md)
| Returns reference to the map. ||
|| [getParent](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#getParent)() | [IControlParent](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControlParent.md)\|null
| Returns link to the parent object, or null if the parent element was not set.

Inherited from [IControl](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#getParent). ||
|| [getProvider](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#getProvider)(\[[key](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#getProvider-param-key)]) | [ITrafficProvider](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ITrafficProvider.md)
| Returns instance of the traffic provider. ||
|| [hideTraffic](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#hideTraffic)()| Hide the traffic provider from the map. ||
|| [isExpanded](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#isExpanded)() | Boolean
| Returns flag for whether the panel is expanded. ||
|| [isTrafficShown](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#isTrafficShown)() | Boolean
| Returns the flag for whether the panel is shown. ||
|| [setParent](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#setParent)([parent](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#setParent-param-parent)) | [IChildOnMap](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IChildOnMap.md)
| Sets the parent object. If the null value is passed, the manager element will only be deleted from the current parent object.

Inherited from [IControl](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IControl.md#setParent). ||
|| [showTraffic](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/control.TrafficControl.md#showTraffic)() | | Show the traffic provider on the map. ||
|#

## Fields details {#field_detail}

### data {#data}

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

Panel data.

### state {#state}

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

State of the panel. Names of fields that are available via the data.Manager.get method: 
- trafficShown - Flag for whether the traffic provider is shown on the map.
- providerKey - Key of the provider that the panel shows. Accepts the values 'traffic#actual' and 'traffic#archive'.
- expanded - Flag for whether the panel is expanded.

## Events details {#event_detail}

### collapse {#collapse}

The traffic panel is collapsed. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class.

### expand {#expand}

The traffic panel is expanded. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class.

### hidetraffic {#hidetraffic}

Traffic is hidden. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class.

### providerkeychange {#providerkeychange}

The provider key changed. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class. Names of fields that are available via the [Event.get](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method: 
- newProviderKey - New value for the provider key.
- oldProviderKey - Old key value.

### showtraffic {#showtraffic}

Traffic is shown. Instance of the [Event](https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md) class.

## Methods details {#method_detail}

### collapse {#collapse}

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

Collapse the traffic panel.

### expand {#expand}

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

Expand the traffic panel.

### getMap {#getMap}

```javascript
{Map} getMap()
```

**Returns** reference to the map.

### getProvider {#getProvider}

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

**Returns** instance of the traffic provider.

**Parameters:**

#|
|| **Parameter** | **Default value** | **Description**  ||
|| [`key`](#getProvider-param-key) | — | Type: String

Key of the provider of traffic information. List of available keys: 
- 'traffic#actual' - Provider for traffic "right now".
- 'traffic#archive' - Provider for "normal" traffic.
If the parameter is omitted, the current provider is returned. ||
|#


**Example:**

```javascript
// Adding the traffic control to the map.
map.controls.add('trafficControl');
// When opened, the provider for traffic "now" will show the layer of traffic events.
map.controls.get('trafficControl').getProvider('traffic#actual').state.set('infoLayerShown', true);
```

### hidetraffic {#hidetraffic}

```javascript
{} hideTraffic()
```

Hide the traffic provider from the map.

### isExpanded {#isExpanded}

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

**Returns** flag for whether the panel is expanded.

### isTrafficShown {#isTrafficShown}

```javascript
{Boolean} isTrafficShown()
```

**Returns** the flag for whether the panel is shown.

### showtraffic {#showtraffic}

```javascript
{} showTraffic()
```

Show the traffic provider on the map.