Методы управления popup

Popup в Leaflet представляет собой всплывающее окно, привязанное к карте, маркеру или любому слою, способное отображать HTML-содержимое и управляться как через высокоуровневые методы слоёв, так и через прямой API объекта L.Popup.

В Leaflet всплывающие окна реализованы через два основных подхода:

  • привязка popup к слою (чаще всего к маркеру) через bindPopup
  • явное создание и управление объектом L.popup

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

Привязка popup к слоям

Метод bindPopup

Основной способ ассоциации всплывающего окна с объектом слоя:

marker.bindPopup('Текст всплывающего окна');

Также поддерживается HTML:

marker.bindPopup('<b>Заголовок</b><br>Описание');

Расширенная форма с параметрами:

marker.bindPopup('<b>Точка</b>', {
    maxWidth: 300,
    closeButton: true,
    autoClose: true,
    className: 'custom-popup'
});

Ключевые особенности:

  • popup привязывается к слою и следует за ним
  • автоматически открывается через openPopup
  • автоматически закрывается при открытии другого popup (если включён autoClose)

Метод unbindPopup

Удаление привязанного popup:

marker.unbindPopup();

После вызова слой теряет возможность открывать всплывающее окно через стандартные методы.

Метод openPopup

Открытие привязанного popup:

marker.openPopup();

Если popup был создан через bindPopup, он отображается на карте в позиции слоя.

Для карты:

map.openPopup(popup);

или:

map.openPopup('Текст', latlng);

Метод closePopup

Закрытие текущего открытого popup:

marker.closePopup();

или глобально через карту:

map.closePopup();

Прямое управление объектом L.popup

Создание popup

const popup = L.popup();

Базовая конфигурация:

const popup = L.popup({
    closeButton: true,
    autoClose: true,
    closeOnClick: true,
    className: 'info-popup',
    offset: [0, -20]
});

Метод setLatLng

Установка географической позиции:

popup.setLatLng([55.75, 37.61]);

или:

popup.setLatLng(L.latLng(55.75, 37.61));

Метод setContent

Установка содержимого:

popup.setContent('Информация о точке');

HTML поддерживается:

popup.setContent('<div><h3>Объект</h3><p>Описание</p></div>');

Метод openOn

Открытие popup на карте с автоматическим закрытием предыдущих:

popup.setLatLng([55.75, 37.61])
     .setContent('Контент')
     .openOn(map);

Особенность:

  • автоматически закрывает ранее открытый popup
  • упрощает управление единственным активным всплывающим окном

Метод remove и закрытие popup

Закрытие через карту:

map.closePopup();

или через удаление слоя:

popup.remove();

Методы слоя для работы с popup

getPopup

Возвращает привязанный popup:

const popup = marker.getPopup();

Если popup отсутствует, возвращается null.

setPopupContent

Изменение содержимого без повторного bind:

marker.setPopupContent('Новое содержимое');

isPopupOpen

Проверка состояния:

marker.isPopupOpen();

Возвращает true, если popup отображён.

События управления popup

Leaflet предоставляет набор событий для контроля жизненного цикла popup.

popupopen

Срабатывает при открытии:

marker.on('popupopen', function (e) {
    console.log('Popup открыт');
});

Объект события содержит:

  • popup — экземпляр L.Popup
  • target — слой-источник

popupclose

Срабатывает при закрытии:

marker.on('popupclose', function () {
    console.log('Popup закрыт');
});

Управление через карту

map.openPopup

Прямое открытие:

map.openPopup('Контент', [55.75, 37.61]);

или с объектом:

map.openPopup(popup);

map.closePopup

Закрытие активного popup:

map.closePopup();

Особенности поведения popup

Автоматическое закрытие

При включённом autoClose открытие нового popup приводит к закрытию предыдущего:

L.popup({ autoClose: true });

Закрытие по клику на карту

Опция closeOnClick управляет закрытием при клике вне popup:

L.popup({ closeOnClick: true });

Смещение popup

Позиционирование относительно точки:

L.popup({ offset: [10, -30] });

Используется для компенсации размеров маркера или визуального выравнивания.

Практика комбинирования методов

Обновление содержимого и повторное открытие

marker.setPopupContent('Обновлённые данные');

if (!marker.isPopupOpen()) {
    marker.openPopup();
}

Переключение popup вручную

if (marker.isPopupOpen()) {
    marker.closePopup();
} else {
    marker.openPopup();
}

Единый управляемый popup

const popup = L.popup({ closeButton: true });

function showInfo(latlng, text) {
    popup
        .setLatLng(latlng)
        .setContent(text)
        .openOn(map);
}

Работа с кастомным HTML внутри popup

Popup поддерживает полноценный DOM-контент:

marker.bindPopup(`
    <div class="popup-card">
        <h3>Объект</h3>
        <button oncl ick="alert('Действие')">Кнопка</button>
    </div>
`);

При этом логика взаимодействия может подключаться через события DOM после открытия:

marker.on('popupopen', () => {
    document.querySelector('.popup-card button')
        .addEventListener('click', () => {
            console.log('Нажатие');
        });
});

Управление состоянием popup через карту

Leaflet допускает наличие только одного активного popup на карте при использовании стандартного поведения openOn. Это влияет на архитектуру интерфейса:

  • map.openPopup → всегда заменяет активный popup
  • marker.openPopup → может сосуществовать в рамках слоя, но подчиняется карте
  • closePopup → глобальное управление состоянием

Интеграция popup с кастомными слоями

Любой слой, реализующий интерфейс popup, поддерживает:

layer.bindPopup('Контент');
layer.openPopup();
layer.closePopup();

Это распространяется на:

  • маркеры
  • полигоны
  • полилинии
  • circle и circleMarker

Контроль рендера и перерисовки

При динамическом изменении карты popup автоматически пересчитывает позицию. Однако при ручном управлении содержимым может применяться:

popup.update();

Используется при изменении DOM внутри уже открытого окна.

Оглавление