---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/dg/concepts/controls.md
---
# Элементы управления

[Стандартные элементы управления](#standard)

[Пользовательские элементы управления](#custom)

[Составные элементы управления и группировка](#component)

_Элемент управления_ — визуальный объект, связанный с картой и предназначенный для взаимодействия с пользователем. В большинстве случаев элементы управления размещаются в области показа карты.

API карт включает в себя набор встроенных элементов управления (выбор типа карты, ползунок изменения масштаба и пр.) и предоставляет возможность определения собственных.

Компоненты, предназначенные для создания элементов управления, реализованы в виде классов, находящихся в пространстве имен `control` (например, [control.Button](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md)).

Элементы управления программно связаны с объектом карты и хранятся в виде коллекции, ссылка на которую содержится в поле [controls](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/Map.md#controls).

Существует [специальное хранилище](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.storage.md), позволяющее поставить конструктору класса элемента управления в соответствие строковый ключ. Для добавления и удаления элементов управления карты можно указывать как ссылки на экземпляр элемента управления, так и ключ из этого хранилища.

#|
|| ![](../_images/controls.png) | 

```javascript
var myMap = new ymaps.Map("map", {
    center: [59.93772, 30.313622],
    zoom: 8
});

// Создание экземпляра элемента управления
myMap.controls.add(
   new ymaps.control.ZoomControl()
);

// Обращение к конструктору класса элемента
// управления по ключу
myMap.controls.add('typeSelector');
```

||
|#


## Стандартные элементы управления {#standard}

#|
|| **Элемент управления** | **Описание** ||
|| Стандартный набор кнопок

![](../_images/control_maptools.png =300x) |

Панель инструментов со стандартным набором кнопок: перетягивание карты (drag), увеличение выделенной области, измерение расстояний.

**Пример**

Добавление на карту панели инструментов со стандартным набором кнопок:

```javascript
myMap.controls.add('mapTools');
```

или

```javascript
myMap.controls.add(new ymaps.control.MapTools());
```
||
|| ![](../_images/route-editor.png =300x) |

Редактор маршрута.

**Пример**

Добавление на карту редактора маршрута:

```
myMap.controls.add('routeEditor');
```

или
```
myMap.controls.add(new ymaps.control.RouteEditor());
```

||
|| Выбор типа карты

![](../_images/control_type_selector.png =300x) |

Переключатель отображаемого [типа карты](https://yandex.ru/dev/maps/jsapi/doc/2.1/theory/index.html#map_type).

**Пример**

Добавление на карту переключателя типа карты (в выпадающем списке будут отображены все допустимые типы):

```javascript
myMap.controls.add('typeSelector');
```

Добавление на карту переключателя типа карты (в выпадающем списке будут отображены только указанные типы):

```javascript
myMap.controls.add(new ymaps.control.TypeSelector(['yandex#map', 'yandex#publicMap']));
```

||
|| Ползунок масштаба

![](../_images/control_zoom.png =300x) |

Изменение [коэффициента масштабирования](https://yandex.ru/dev/maps/jsapi/doc/2.1/theory/index.html#tile_coordinates).

Две кнопки для увеличения/уменьшения коэффициента масштабирования на единицу и ползунок масштаба.

**Пример**

Добавление на карту панели изменения масштаба:

```javascript
myMap.controls.add('zoomControl');
```

или

```javascript
myMap.controls.add(new ymaps.control.ZoomControl());
```

||
|| Кнопки изменения масштаба

![](../_images/control_small_zoom.png =300x) |

Изменение коэффициента масштабирования — компактный вариант.

Две кнопки, одна из которых увеличивает коэффициент масштабирования на единицу, вторая — уменьшает на единицу.

**Пример**

Добавление на карту кнопок изменения масштаба:

```javascript
myMap.controls.add('smallZoomControl');
```

или

```javascript
myMap.controls.add(new ymaps.control.SmallZoomControl());
```

||
|| Масштабная линейка

![](../_images/control_scaleline.png =300x) |

Отображает на карте масштабный отрезок и показывает его длину в используемых географических единицах измерениях.

Позволяет визуально оценить расстояние между объектами.

**Пример**

Добавление на карту масштабной линейки:

```javascript
myMap.controls.add('scaleLine');
```

или

```javascript
myMap.controls.add(new ymaps.control.ScaleLine());
```

||
|| Обзорная карта

![](../_images/control_minimap.png =300x) |

Уменьшенная карта местности, коэффициент масштаб которой на заданное количество единиц меньше основного.

Тип обзорной карты может отличаться от типа основной карты.

**Пример**

Добавление обзорной карты:

```javascript
myMap.controls.add('miniMap');
```

Добавление обзорной карты с заданными параметрами:

```javascript
myMap.controls.add(new ymaps.control.MiniMap({type:'yandex#hybrid'},{zoomOffset: 3}));
```

||
|| Поиск по карте

![](../_images/control_search.png =300x) |
 
Поиск географических объектов по названию, адресу или географическим координатам.

**Пример**

Добавление на карту поисковой строки:

```javascript
myMap.controls.add('searchControl');
```

Добавление на карту поисковой строки с заданными параметрами:

```javascript
myMap.controls.add(new ymaps.control.SearchControl({provider: 'yandex#publicMap',  useMapBounds: true}));
```

||
|| Пробки

![](../_images/control_traffic.png =300x) |

Отображение пробок на карте.

Позволяет включать/отключать отображение на карте слоя пробок.

**Пример**

Добавление на карту элемента управления «Пробки»:

```javascript
myMap.controls.add('trafficControl');
```

Добавление на карту элемента управления «Пробки» с указанным источником пробок (будут показаны пробки «обычно»):

```javascript
myMap.controls.add(new ymaps.control.TrafficControl({providerKey: 'traffic#archive'}));
```

||
|#


## Пользовательские элементы управления {#custom}

API предоставляет возможность создания собственных элементов управления, позволяющих выполнить произвольные действия.

Наиболее часто элементы управления реализуются в виде кнопок. Для создания кнопочного элемента управления предназначен класс [control.Button](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md).

Поддерживается два типа реакций на нажатие кнопки: после нажатия кнопка остается нажатой (поведение по умолчанию) или возвращается в исходное состояние. Тип реакции на нажатие задается опцией `selectOnClick` (true/false).

При нажатии на кнопку всегда генерируется событие [click](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md#event-click). Для кнопок, запоминающих свое состояние после нажатия, дополнительно генерируется событие [select](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#event-select) или [deselect](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md#event-deselect) (в зависимости от того, в каком состоянии кнопка находилась в момент нажатия).

#|
|| ![](../_images/control_button_onmap_1.png) |
![](../_images/control_button_onmap_2.png) ||
||

```javascript
var myButton = new ymaps.control.Button('<b>Я<b>');
myButton.events
    .add('click', function () { alert('Щёлк'); })
    .add('select', function () { alert('Нажата'); })
    .add('deselect', function () { alert('Отжата'); });
myMap.controls.add(myButton);
```

|

```javascript
var myButton = new ymaps.control.Button({
    data: {
        content: 'Или <em>Я</em>',
        title: 'отжимаюсь сама'
    }
}, {
    selectOnClick: false
   }
);
myButton.events
    .add('click', function () {
        alert('Щёлк'); });
myMap.controls.add(myButton);
```

||
|#

Класс [control.Button](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Button.md) реализует элемент управления, для которого установлен стандартный внешний вид, реакция на нажатие и методы, позволяющие задать и определить текущее состояние. Кнопка может быть включена в любой составной элемент управления.

Для определения собственных элементов управления предназначен интерфейс [IControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/IControl.md). Для элементов управления, которые могут находиться в только в двух состояниях удобно использовать интерфейс [ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md), расширяющий `IControl`.

## Составные элементы управления и группировка {#component}

API Яндекс.Карт включает в себя набор компонентов, позволяющих создавать составные элементы управления, визуально объединяя включенные в них элементы.

Список классов для создания составных элементов приведен в таблице.

#|
|| **Элемент управления** | **Описание** ||
|| Горизонтальная панель

![](../_images/control_toolbar.png) |

Панель инструментов, элементы которых расположены горизонтально.

Чаще всего на горизонтальной панели размещаются кнопки.

Классы:

[control.ToolBar](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ToolBar.md) — контейнер элементов;

[control.ToolBarSeparator](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ToolBarSeparator.md) — разделитель элементов панели.

**Пример**

```
var myToolBar = new ymaps.control.ToolBar();
myToolBar.add(new ymaps.control.Button('Красный'))
    .add(new ymaps.control.Button('Жёлтый'))
    .add(new ymaps.control.ToolBarSeparator())
    .add(new ymaps.control.Button('Зелёный'));

myMap.controls.add(myToolBar);
```

||
|| Панель переключаемых элементов

![](../_images/control_radiogroup.png) |
 
Панель элементов, каждый из которых может находиться только в двух состояниях ([ISelectableControl](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/ISelectableControl.md)).

Класс [control.RadioGroup](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.RadioGroup.md).

**Пример**

```javascript
var myRadioGroup = new ymaps.control.RadioGroup({
    items: [
        new ymaps.control.Button('Наше'),
        new ymaps.control.Button('Маяк'),
        new ymaps.control.Button('Европа +')
    ]
});

myMap.controls.add(myRadioGroup);
```

||
|| Раскрывающаяся панель

![](../_images/control_rollup_button.png) |
 
Панель элементов, вертикально раскрывающаяся при наведении курсора на первый элемент.

Класс [control.RollupButton](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.RollupButton.md).

**Пример**

```javascript
var myRollupButton = new ymaps.control.RollupButton({
    items: [
        new ymaps.control.Button('Раз'),
        new ymaps.control.Button('Два'),
        new ymaps.control.Button('Три')
    ]
});

myMap.controls.add(myRollupButton);
```

||
|| Выпадающий список

![](../_images/control_listbox.png) |
 
Выпадающий список.

Классы:

[control.ListBox](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBox.md) — контейнер элементов;

[control.ListBoxItem](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBoxItem.md) — элемент списка;

[control.ListBoxSeparator](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.ListBoxSeparator.md) — разделитель элементов списка.

**Пример**

```javascript
var myListBox = new ymaps.control.ListBox({
  data: {
    content: 'Выбрать город'
  },
  items: [
    new ymaps.control.ListBoxItem('Москва'),
    new ymaps.control.ListBoxItem('Новосибирск'),
    new ymaps.control.ListBoxSeparator(),
    new ymaps.control.ListBoxItem('Нью-Йорк')
  ]
});

myMap.controls.add(myListBox);
```

||
|#


В общем случае для группировки элементов управления предназначен класс [control.Group](https://yandex.ru/dev/maps/archive/doc/jsapi/2-0/ru/ref/reference/control.Group.md) (все приведенные в таблице составные элементы его наследуют). С его помощью можно задавать общие для всех элементов группы свойства и проводить групповые операции над ними.

```javascript
var myControlGroup = new ymaps.control.Group({
    items: [
        new ymaps.control.Button('Первый'),
        new ymaps.control.Button('Второй'),
        new ymaps.control.Button('Расчет окончен')
    ]
}, {selectOnClick: false});

myControlGroup.events.add(['click'], function (e) {
    alert(e.get('target').data.get('content'));
});
```