ShowPadding

Параметр padding в Mapbox GL JS управляет тем, как камера карты учитывает внутренние отступы при расчёте центра, масштаба и области видимости. Он напрямую влияет на логическое «рабочее окно» карты, сдвигая геометрический центр и изменяя поведение таких методов, как fitBounds, flyTo и обновление camera.

Визуальная область карты в Mapbox GL JS не всегда совпадает с фактическими границами canvas. При использовании padding формируется внутренний прямоугольник, в пределах которого Mapbox старается разместить географический контент.

Фактически камера оперирует двумя системами координат:

  • полный размер контейнера карты (viewport)
  • уменьшенная область, ограниченная padding

Именно вторая область считается «основной» для расчётов центра и зума.

Структура padding и его влияние

Padding может задаваться как единое число или как объект с отдельными сторонами:

map.fitBounds(bounds, {
  padding: 40
});

или

map.fitBounds(bounds, {
  padding: {
    top: 80,
    bottom: 40,
    left: 60,
    right: 60
  }
});

Логика расчёта

Каждая сторона уменьшает рабочую область карты:

  • top сдвигает верхнюю границу вниз
  • bottom сдвигает нижнюю границу вверх
  • left сдвигает левую границу вправо
  • right сдвигает правую границу влево

В результате центр камеры перестаёт совпадать с геометрическим центром bounding box.

Поведение fitBounds при активном padding

Метод fitBounds стремится уместить указанный географический прямоугольник в доступную область. При наличии padding алгоритм работает в два шага:

  1. вычисляется реальный размер viewport
  2. из него вычитаются отступы
  3. bounding box масштабируется под уменьшенную область

Это приводит к изменению zoom уровня по сравнению с вариантом без padding.

Ключевая особенность: padding не влияет на географические координаты, но полностью меняет визуальную интерпретацию центра и масштаба.

Связь padding и camera state

В современном API Mapbox GL JS padding является частью состояния камеры:

map.setPadding({
  top: 100,
  bottom: 0,
  left: 0,
  right: 0
});

или через setCenter, setZoom с сохранением текущего padding.

При изменении padding камера пересчитывает projection без изменения координат центра в географическом смысле, но визуально центр смещается.

Использование padding в интерфейсных сценариях

Padding применяется не только для геометрии, но и для UI-композиции.

Выделение области под панели интерфейса

Типичный случай — боковая панель:

map.fitBounds(bounds, {
  padding: {
    left: 300,
    top: 50,
    right: 50,
    bottom: 50
  }
});

Здесь левая часть карты «зарезервирована» под интерфейс, и география смещается вправо.

Нижние информационные блоки

При наличии bottom sheet:

map.setPadding({
  bottom: 250
});

Карта автоматически поднимает центр визуально вверх, чтобы важные объекты не перекрывались UI-элементами.

Псевдовизуализация области padding (ShowPadding)

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

Логически это выглядит так:

  • внешний прямоугольник — весь viewport
  • внутренний прямоугольник — область после вычитания padding

Внутренняя область становится ключевой для:

  • расчёта центра
  • определения оптимального zoom
  • размещения маркеров при fitBounds

Если включена визуализация, можно наблюдать, как объекты «стремятся» попасть именно внутрь этой зоны.

Влияние padding на анимации камеры

При использовании flyTo или easeTo padding изменяет траекторию движения камеры.

map.flyTo({
  center: [longitude, latitude],
  zoom: 12,
  padding: {
    left: 200
  }
});

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

  • камера анимируется к новому центру уже с учётом padding
  • финальная точка центра смещена относительно геометрического центра экрана
  • траектория движения может казаться нелинейной при больших отступах

Padding и маркеры

Маркер, добавленный в карту, всегда позиционируется по географическим координатам, но его визуальное восприятие зависит от padding:

  • при большом left padding маркеры визуально «сжимаются» вправо
  • при bottom padding ключевые точки поднимаются вверх
  • кластеризация может казаться смещённой, хотя координаты остаются неизменными

Типичные ошибки при работе с padding

Игнорирование reset padding

При последовательных вызовах:

map.setPadding({left: 200});
map.setPadding({top: 100});

второй вызов перезаписывает первый, если не объединять значения вручную.

Конфликт с resize контейнера

При изменении размера карты padding не пересчитывается автоматически в пользовательских сценариях интерфейса. Это приводит к визуальному сдвигу центра.

Несовместимость с фиксированными overlay

Абсолютно позиционированные элементы поверх карты часто дублируют эффект padding, создавая двойное смещение.

Внутренние вычисления проекции

При наличии padding Mapbox GL JS модифицирует матрицу проекции:

  • viewport transform учитывает inset-rectangle
  • world-to-screen координаты вычисляются относительно уменьшенной области
  • центр камеры фактически проецируется в центр padded viewport

Это означает, что изменение padding эквивалентно изменению системы координат отображения без изменения географии.

Использование padding как части UX-дизайна карты

Padding становится инструментом управления вниманием пользователя:

  • смещение центра для выделения важной области
  • создание визуального баланса между картой и интерфейсом
  • управление плотностью объектов в активной зоне

При проектировании интерфейса карты padding фактически заменяет ручное управление координатами камеры, позволяя работать на уровне компоновки, а не геометрии.

Оглавление