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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Zoom control example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
                zoomControl: 'bottomLeft',
            });
        </script>
    </body>
</html>

Показ пробок

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Traffic control example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
                zoomControl: false,
                trafficControl: 'topRight',
            });
        </script>
    </body>
</html>

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Scale bar example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
                scaleControl: 'topLeft',
            });
        </script>
    </body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Floor control example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.278765, 25.197039],
                styleZoom: 18,
                rotation: -3,
                pitch: 45,
                key: 'Your API access key',
                floorControl: 'bottomLeft',
            });
        </script>
    </body>
</html>

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

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

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

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

const floorControl = new mapgl.FloorControl(map, {
    position: '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!');
    });

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Custom control example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });
            const control = new mapgl.Control(map, '<button>Custom control</button>', {
                position: 'topLeft',
            });
            control
                .getContainer()
                .querySelector('button')
                .addEventListener('click', () => {
                    alert('The custom button is clicked!');
                });
        </script>
    </body>
</html>

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Copyright example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            body {
                position: relative;
            }
            #custom-bar {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                top: auto;
                margin: 10px;
                padding: 20px;
                border-radius: 4px;
                background-color: white;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div>
            <div id="custom-bar">User Content</div>
        </div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.22584],
                zoom: 13,
                key: 'Your API access key',
            });

            map.setControlsLayoutPadding({
                bottom: 80,
            });
        </script>
    </body>
</html>