Введение
Редактор стилей помогает визуально настроить карту под цели и фирменный стиль приложений и сервисов, использующих API & SDK 2ГИС.
Возможности редактора
Редактор настраивает стилевые слои карты. Каждый стилевой слой задаёт внешний вид целой группе объектов из данных карты.
В стилевом слое можно настроить:
- цвета объектов — домов, улиц, парков, водоемов и других;
- иконки для обозначения объектов: метро, автовокзалов, аэропортов, светофоров, парковок;
- подписи на карте — скрыть, отобразить или изменить плотность их расположения;
- масштаб отображения объектов слоя — на маленьком масштабе показывать только иконки кофеен или автобусных остановок.
Также в редакторе можно скрыть слои с данными, которые не нужны в проекте.
Принцип работы
Данные карты 2ГИС — это объекты, которые состоят из геометрий и атрибутов. По атрибутам карта определяет, к какому стилевому слою отнести объект — когда, какого цвета и размера его отобразить. Редактор может менять эти стилевые слои и оформлять карту в визуальном стиле любого сервиса или приложения.
Готовый проект со стилями хранится на бэкенде 2ГИС и по идентификатору подключается в MapGL JS API для веб-приложений или в iOS / Android WebGL SDK для мобильных приложений.
Создание проекта
Есть три способа создать свой стиль для карты — с нуля, из базовых шаблонов и из копии стиля.
Базовый стиль
Это самый простой способ стилизации карты под свой продукт. Базовые стили уже настроены в виде дневной и ночной темы 2ГИС, их можно скопировать к себе в аккаунт и править как угодно.
Новый стиль
Чтобы настроить всё с нуля, выберите новый шаблон в списке стилей редактора. Работа над ним может занять больше времени, чем настройка базовых шаблонов: в стиле дневной темы больше 200 уже настроенных слоёв, а здесь — ни одного.
Копия стиля
Вы можете скопировать свой или чужой проект стиля. Чтобы скопировать один из своих стилей, зайдите на главную страницу редактора, выберите нужный проект и нажмите на три точки в левом нижнем углу. Выберите опцию «Дублировать».
Чтобы поработать с проектом другого пользователя, запросите у автора стиля ссылку для копирования. Подробнее о копировании стилей — в разделе «Просмотр и доступ».
Создание и настройка нового слоя
- В меню слева нажмите на иконку папки с плюсом «Создать новый слой».
- Выберите тип слоя — например, полигон, линия или точка. Тип определяет внешний вид слоя и возможности его настройки.
- Выберите данные для этого слоя. В каждом типе слоя доступны только определённые наборы данных с карты — например, для линии как слоя будут доступны разные данные улиц, а для полигона как слоя — области, кварталы, здания.
- Настройте внешний вид слоя: цвет, масштаб отображения, толщину линии и т.д.
Публикация стилей
В редакторе вы работаете с черновиком проекта. Все изменения автоматически сохраняются.
Чтобы черновик стал публичным, нажмите кнопку «Опубликовать». После этого стиль автоматически обновится во всех сервисах, где он подключён.
Просмотр и доступ
Вы можете поделиться ссылкой на проект с другими пользователями 2ГИС. Для этого нажмите «Поделиться» в верхнем меню.
Ссылка для просмотра — другой пользователь сможет посмотреть стиль, но не сможет скопировать его себе.
Ссылка для копирования — другой пользователь сможет как посмотреть стиль, так и скопировать его себе для дальнейшей работы. Используйте эту ссылку, если хотите дать возможность другим пользователям создавать свои стили на базе вашего.
Чтобы использовать настроенный стиль в веб-странице или приложении на Android или iOS, подключите его с помощью идентификатора.
Подключение стилей
MapGL JS API
- Нажмите «Поделиться» в проекте со стилем.
- Скопируйте идентификатор стиля.
- Добавьте его в код карты — опция
style
классаMap
. - С помощью опции
styleZoom
укажите стартовый масштаб карты.
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
key: 'Your API access key',
style: 'Your Style ID',
styleZoom: 13,
});
iOS WebGL SDK
- Нажмите «Поделиться» в проекте со стилем.
- Скопируйте идентификатор стиля.
- Добавьте его в код карты — опция
mapStyleId
классаMap
. - С помощью опции
styleZoom
укажите стартовый масштаб карты.
let map = MapView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
map.show(
apiKey: "Your API access key",
center: CLLocationCoordinate2D(latitude: 55.31878, longitude: 25.23584),
styleZoom: 16,
mapStyleId: "Your Style ID"
)
Android WebGL SDK
- Нажмите «Поделиться» в проекте со стилем.
- Скопируйте идентификатор стиля.
- Добавьте его в код карты — опция
style
классаMapFragment
. - С помощью опции
styleZoom
укажите стартовый масштаб карты.
val mapFragment = supportFragmentManager.findFragmentById(R.id.mapFragment) as MapFragment
mapFragment.setup(
apiKey = "Your API key",
center = LonLat(37.6175, 55.7520),
style = StyleId("Your Style ID"),
styleZoom = 16.0
)