Управление полноэкранным режимом

Работа с интерактивными картами в веб-приложениях требует учёта ограниченного пространства интерфейса. Полноэкранный режим решает задачу расширения области отображения карты, обеспечивая максимальную вовлечённость в данные без отвлекающих элементов интерфейса браузера или страницы.

В контексте JavaScript API картографической платформы HERE Technologies полноэкранный режим может быть реализован как на уровне встроенных UI-компонентов, так и через нативный Fullscreen API браузера.

Нативный Fullscreen API и его роль в картографических интерфейсах

Браузерный Fullscreen API предоставляет базовый механизм для переключения DOM-элементов в полноэкранный режим.

Основной метод:

element.requestFullscreen();

Выход из полноэкранного режима:

document.exitFullscreen();

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

document.fullscreenElement;

Для картографических приложений ключевым элементом обычно выступает контейнер карты:

const mapContainer = document.getElementById('map');
mapContainer.requestFullscreen();

Особенность работы с картами заключается в необходимости синхронизации размеров рендеринга после изменения режима отображения. Большинство картографических движков требуют явного обновления viewport.

Инициализация карты HERE Maps JavaScript API

Базовая структура инициализации карты строится вокруг объекта H.Map.

const platform = new H.service.Platform({
  apikey: 'YOUR_API_KEY'
});

const defaultLayers = platform.createDefaultLayers();

const map = new H.Map(
  document.getElementById('map'),
  defaultLayers.vector.normal.map,
  {
    center: { lat: 48.8566, lng: 2.3522 },
    zoom: 10,
    pixelRatio: window.devicePixelRatio || 1
  }
);

Для корректной работы взаимодействия с мышью и сенсорным вводом подключаются события:

const beh * avior = new H.mapevents.Behavior(
  new H.mapevents.MapEvents(map)
);

UI-компоненты подключаются отдельно:

const ui = H.ui.UI.createDefault(map, defaultLayers);

Встроенный Fullscreen Control в UI HERE Maps

В стандартном UI-блоке доступны готовые элементы управления, включая кнопку полноэкранного режима.

После создания UI:

const ui = H.ui.UI.createDefault(map, defaultLayers);

на панель управления добавляется элемент Fullscreen автоматически (в зависимости от конфигурации UI и набора контролов).

При необходимости можно явно управлять добавлением контролов:

ui.removeControl('mapsettings');
ui.addControl('zoom');
ui.addControl('fullscreen');

Кнопка полноэкранного режима интегрируется в DOM-контролы карты и автоматически использует внутреннюю логику синхронизации размеров карты.

Программное управление полноэкранным режимом

Помимо UI-кнопки, полноэкранный режим может быть реализован вручную через контейнер карты.

const mapContainer = document.getElementById('map');

function enterFullscreen() {
  if (mapContainer.requestFullscreen) {
    mapContainer.requestFullscreen();
  }
}

Выход из режима:

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

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

function resizeMap() {
  map.getViewPort().resize();
}

Типичная проблема заключается в том, что без вызова resize() карта может некорректно отрисовать тайлы или оставить серые области.

Обработка событий изменения полноэкранного режима

Fullscreen API предоставляет событие изменения состояния:

document.addEventListener('fullscreenchange', () => {
  map.getViewPort().resize();
});

Дополнительно учитываются браузерные префиксы в старых версиях:

document.addEventListener('webkitfullscreenchange', () => {
  map.getViewPort().resize();
});

Синхронизация viewport после каждого переключения состояния критична для корректного поведения интерактивных слоёв.

Особенности поведения на мобильных устройствах

На мобильных платформах полноэкранный режим часто ограничен системными правилами браузера:

  • Safari iOS может не поддерживать полноценный fullscreen для произвольных элементов
  • Chrome Android поддерживает ограниченную версию API
  • сенсорные события могут изменять поведение UI-контролов

В таких условиях применяется альтернативный подход — растяжение контейнера на 100% viewport:

#map.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

И переключение класса:

mapContainer.classList.toggle('fullscreen');
map.getViewPort().resize();

Интеграция Fullscreen с событиями карты

В сложных приложениях полноэкранный режим влияет на поведение взаимодействий:

  • изменение масштаба колесом мыши
  • перерасчёт положения UI элементов
  • обновление кластеризации объектов

Пример привязки к событиям карты:

map.addEventListener('mapviewchangeend', () => {
  map.getViewPort().resize();
});

или более агрессивная стратегия:

map.addEventListener('pointerdown', () => {
  if (document.fullscreenElement) {
    map.getViewPort().resize();
  }
});

Пользовательские контролы полноэкранного режима

При необходимости можно создать собственную кнопку управления:

function FullscreenControl(control) {
  H.ui.Control.call(this);
  this.setAlignment(control || H.ui.LayoutAlignment.RIGHT_TOP);
}

FullscreenControl.prototype = Object.create(H.ui.Control.prototype);
FullscreenControl.prototype.constructor = FullscreenControl;

FullscreenControl.prototype.on Add = function (map) {
  const button = document.createElement('button');
  button.innerText = 'Fullscreen';

  button.oncl ick = () => {
    const el = map.getElement();
    if (!document.fullscreenElement) {
      el.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  };

  this.addChild(button);
};

Добавление в UI:

ui.addControl('custom-fullscreen', new FullscreenControl());

Синхронизация размеров при динамическом изменении контейнера

При изменении размеров карты (включая fullscreen) важно учитывать:

  • перерасчёт тайлов
  • обновление слоя объектов
  • корректировку положения аннотаций

Стандартный механизм:

window.addEventListener('resize', () => {
  map.getViewPort().resize();
});

В полноэкранном режиме это событие может срабатывать вместе с fullscreenchange, поэтому используется комбинированная стратегия:

function syncMapSize() {
  map.getViewPort().resize();
}

document.addEventListener('fullscreenchange', syncMapSize);
window.addEventListener('resize', syncMapSize);

Ограничения и поведение внутри iframe

При размещении карты в iframe полноэкранный режим зависит от атрибута allowfullscreen:

<iframe src="map.html" allowfullscreen></iframe>

Без этого разрешения requestFullscreen() может быть проигнорирован.

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

Взаимодействие Fullscreen с рендерингом WebGL

HERE Maps использует WebGL для отрисовки векторных слоёв. При переходе в полноэкранный режим:

  • изменяется размер canvas
  • пересоздаётся буфер рендеринга
  • может происходить кратковременная задержка отрисовки

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

document.addEventListener('fullscreenchange', () => {
  setTimeout(() => {
    map.getViewPort().resize();
  }, 50);
});

Задержка обеспечивает завершение перерасчёта layout браузером перед обновлением WebGL контекста.

Управление стилями UI в полноэкранном режиме

Полноэкранный режим часто требует адаптации интерфейса:

.here-ui .H_ui {
  font-size: 14px;
}

:fullscreen .H_ui {
  font-size: 16px;
}

Или более специфично:

#map:fullscreen {
  background: #000;
}

Такая настройка улучшает читаемость элементов управления при увеличении области отображения.

Программная архитектура переключения режима

Типовая структура модуля управления полноэкранным режимом включает:

  • слой UI (кнопки, меню)
  • слой состояния (fullscreen active/inactive)
  • слой синхронизации карты
const FullscreenManager = {
  toggle() {
    const el = map.getElement();

    if (!document.fullscreenElement) {
      el.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  },

  init() {
    document.addEventListener('fullscreenchange', () => {
      map.getViewPort().resize();
    });
  }
};

FullscreenManager.init();

Поведение при смене ориентации экрана

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

window.addEventListener('orientationchange', () => {
  map.getViewPort().resize();
});

Это необходимо для предотвращения смещения слоёв и некорректного позиционирования объектов после поворота устройства.

Оглавление