Элементы управления

Для изменения состояния карты могут быть использованы как визуальные элементы управления, так и набор поведений
взаимодействия пользователя и карты.

Визуальные элементыВизуальные элементы

Визуальные элементы — это кнопки и другие графические элементы, с помощью которых пользователи могут выполнять действия с картой.
Например, изменять масштаб, настраивать маршруты и др. Как правило, визуальные элементы размещаются в области показа карты
и имеют фиксированное положение (пользователи не могут их двигать).

В библиотеке визуальные элементы представлены классами с постфиксом Control: YMapZoomControl, YMapGeolocationControl.
Они строятся на базе более низкоуровневых элементов, таких как YMapControl, YMapControlButton.
Элементы могут быть использованы как независимо, так и совокупно.
В последнем случае удобнее управлять их общим местоположением.
Для этого их необходимо добавить в общий контейнер YMapControls.

Подробнее про визуальные элементы

ПозиционированиеПозиционирование

Позиция элементов задается при помощи следующих директив:

• left
• right
• bottom
• top

Каждая директива может быть использована независимо или совокупно в любом порядке.

ОриентацияОриентация

Ориентация элементов задается при помощи следующих директив:

• horizontal
• vertical

Ориентация может как выводиться из позиции:

• horizontal для top и bottom
• vertical для left и right

так и задаваться отдельно (для всех остальных вариантов позиционирования). По умоланию horizontal.

Пример использованияПример использования

const map = new YMap(element, {
  location: {center: [37.588144, 55.733842], zoom: 14}
});
const controls = new YMapControls({position: 'top left', orientation: 'vertical'});
controls.addChild(new YMapGeolocationControlI({}));
controls.addChild(new YMapZoomControlI({}));
map.addChild(controls);

Создание собственного элементаСоздание собственного элемента

Вы можете создать собственные визуальные элементы.

Пример

Добавление кнопки, которая переставляет центр карты в Москву:

const map = new YMap(element, {
  location: {center: [37.588144, 55.733842], zoom: 14}
});

const controls = new YMapControls({position: 'top left'});
const button = new YMapControlButton({
  text: 'Москва',
  onClick: () => {
    map.setLocation({
      center: [37.588144, 55.733842],
      zoom: 5
    });
  }
});

controls.addChild(button);
map.addChild(controls);

ПоведенияПоведения

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

const map = new YMap(element, {
  location: {center: [37.588144, 55.733842], zoom: 14},
  behaviors: ['drag', 'pinchZoom', 'mouseTilt']
});

Полный список доступных поведений — в разделе События.