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

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

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

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

Кнопки масштабирования (плюс и минус) отображаются на карте по умолчанию. Чтобы их скрыть, нужно при создании карты указать параметр 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.

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

В дополнение к методам и контролу пробок, в карте есть 3 события: 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>Custom control</button>', {
    position: 'topLeft',
});

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

control
    .getContainer()
    .querySelector('button')
    .addEventListener('click', (ev) => {
        alert('The custom button is clicked!');
    });

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

Чтобы изменить позицию копирайта, нужно указать параметр 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',
});