Перейти к основному содержимому

Создание стиля карты

Вы можете изменять внешний вид карты и её объектов с помощью стилей. Стиль — это документ, который определяет внешний вид карты: какие данные отрисовывать, в каком порядке, как стилизовать данные при отрисовке, какие иконки использовать и т.д.

  1. Создайте свой стиль карты с помощью одного из инструментов:

    • Редактор стилей, который предоставляет возможность детально настраивать отрисовку любых компонентов карты. Вы можете создать свой стиль с нуля или использовать один из готовых шаблонов. Вы также можете изменять уже использующийся стиль прямо в Редакторе.

      Все инструкции по созданию стиля вы можете получить в документации Редактора стилей карты.

    • Спецификация стилей, которая предоставляет более ограниченный (по сравнению с Редактором стилей) набор настроек. Используйте спецификацию, если вы хотите изменять стиль карты (например, добавлять новый слой) «на лету».

  2. Передайте идентификатор созданного стиля с помощью опции style:

    const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    styleZoom: 13,
    key: 'Ваш ключ доступа к API',
    style: 'Ваш идентификатор стиля карты',
    });

В примере выше используется опция styleZoom вместо zoom. Выберите её, если вы хотите установить тот же масштаб, что и в настройках стиля. Подробнее см. в разделе Стилевой уровень масштабирования.

Также есть удобная опция defaultBackgroundColor, с помощью которой вы можете установить цвет фона во время загрузки вашего стиля. Это может быть полезно, если базовая цветовая тема нового стиля отличается от темы стиля по умолчанию. Например, вы можете установить темный цвет фона по умолчанию для тёмного стиля:


Переключение стилей

Если вам нужно изменить стиль карты «на лету», вы можете использовать метод setStyleById:

const map = new mapgl.Map('container', {
center: [37.616723, 55.751],
styleZoom: 13,
key: 'Ваш ключ для доступа к API',
});

map.setStyleById('Идентификатор вашего стиля карты');

Речь идёт об изменении стиля карты в целом, например, как при переключении между светлой и тёмной темой: