Параметры padding

Параметр padding в MapLibre GL JS используется для создания внутренних отступов внутри области карты. Отступы изменяют доступное пространство для отображения географических объектов и влияют на работу методов позиционирования камеры.

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

  • боковой панелью;
  • всплывающим окном;
  • меню навигации;
  • информационным блоком;
  • панелью поиска;
  • мобильными элементами управления.

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

Общая структура

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

padding: {
    top: 50,
    bottom: 50,
    left: 100,
    right: 100
}

Каждое значение задаётся в пикселях.

Доступные свойства:

Свойство Описание
top Отступ сверху
bottom Отступ снизу
left Отступ слева
right Отступ справа

Как работает padding

По умолчанию центр карты находится в геометрическом центре контейнера.

Если добавить левый отступ:

padding: {
    left: 300
}

видимая область карты смещается вправо.

Фактически MapLibre начинает считать рабочей областью пространство за вычетом указанных отступов. Центр вычисляется относительно этой новой области.

Например:

+----------------------------------+
|                                  |
|                                  |
|                                  |
|                                  |
|                                  |
+----------------------------------+

Центр находится посередине контейнера.

После добавления левого отступа:

+----------------------------------+
|######                            |
|######                            |
|######                            |
|######                            |
|######                            |
+----------------------------------+

###### = область padding

Центр карты будет смещён вправо.

Использование в конструкторе карты

Отступы можно указать сразу при создании экземпляра карты.

const map = new maplibregl.Map({
    container: 'map',
    style: 'style.json',
    center: [37.6176, 55.7558],
    zoom: 10,
    padding: {
        left: 300
    }
});

В этом примере карта сразу создаётся с учётом боковой панели шириной 300 пикселей.

Padding в методах управления камерой

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

Поддержка имеется у следующих методов:

  • jumpTo()
  • easeTo()
  • flyTo()
  • fitBounds()
  • fitScreenCoordinates()

Использование с easeTo

Метод easeTo() плавно перемещает камеру.

map.easeTo({
    center: [37.6176, 55.7558],
    zoom: 12,
    padding: {
        left: 300
    }
});

После завершения анимации объект окажется визуально смещён вправо относительно центра контейнера.

Это особенно полезно при открытии боковой панели.

Использование с flyTo

При анимационном перелёте логика остаётся такой же.

map.flyTo({
    center: [30.3141, 59.9386],
    zoom: 13,
    padding: {
        right: 250
    }
});

Карта построит траекторию полёта так, чтобы конечное положение учитывало указанный отступ.

Использование с jumpTo

Метод jumpTo() выполняет мгновенное перемещение без анимации.

map.jumpTo({
    center: [39.7015, 47.2357],
    padding: {
        top: 100
    }
});

Результат будет аналогичен easeTo(), но без плавного перехода.

Padding и fitBounds

Одно из наиболее важных применений — совместная работа с методом fitBounds().

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

Без отступов:

map.fitBounds([
    [37.5, 55.6],
    [37.8, 55.9]
]);

С отступами:

map.fitBounds(
    [
        [37.5, 55.6],
        [37.8, 55.9]
    ],
    {
        padding: {
            left: 300,
            top: 50,
            right: 50,
            bottom: 50
        }
    }
);

Теперь ограничивающий прямоугольник будет рассчитан внутри области, оставшейся после вычета всех отступов.

Одинаковый отступ со всех сторон

Во многих случаях одинаковое значение требуется для всех сторон.

MapLibre позволяет использовать сокращённую запись:

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

Эквивалентно:

padding: {
    top: 50,
    bottom: 50,
    left: 50,
    right: 50
}

Такой вариант часто применяется для создания свободного пространства вокруг объектов.

Динамическое изменение отступов

Часто размеры интерфейса меняются во время работы приложения.

Например, пользователь открывает и закрывает боковую панель.

const sidebarWidth = 350;

map.easeTo({
    padding: {
        left: sidebarWidth
    },
    duration: 500
});

После закрытия панели:

map.easeTo({
    padding: {
        left: 0
    },
    duration: 500
});

Карта плавно перестроит положение центра.

Использование вместе с выезжающей панелью

Распространённый сценарий:

function openSidebar() {
    map.easeTo({
        padding: {
            left: 400
        },
        duration: 700
    });
}

function closeSidebar() {
    map.easeTo({
        padding: {
            left: 0
        },
        duration: 700
    });
}

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

Смещение выбранного объекта

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

Пусть карточка располагается справа.

map.flyTo({
    center: marker.getLngLat(),
    zoom: 14,
    padding: {
        right: 350
    }
});

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

Padding и всплывающие окна

Всплывающее окно (Popup) может занимать значительную часть экрана.

Чтобы маркер не оказался скрытым за окном, используется дополнительный отступ.

map.easeTo({
    center: coordinates,
    padding: {
        bottom: 250
    }
});

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

Работа на мобильных устройствах

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

const isMobile = window.innerWidth < 768;

map.fitBounds(bounds, {
    padding: isMobile
        ? 20
        : 80
});

Либо:

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

Такой подход позволяет учитывать мобильные панели и карточки объектов.

Влияние на центр карты

Важно понимать, что padding не изменяет координаты центра.

Например:

map.easeTo({
    center: [37.6176, 55.7558],
    padding: {
        left: 300
    }
});

Координаты центра остаются прежними.

Изменяется лишь экранная проекция центра относительно контейнера карты.

Поэтому после применения отступов вызов:

map.getCenter();

вернёт исходные координаты.

Влияние на масштабирование

При использовании с fitBounds() отступы непосредственно влияют на итоговый уровень масштаба.

Большие значения уменьшают доступную площадь отображения.

Например:

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

и

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

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

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

Отрицательные значения

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

padding: {
    left: -100
}

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

Практически всегда следует использовать только положительные значения либо ноль.

Типичные значения

Наиболее распространённые размеры отступов:

Сценарий Значение
Небольшой внутренний отступ 20–40 px
Карточка объекта 150–300 px
Боковая панель 250–500 px
Мобильная нижняя панель 200–400 px
Большой информационный блок 400–600 px

Конкретные значения зависят от размеров контейнера карты и интерфейса приложения.

Практический пример

Карта с открывающейся боковой панелью:

const map = new maplibregl.Map({
    container: 'map',
    style: 'style.json',
    center: [37.6176, 55.7558],
    zoom: 11
});

function showLocation(lng, lat) {
    map.flyTo({
        center: [lng, lat],
        zoom: 14,
        padding: {
            left: 350
        },
        duration: 1200
    });
}

При выборе объекта карта автоматически смещает его вправо от панели, сохраняя хороший обзор и удобство взаимодействия.

Рекомендации по использованию

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

Нежелательный подход:

center: [lng + 0.01, lat]

Корректный подход:

padding: {
    left: 300
}

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

padding: {
    left: sidebar.offsetWidth
}

Использовать сокращённую форму для равномерных отступов.

padding: 50

Комбинировать с fitBounds() при отображении групп объектов.

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

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

Оглавление