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

Элементы управления — это кнопки и другие элементы, которые располагаются поверх карты. Они остаются на месте, когда вы двигаете карту.

К элементам управления также относится копирайт, и вы можете изменить его позицию на карте. Согласно лицензионному соглашению копирайт всегда должен быть виден на карте и не должен быть закрыт другими элементами.

Кнопки масштабирования

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

const map = new mapgl.Map('container', {
    ...
    zoomControl: false,
});

Чтобы изменить расположение кнопок, нужно указать в качестве значения zoomControl одно из возможных расположений (см. ControlPosition).

const map = new mapgl.Map('container', {
    ...
    zoomControl: 'bottomLeft',
});

Показ пробок

На карту можно добавить кнопку, которая будет показывать информацию о загруженности дорог. Чтобы это сделать, при создании карты укажите параметр trafficControl с нужным расположением или со значением true (расположение по умолчанию).

const map = new mapgl.Map('container', {
    ...
    trafficControl: 'topRight',
});

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

Добавлять UI-элемент для управления пробками не обязательно, т. к. переключением видимости пробок можно управлять через методы карты showTraffic и hideTraffic, а состояние слоя можно узнать через метод isTrafficOn.

В дополнение к методам и UI-элементу пробок в карте есть три события: trafficshow, traffichide, trafficscore.

const map = new mapgl.Map('container', {
    ...
    trafficOn: true,
    trafficControl: 'topRight',
});

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

Масштабная линейка не отображается на карте по умолчанию. Чтобы ее показать, нужно при создании карты указать параметр scaleControl со значением true.

const map = new mapgl.Map('container', {
    ...
    scaleControl: true,
});

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

const map = new mapgl.Map('container', {
    ...
    scaleControl: 'topLeft',
});

Кнопки этажей

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

const map = new mapgl.Map('container', {
    ...
    floorControl: 'bottomLeft',
});

Произвольные элементы

В качестве элементов управления можно использовать любые HTML-элементы. Чтобы добавить на карту произвольный элемент, нужно создать объект Control, указав нужную HTML-разметку:

const control = new mapgl.Control(map, '<button>Произвольный элемент управления</button>', {
    position: 'topLeft',
});

Чтобы добавить обработчик событий для произвольного элемента управления, нужно сначала вызвать метод getContainer(), который вернет содержимое элемента, и затем добавить обработчик для нужного HTML-элемента:

control
    .getContainer()
    .querySelector('button')
    .addEventListener('click', (ev) => {
        alert('Вы нажали произвольную кнопку');
    });

Расположение копирайта

Чтобы изменить позицию копирайта, нужно указать параметр copyright при создании карты. См. ControlPosition для списка возможных значений.

const map = new mapgl.Map('container', {
    ...
    copyright: 'bottomLeft'
});

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

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

map.setControlsLayoutPadding({
    bottom: 80,
});

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

Чтобы добавить элемент управления после инициализации карты, создайте соответствующий объект и укажите нужное расположение:

• mapgl.ZoomControl — кнопки масштабирования;
• mapgl.TrafficControl — кнопка показа пробок;
• mapgl.FloorControl — кнопки этажей;
• mapgl.ScaleControl — масштабная линейка.

Например, чтобы добавить кнопки этажей на существующую карту map, можно использовать следующий код:

const floorControl = new mapgl.FloorControl(map, {
    position: 'bottomLeft',
});