Попапы

Попап - это HTML-элемент, привязанный к определенным координатам на карте. Чтобы его добавить, нужно вызвать метод HtmlMarker(), указав координаты для него и 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
        </div>
        <div class="popup-tip"></div>
    </div>`,
});

К HTML-элементам внутри метки CSS будет применяться как к обычным HTML-элементам на странице.

События

Попапы могут содержать интерактивные элементы. Чтобы добавить обработчик событий для этих элементов, нужно сперва вызвать метод getContent(), который вернет 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!'));

Взаимодействие с другими компонентами

Попапы можно использовать, чтобы сделать всплывающую подсказку. Например, чтобы сделать подсказку, которая будет появляться при нажатии на маркер, можно добавить три обработчика событий: один для маркера (чтобы показать описание) и по одному для карты и самого попапа (чтобы скрыть описание).

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';
}

Сложные HTML-элементы

В качестве значения параметра html можно использовать как строку, так и сам элемент. Например, можно сделать метку с анимированным canvas:

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,
});