Popups | MapGL | 2GIS Documentation

Popups

To create a popup on a map, you should use HtmlMarker, which creates the HtmlElement bound to the location on the map:

const popup = new mapgl.HtmlMarker(map, {
    coordinates: [55.31878, 25.23584],
    html: `<div class="popup">
        <div class="popup-content">
            This is a text of the popup
        </div>
        <div class="popup-tip"></div>
    </div> `,
});

Also you need to add CSS styles that you want.

<!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="Popup simple example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .popup {
                position: absolute;
                transform: translate(-50%, -100%);
                display: flex;
                flex-direction: column;
                min-width: 200px;
            }
            .popup-content {
                padding: 5px;
                border-radius: 4px;
                background: #fff;
                box-shadow: 0 1px 2px 0 rgba(38, 38, 38, 0.2);
            }
            .popup-tip {
                width: 0;
                height: 0;
                align-self: center;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #fff;
            }
        </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 popup = new mapgl.HtmlMarker(map, {
                coordinates: [55.31878, 25.23584],
                html: `<div class="popup">
                    <div class="popup-content">
                        This is a text of the popup
                    </div>
                    <div class="popup-tip"></div>
                </div> `,
            });
        </script>
    </body>
</html>

To create a button inside a popup and handle click events, you should get access to the HTML element of the button and add an event listener as usual for HTML:

const popup = new mapgl.HtmlMarker(map, {
    coordinates: [55.31878, 25.23584],
    html: `<div class="popup">
        <div class="popup-content">
            This is a text of the popup
            <button>Click me</button>
        </div>
        <div class="popup-tip"></div>
    </div> `,
});

popup
    .getContent()
    .querySelector('button')
    .addEventListener('click', () => alert('The button has been 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="Popup with button 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>
        <style>
            .popup {
                position: absolute;
                transform: translate(-50%, -100%);
                display: flex;
                flex-direction: column;
                min-width: 200px;
            }
            .popup-content {
                padding: 5px;
                border-radius: 4px;
                background: #fff;
                box-shadow: 0 1px 2px 0 rgba(38, 38, 38, 0.2);
            }
            .popup-tip {
                width: 0;
                height: 0;
                align-self: center;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #fff;
            }
        </style>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });

            const popup = new mapgl.HtmlMarker(map, {
                coordinates: [55.31878, 25.23584],
                html: `<div class="popup">
                    <div class="popup-content">
                        This is a text of the popup
                        <button>Click me</button>
                    </div>
                    <div class="popup-tip"></div>
                </div> `,
            });

            popup
                .getContent()
                .querySelector('button')
                .addEventListener('click', () => alert('Button has been clicked!'));
        </script>
    </body>
</html>

To open a popup by clicking at a Marker, you need to create both entities and bind them by event handling:

const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.22438],
});

const popupHtml = popup.getContent();
hidePopup();

marker.on('click', () => (popupHtml.style.display = 'block'));

popupHtml.querySelector('.popup-close').addEventListener('click', hidePopup);
map.on('click', hidePopup);

function hidePopup() {
    popupHtml.style.display = 'none';
}
<!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="Marker with popup example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
        <style>
            .popup {
                position: absolute;
                transform: translate(-50%, -150%);
                display: flex;
                flex-direction: column;
                min-width: 200px;
            }
            .popup-content {
                padding: 10px;
                border-radius: 4px;
                background: #fff;
                box-shadow: 0 1px 2px 0 rgba(38, 38, 38, 0.2);
            }
            .popup-close {
                position: absolute;
                top: 0;
                right: 0;
                padding: 0 5px;
                font-size: 12px;
                cursor: pointer;
            }
            .popup-tip {
                width: 0;
                height: 0;
                align-self: center;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #fff;
            }
        </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 marker = new mapgl.Marker(map, {
                coordinates: [55.31878, 25.22438],
            });

            const popup = new mapgl.HtmlMarker(map, {
                coordinates: marker.getCoordinates(),
                html: `<div class="popup">
                    <div class="popup-content">
                        The click at the marker will open this popup again
                    </div>
                    <div class="popup-close">x</div>
                    <div class="popup-tip"></div>
                </div>`,
            });

            const popupHtml = popup.getContent();
            hidePopup();

            marker.on('click', () => (popupHtml.style.display = 'block'));

            popupHtml.querySelector('.popup-close').addEventListener('click', hidePopup);
            map.on('click', hidePopup);

            function hidePopup() {
                popupHtml.style.display = 'none';
            }
        </script>
    </body>
</html>

Also the html option can be passed as an HTML element to the HtmlMarker constructor within a HtmlMarkerOptions object. For example, you can create a canvas with animation inside a popup:

const canvas = document.createElement('canvas');
canvas.width = 70;
canvas.height = 70;
canvas.style.position = 'absolute';
canvas.style.transform = 'translate(-50%, -50%)';
canvas.style.border = '1px solid';
canvas.style.background = '#fff';
const ctx = canvas.getContext('2d');

function render() {
    requestAnimationFrame(render);
    ctx.clearRect(0, 0, 70, 70);
    ctx.beginPath();
    const radius = (Date.now() / 70) % 35;
    ctx.arc(35, 35, radius, 0, Math.PI * 2);
    ctx.stroke();
}
requestAnimationFrame(render);

const popup = new mapgl.HtmlMarker(map, {
    coordinates: [55.31878, 25.23584],
    html: canvas,
});
<!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="HtmlMarker HTMLElement 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 canvas = document.createElement('canvas');
            canvas.width = 70;
            canvas.height = 70;
            canvas.style.position = 'absolute';
            canvas.style.transform = 'translate(-50%, -50%)';
            canvas.style.border = '1px solid';
            canvas.style.background = '#fff';
            const ctx = canvas.getContext('2d');
            function render() {
                requestAnimationFrame(render);
                ctx.clearRect(0, 0, 70, 70);
                ctx.beginPath();
                const radius = (Date.now() / 70) % 35;
                ctx.arc(35, 35, radius, 0, Math.PI * 2);
                ctx.stroke();
            }
            requestAnimationFrame(render);

            const popup = new mapgl.HtmlMarker(map, {
                coordinates: [55.31878, 25.23584],
                html: canvas,
            });
        </script>
    </body>
</html>