Элементы управления | MapGL | 2GIS Documentation

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

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

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

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

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

const map = new mapgl.Map('container', {
    ...
    zoomControl: false,
});
const zoomControl = new mapgl.ZoomControl(map, {
    position: '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: false,
            });

            const zoomControl = new mapgl.ZoomControl(map, {
                position: 'bottomLeft',
            });
        </script>
    </body>
</html>

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

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

            const trafficControl = new mapgl.TrafficControl(map, {
                position: 'topRight',
            });
        </script>
    </body>
</html>

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

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

Если нужно указать другое расположение для этих кнопок, то вместо параметра floorControl нужно создать объект FloorControl:

const floorControl = new mapgl.FloorControl(map, {
    position: '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],
                zoom: 18,
                rotation: -3,
                pitch: 45,
                key: 'Your API access key',
            });

            const floorControl = new mapgl.FloorControl(map, {
                position: 'bottomLeft',
            });
        </script>
    </body>
</html>

В качестве элементов управления можно использовать любые 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>

Положение элементов управления можно задать при инициализации карты. Например:

const map = new mapgl.Map('container', {
    ...
    floorsControl: false, // не добавлять элемент управления
    trafficControl: true, // добавить элемент управления в позицию по умолчанию
    copyright: 'bottomLeft', // явно указать положение элемента на карте
});

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

В случае если элементы управления закрыты дополнительным контентом, можно сохранить их видимость установив отступы функцией setControlsLayoutPadding. Например:

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>