Внешние элементы управления

В отличие от встроенных элементов управления внешние можно добавлять или удалять с карты.

Стандартный набор внешних элементов управления картой включает:

• Тулбар (класс YMaps.ToolBar) – панель инструментов с кнопками, позволяющими перемещать карту, увеличивать ее, а также измерять расстояние на карте с помощью специальной линейки;
• Элемент масштабирования (класс YMaps.Zoom) – позволяет менять разрешение карты с определенным шагом;
• Компактный элемент масштабирования (класс YMaps.SmallZoom) – элемент масштабирования без ползунка, содержащий только кнопки уменьшения и увеличения масштаба;
• Обзорная карта (класс YMaps.MiniMap) – уменьшенная карта показываемой местности, масштаб которой на несколько пунктов отличается от основной;
• Переключатель типа карты (класс YMaps.TypeControl) – кнопки "Карта", "Спутник", "Гибрид";
• Масштабная линейка (класс YMaps.ScaleLine) – позволяет оценивать расстояние между объектами, не прибегая к вычислениям;
• Поиск по карте (класс YMaps.SearchControl) – позволяет искать географические объекты по их названию.

Все элементы управления основаны на интерфейсе YMaps.IControl. Реализовав этот интерфейс, можно создать пользовательский элемент управления.

Тулбар

YMaps.ToolBar – панель инструментов с кнопками (тулбар), позволяющими перемещать карту, увеличивать ее, а также измерять расстояние на карте с помощью специальной линейки.

По умолчанию панель инструментов содержит три кнопки для включения/выключения следующих элементов управления:

• "Перемещение"
• "Лупа"
• "Линейка"

Следующий код создает панель инструмента со всеми тремя кнопками по умолчанию:

var toolBar = new YMaps.ToolBar();

Если используются не все кнопки, то в конструкторе YMaps.ToolBar перечислите только те из них, которые должны быть добавлены на тулбар. Например:

// Создает панель инструментов без кнопки "Линейка"
var toolBar = new YMaps.ToolBar([
    new YMaps.ToolBar.MoveButton(), 
    new YMaps.ToolBar.MagnifierButton()
]);

Для добавления кнопки на тулбар используйте метод add(), а для удаления - метод remove().

Чтобы добавить разделитель между двумя кнопками тулбара используйте класс YMaps.ToolBarSeparator, например:

// Создает разделитель кнопок тулбара шириной 30 пикселов.
toolBar.add(new YMaps.ToolBarSeparator(30));

Чтобы программно управлять состоянием кнопок тулбара используйте методы select() и deselect().

API Яндекс.Карт также позволяет создавать и добавлять на тулбар пользовательские кнопки следующих видов:

• Обычная кнопка
• Переключатель
• Кнопка-флажок

Обычная кнопка

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

Чтобы создать обычную кнопку, используйте конструктор класса YMaps.ToolBarButton.

Пример ниже создает кнопку, которая добавляет метку в центр карты:

// Создает кнопку
var button = new YMaps.ToolBarButton({ 
    caption: "Добавить метку", 
    hint: "Добавляет метку в центр карты"
});

// При щелчке по кнопке включается линейка
YMaps.Events.observe(button, button.Events.Click, function () {
    this.addOverlay(new YMaps.Placemark(map.getCenter(), {draggable: true}));
}, map);

Открыть пример в новом окне

Переключатель

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

Группа стандартных кнопок тулбара имеет ID YMaps.ToolBar.DEFAULT_GROUP.

Чтобы создать переключатель используйте конструктор класса YMaps.ToolBarRadioButton.

Пример ниже добавляет в группу стандартных кнопок тулбара еще одну кнопку инструмента "Линейка":

// Создает кнопку-переключатель
var button = new YMaps.ToolBarRadioButton(YMaps.ToolBar.DEFAULT_GROUP, { 
    icon: "http://api-maps.yandex.ru/i/0.3/icons/icon-ruler.png", 
    hint: "Еще одна линейка"
});

// Включает линейку, когда кнопка-переключатель активна
YMaps.Events.observe(button, button.Events.Select, function () {
    this.getMap().enableRuler();
}, toolbar);

// Выключает линейку, когда кнопка-переключатель неактивна
YMaps.Events.observe(button, button.Events.Deselect, function () {
    this.getMap().disableRuler();
}, toolbar);

Открыть пример в новом окне

Кнопка-флажок

Кнопка-флажок остается нажатой до тех пор, пока не будет нажата повторно.

Чтобы создать кнопку-флажок используйте конструктора класса YMaps.ToolBarToggleButton.

Пример ниже добавляет на тулбар кнопку-флажок, при выборе которой карта разворачивается на весь экран:

// Создает кнопку-флажок
var button = new YMaps.ToolBarToggleButton({ 
    icon: "/i/maps/icon-fullscreen.png", 
    hint: "Разворачивает карту на весь экран"
});

// Если кнопка активна, разворачивает карту на весь экран
YMaps.Events.observe(button, button.Events.Select, function () {
    setSize();
});

// Если кнопка неактивна, устанавливает фиксированный размер карты
YMaps.Events.observe(button, button.Events.Deselect, function () {
    setSize(600, 400);
});

// Функция устанавливает новые размеры карты
function setSize (newWidth, newHeight) {
    YMaps.jQuery("#YMapsID").css({
        width: newWidth || "", 
        height: newHeight || ""
    });
    map.redraw();
}

Открыть пример в новом окне

Элементы масштабирования

API предоставляет два элемента для управления масштабом карты:

• YMaps.Zoom - полный элемент масштабирования;
• YMaps.SmallZoom - компактный элемент масштабирования.

YMaps.Zoom

YMaps.Zoom – элемент масштабирования, позволяющий изменять масштаб карты с определенным шагом. Представляет из себя две кнопки для уменьшения и увеличения масштаба и ползунок.

// Создает элемент масштабирования
var zoomControl = new YMaps.Zoom();

По умолчанию смена масштаба происходит плавно. Чтобы отключить плавное масштабирование карты, передайте в конструктор параметр smooth со значением false:

// Создает объект YMaps.Zoom с отключенной функцией плавного масштабирования
var zoomControl = new YMaps.Zoom({smooth: false});

При наведении курсора на ползунок показывается всплывающая подсказка. Чтобы отключить отображение подсказки, передайте в конструктор параметр noTips со значением true:

// Создает элемент масштабирования без всплывающих подсказок
var zoomControl = new YMaps.Zoom({noTips: true});

Для каждого коэффициента масштабирования возможно задать пользовательские всплывающие подсказки:

// Создает объект YMaps.Zoom с пользовательскими подсказками
// Коэффициенту масштабирования 1 соответствует подсказка "Мелко",
// коэффициенту масштабирования 9 - "Средне",
// коэффициенту масштабирования 16 - "Крупно".
var zoom = new YMaps.Zoom({
    customTips: [
        { index: 1, value: "Мелко" },
        { index: 9, value: "Средне" },
        { index: 16, value: "Крупно" }
    ]
});

Открыть пример в новом окне

YMaps.SmallZoom

YMaps.SmallZoom – компактный элемент масштабирования, состоящий только из двух кнопок без ползунка.

// Создает элемент масштабирования
var smallZoomControl = new YMaps.SmallZoom();

По умолчанию смена масштаба происходит плавно. Чтобы отключить плавное масштабирование карты, передайте в конструктор параметр smooth со значением false:

// Создает объект YMaps.SmallZoom с отключенной функцией плавного масштабирования
var zoomControl = new YMaps.SmallZoom({smooth: false});

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

YMaps.MiniMap – элемент "обзорная карта", представляющий из себя мини-карту показываемой местности, масштаб которой на несколько пунктов меньше основной.

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

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

Если смещение отрицательно, то обзорная карта будет работать по принципу лупы, то есть отображать увеличенный фрагмент карты. Например:

var miniMapPositive = new YMaps.MiniMap(3); // Работает как обзорная карта
var miniMapNegative = new YMaps.MiniMap(-3); // Работает как лупа

Переключатель типа карты

YMaps.TypeControl – элемент управления, позволяющий выбрать тип карты (например, "Гибрид" или "Спутник").

// Создает переключатель трех стандартных типов карт
var typeControl = new YMaps.TypeControl(); 

При создании переключателя можно добавить в список пользовательские типы карт, а также указать какие из типов карт должны быть скрыты в списке под ссылкой "Еще...". Для этого передайте в конструктор два необязательных параметра:

• types - список типов карт (по умолчанию добавляются три стандартных типа);
• listTypeIndexes - список индексов типов карты в списке, которые должны быть скрыты под ссылкой "Еще...". Нумерация элементов списка начинается с нуля.

// Создает переключатель для типов карты "Спутник" и "Гибрид" в раскрывающемся  списке
var typeControl = new YMaps.TypeControl([YMaps.MapType.MAP, YMaps.MapType.SATELLITE, YMaps.MapType.HYBRID], [1,2]);
map.addControl(typeControl);

Открыть пример в новом окне

Чтобы добавить в переключатель типов карт пользовательский тип карты используйте метод addType(), а чтобы удалить - метод removeType(), см. Создание пользовательского типа карты.

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

YMaps.ScaleLine – элемент карты "Масштабная линейка", позволяющий измерять расстояние между объектами, не прибегая к вычислениям.

Масштабная линейка не имеет дополнительных параметров.

var scaleLine = new YMaps.ScaleLine();

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

YMaps.SearchControl – элемент управления "Поиск по карте", позволяющий искать на карте географические объекты по их названию или части адреса.

Результаты поиска выводятся внутри самого элемента в виде списка ссылок на найденные объекты (с возможностью постраничного перелистывания).

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

С помощью опций класса YMaps.SearchControl можно задать ширину элемента управления в пикселах и количество результатов поиска на одной странице. Также возможно ограничить область поиска видимой частью карты, а также указать требуется ли помечать меткой с открытым балуном найденные на карте объекты. Например:

var searchControl = new YMaps.SearchControl({
    resultsPerPage: 5,  // Количество объектов на странице
    useMapBounds: 1     // Объекты, найденные в видимой области карты 
                        // будут показаны в начале списка
});