Geolocation

You can use Geolocation API to determine the location of the user. You can then use that location, for example, to center the map around it using the setCenter() method.

function success(pos) {
    const center = [pos.coords.longitude, pos.coords.latitude];
    map.setCenter(center);
}

function error() {
    status.textContent = 'Unable to retrieve your location';
}

function geoFindMe() {
    if (!navigator.geolocation) {
        status.textContent = 'Geolocation is not supported by your browser';
    } else {
        status.textContent = 'Locating…';
        navigator.geolocation.getCurrentPosition(success, error);
    }
}

Try clicking on the top-left control in the example below to pinpoint your current location on the map.

<!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="Example of a geolocation" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            .buttonRoot {
                width: 32px;
                box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                background: #fff;
            }

            .button {
                padding: 0;
                outline: 0;
                border: none;
                cursor: pointer;
                background: #fff;
                width: 32px;
                height: 32px;
                color: #262626;
                box-sizing: border-box;
            }

            .button:hover {
                opacity: 0.7;
            }

            .button:active {
                color: #028eff;
            }
        </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 controlContent = `
                <div class="buttonRoot" id="find-me">
                    <button class="button">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="32"
                            height="32"
                            viewBox="0 0 32 32"
                        >
                            <path
                                fill="currentColor"
                                d="M17.89 26.27l-2.7-9.46-9.46-2.7 18.92-6.76zm-5.62-12.38l4.54 1.3 1.3 4.54 3.24-9.08z"
                            />
                        </svg>
                    </button>
                </div>
                <p id="status"></p>
            `;

            const control = new mapgl.Control(map, controlContent, {
                position: 'topLeft',
            });

            const status = control.getContainer().querySelector('#status');
            let circle;

            function success(pos) {
                const center = [pos.coords.longitude, pos.coords.latitude];

                status.textContent = '';
                if (circle) {
                    circle.destroy();
                }

                circle = new mapgl.CircleMarker(map, {
                    coordinates: center,
                    radius: 14,
                    color: '#0088ff',
                    strokeWidth: 4,
                    strokeColor: '#ffffff',
                    stroke2Width: 6,
                    stroke2Color: '#0088ff55',
                });
                map.setCenter(center);
                map.setZoom(16);
            }

            function error() {
                status.textContent = 'Unable to retrieve your location';
            }

            function geoFindMe() {
                if (!navigator.geolocation) {
                    status.textContent = 'Geolocation is not supported by your browser';
                } else {
                    status.textContent = 'Locating…';
                    navigator.geolocation.getCurrentPosition(success, error);
                }
            }

            control
                .getContainer()
                .querySelector('#find-me')
                .addEventListener('click', geoFindMe);
        </script>
    </body>
</html>