Popup: создание и настройка

Popup представляет собой всплывающее информационное окно, привязанное к карте или конкретному объекту слоя. В Leaflet popups используются для отображения краткого контента: описаний объектов, координат, пользовательских данных, HTML-разметки. Они тесно связаны с маркерами, слоями и событиями карты.

Создание Popup через привязку к объекту

Наиболее распространённый способ — использование метода bindPopup, который доступен у большинства векторных слоёв и маркеров.

const map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

const marker = L.marker([51.505, -0.09]).addTo(map);

marker.bindPopup("Простой текст всплывающего окна");

При клике на маркер popup автоматически открывается и привязывается к координатам объекта.

Использование HTML внутри Popup

Popup поддерживает HTML-разметку, что позволяет формировать более сложные интерфейсы внутри окна.

marker.bindPopup(`
  <div>
    <h3>Объект на карте</h3>
    <p>Описание с <strong>форматированием</strong></p>
  </div>
`);

Допустимо использование изображений, ссылок и базовых HTML-элементов, однако стоит учитывать ограничения по размерам и производительности.

Открытие Popup программно

Popup можно открывать без пользовательского взаимодействия, используя метод openPopup.

marker.bindPopup("Автоматически открытый popup");
marker.openPopup();

Также можно открыть popup на карте вручную, создавая его отдельным объектом:

const popup = L.popup()
  .setLatLng([51.505, -0.09])
  .setContent("Контент без маркера")
  .openOn(map);

Метод openOn(map) автоматически закрывает предыдущие popup на карте.

Параметры настройки Popup

Popup в Leaflet обладает набором опций, влияющих на поведение и внешний вид.

marker.bindPopup("Настроенный popup", {
  maxWidth: 300,
  minWidth: 150,
  autoPan: true,
  closeButton: true,
  closeOnClick: false,
  className: "custom-popup"
});

Основные параметры

maxWidth Ограничивает максимальную ширину popup, предотвращая чрезмерное растягивание контента.

minWidth Устанавливает минимальную ширину, полезно при коротком тексте.

autoPan Автоматически сдвигает карту, если popup выходит за границы видимой области.

closeButton Отображает кнопку закрытия в правом верхнем углу.

closeOnClick Определяет, закрывается ли popup при клике по карте.

className Позволяет задать пользовательский CSS-класс для стилизации.

Стилизация Popup через CSS

Popup можно полностью переопределить через классы.

.custom-popup .leaflet-popup-content-wrapper {
  background-color: #1e1e1e;
  color: #ffffff;
  border-radius: 8px;
}

.custom-popup .leaflet-popup-tip {
  background: #1e1e1e;
}

Внутренняя структура popup включает:

  • leaflet-popup-content-wrapper — контейнер содержимого
  • leaflet-popup-tip — треугольный указатель
  • leaflet-popup-content — область текста или HTML

Работа с объектом L.Popup

Popup можно создавать как отдельный объект и повторно использовать.

const popup = L.popup({
  maxWidth: 250
})
.setContent("Повторно используемый popup");

marker.on("click", function (e) {
  popup.setLatLng(e.latlng).openOn(map);
});

Такой подход удобен при динамическом обновлении данных.

Обновление содержимого Popup

Содержимое popup можно изменять после создания.

const popup = L.popup()
  .setLatLng([51.505, -0.09])
  .setContent("Первоначальный текст")
  .openOn(map);

setTimeout(() => {
  popup.setContent("Обновлённый текст");
}, 2000);

Это позволяет отображать асинхронные данные или результаты запросов.

Закрепление Popup к различным слоям

Popup можно привязывать не только к маркерам, но и к геометрическим слоям.

const circle = L.circle([51.508, -0.11], {
  radius: 500
}).addTo(map);

circle.bindPopup("Круглая зона");

Поддерживаются:

  • L.marker
  • L.circle
  • L.polygon
  • L.polyline
  • L.rectangle

События Popup

Popup поддерживает набор событий, позволяющих отслеживать его состояние.

marker.bindPopup("События popup");

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

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

Эти события полезны для синхронизации интерфейса и логики приложения.

Управление жизненным циклом Popup

Popup может быть открыт и закрыт программно независимо от маркера.

const popup = L.popup()
  .setLatLng([51.505, -0.09])
  .setContent("Управляемый popup");

map.openPopup(popup);

map.closePopup(popup);

При необходимости можно закрыть все открытые popup:

map.closePopup();

Ограничения и особенности поведения

Popup привязан к системе координат карты и автоматически пересчитывает позицию при:

  • изменении масштаба
  • перемещении карты
  • изменении размеров контейнера

При использовании сложного HTML внутри popup необходимо учитывать:

  • возможные переполнения контента
  • необходимость ограничения высоты через CSS
  • влияние на производительность при большом количестве popup

Различие между Popup и Tooltip

Popup отличается от tooltip по поведению и назначению:

  • Popup требует взаимодействия (клик)
  • Tooltip обычно отображается при наведении
  • Popup имеет больший объём контента
  • Tooltip используется для кратких подсказок

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

Оглавление