Интерактивные элементы в окнах

В HERE Maps JavaScript API всплывающие окна (InfoBubble и InfoWindow в UI-слое) используются не только для отображения статической информации, но и как полноценные контейнеры для интерактивных элементов интерфейса. Такой подход позволяет превращать карту в прикладной инструмент: маршрутизатор, каталог объектов, панель управления слоями и даже мини-приложение.

Ключевой особенностью реализации является то, что содержимое окна формируется как HTML-структура, которая затем вставляется в DOM, а значит — может включать кнопки, формы, переключатели и любые другие интерактивные элементы.

HTML-контент внутри всплывающих окон

Всплывающие окна в HERE Maps поддерживают передачу HTML-строки, которая рендерится внутри контейнера окна.

Основной принцип:

  • содержимое окна — это обычный HTML
  • браузер интерпретирует его как часть DOM
  • любые DOM-события доступны через стандартные обработчики

Пример базовой структуры:

const bubble = new H.ui.InfoBubble(position, {
  content: `
    <div class="popup">
      <h3>Объект на карте</h3>
      <p>Описание точки интереса</p>
      <button id="action-btn">Подробнее</button>
    </div>
  `
});

ui.addBubble(bubble);

В таком виде кнопка уже существует в DOM, но обработчик событий ещё не подключён, что требует дополнительной логики.

Привязка событий к элементам внутри окна

Поскольку содержимое создаётся динамически, прямое навешивание обработчиков до вставки в DOM невозможно. Основные подходы:

1. Делегирование событий

Наиболее устойчивый метод — использование делегирования:

document.addEventListener('click', (event) => {
  if (event.target && event.target.id === 'action-btn') {
    console.log('Кнопка нажата');
  }
});

Этот подход работает даже при пересоздании окна, так как обработчик привязан к документу.

2. Привязка после рендеринга окна

Иногда требуется доступ к конкретному экземпляру окна. Тогда обработчики навешиваются после вставки DOM:

bubble.addEventListener('statechange', () => {
  const btn = document.getElementById('action-btn');
  if (btn) {
    btn.oncl ick = () => {
      alert('Действие выполнено');
    };
  }
});

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

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

Всплывающие окна в HERE Maps не являются постоянными DOM-элементами. Они:

  • создаются при открытии
  • могут пересоздаваться при перемещении карты
  • уничтожаются при закрытии

Это означает, что любые интерактивные элементы должны быть привязаны с учётом динамичности DOM.

Основные состояния:

  • open — окно отображается
  • close — окно уничтожает DOM-содержимое
  • update — контент пересоздаётся

При проектировании логики важно учитывать, что ссылки на элементы DOM могут становиться недействительными.

Формы и пользовательский ввод внутри окна

Всплывающие окна могут содержать полноценные формы, включая input, select и textarea.

Пример:

const bubble = new H.ui.InfoBubble(position, {
  content: `
    <div>
      <label>Имя:</label>
      <input type="text" id="username" />
      <button id="send-btn">Отправить</button>
    </div>
  `
});

Обработка данных:

document.addEventListener('click', (e) => {
  if (e.target.id === 'send-btn') {
    const input = document.getElementById('username');
    console.log(input.value);
  }
});

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

  • форма не требует отдельного submit
  • возможна интеграция с AJAX-запросами
  • необходимо учитывать предотвращение всплытия событий на карту

Предотвращение конфликтов с картой

Интерактивные элементы внутри окна могут конфликтовать с жестами карты (drag, zoom). Чтобы избежать этого, необходимо блокировать всплытие событий.

document.addEventListener('mousedown', (e) => {
  if (e.target.closest('.popup')) {
    e.stopPropagation();
  }
});

Дополнительно:

document.addEventListener('wheel', (e) => {
  if (e.target.closest('.popup')) {
    e.stopPropagation();
  }
}, { passive: true });

Это предотвращает нежелательное масштабирование карты при работе с элементами UI.

Динамическое обновление содержимого окна

Интерактивные окна часто требуют изменения содержимого без закрытия.

Подходы:

Обновление через setContent

bubble.setContent(`
  <div>
    <p>Загрузка данных...</p>
  </div>
`);

Инкрементальное обновление DOM

const container = document.querySelector('.popup');
container.innerHTML = '<p>Данные обновлены</p>';

Первый способ предпочтителен, так как сохраняет согласованность с UI-слоем карты.

Добавление сложных интерфейсных компонентов

Внутри всплывающих окон можно размещать:

  • переключатели слоёв карты
  • мини-карточки объектов
  • кнопки построения маршрута
  • индикаторы состояния
  • списки ближайших объектов

Пример панели действий:

content: `
  <div>
    <h4>Маршрут</h4>
    <button id="route-btn">Построить</button>
    <button id="save-btn">Сохранить</button>
  </div>
`

Обработчики:

document.addEventListener('click', (e) => {
  if (e.target.id === 'route-btn') {
    console.log('Строим маршрут');
  }

  if (e.target.id === 'save-btn') {
    console.log('Сохраняем объект');
  }
});

Работа с несколькими окнами

При отображении нескольких всплывающих окон одновременно возникает проблема идентификаторов элементов DOM.

Рекомендуемые практики:

  • генерировать уникальные ID
  • использовать data-атрибуты
  • избегать глобальных селекторов

Пример:

const id = `btn-${Math.random().toString(36).substr(2, 9)}`;

content: `
  <button id="${id}">Нажать</button>
`

Обработчик:

document.addEventListener('click', (e) => {
  if (e.target.id.startsWith('btn-')) {
    console.log('Кнопка конкретного окна');
  }
});

Использование data-атрибутов для логики

Более устойчивый подход — data-атрибуты:

content: `
  <button data-action="route">Маршрут</button>
  <button data-action="info">Информация</button>
`

Обработка:

document.addEventListener('click', (e) => {
  const action = e.target.dataset.action;

  if (action === 'route') {
    console.log('route action');
  }

  if (action === 'info') {
    console.log('info action');
  }
});

Этот метод масштабируется лучше при росте интерфейса.

Безопасность и очистка HTML

Так как содержимое окна представляет собой HTML, необходимо учитывать потенциальные риски:

  • внедрение скриптов
  • XSS через динамические данные
  • некорректная разметка

Рекомендуется:

  • экранировать пользовательский ввод
  • избегать вставки raw HTML из внешних источников
  • использовать шаблонизацию с очисткой

Пример небезопасного подхода:

content: `<div>${userInput}</div>`

Безопасный вариант:

const safe = userInput.replace(/</g, "&lt;").replace(/>/g, "&gt;");

Оптимизация производительности интерактивных окон

При частом открытии окон с интерактивными элементами важно:

  • минимизировать количество DOM-операций
  • избегать повторного навешивания обработчиков
  • использовать кеширование DOM-ссылок
  • ограничивать использование тяжёлых библиотек внутри окна

Особенно критично:

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

Связь интерактивных окон с объектами карты

Важная архитектурная особенность — привязка окна к геообъекту:

const marker = new H.map.Marker(position);

marker.addEventListener('tap', () => {
  ui.addBubble(new H.ui.InfoBubble(position, {
    content: '<div>Объект</div>'
  }));
});

Это позволяет создавать контекстные интерфейсы, зависящие от выбранного объекта.

Обновление интерфейса на основе событий карты

Интерактивные окна могут реагировать на события карты:

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

Пример:

map.addEventListener('mapviewchange', () => {
  console.log('Карта изменилась');
});

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

Расширение логики через внешние сервисы

Интерактивные элементы часто связаны с внешними API:

  • маршрутизация
  • геокодирование
  • поиск POI
  • аналитика действий пользователя

Пример вызова:

document.addEventListener('click', async (e) => {
  if (e.target.id === 'route-btn') {
    const response = await fetch('/api/route');
    const data = await response.json();
    console.log(data);
  }
});

Интеграция кастомных компонентов UI

Внутри окон можно использовать собственные UI-библиотеки:

  • React-компоненты (через портал)
  • Vue-компоненты
  • чистый vanilla JS

Общий принцип остаётся одинаковым: контейнер окна — это DOM-узел, в который можно монтировать интерфейс.

ReactDOM.render(<PopupComponent />, document.getElementById('popup-root'));

Управление закрытием окна при взаимодействии

Иногда требуется закрывать окно при действии пользователя:

document.addEventListener('click', (e) => {
  if (e.target.id === 'close-btn') {
    bubble.close();
  }
});

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

Оглавление