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

Controls

The map comes with a built-in zoom control. It is enabled by default. If you want to disable it, you can do so by setting zoomControl map option to false:

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

If you want to set a different position for the zoom control, disable it via map options and then create it manually by creating an instance of the ZoomControl class:

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>

You can add a traffic control to the map by creating an instance of the TrafficControl class. This control allows you to see the traffic condition at the moment and its average score.

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>

Use the code below to add a custom Control:

const control = new mapgl.Control(map, '<button>Custom control</button>', {
    position: 'topLeft',
});

The second argument takes HTML markup string that will be added to the control's wrap HTML container.

The last argument takes ControlOptions.

See Control for more details.

You can attach event listeners to control's inner HTML elements the same way as for the usual HTML elements. To do this you need to get reference to required inner HTML element and attach an appropriate event listener to it. For example, attach click event listener to button HTML element:

control
    .getContainer() // Get a control's wrap
    .querySelector('button') // Get an inner button HTML element reference
    .addEventListener('click', (ev) => {
        /* do something */
    }); // Attach an event listener to the button on the 'click' event
<!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>