Создание проекта

Есть три способа создать свой стиль для карты — с нуля, из базовых шаблонов и из копии стиля.

Базовый стиль

Это самый простой способ стилизации карты под свой продукт. Базовые стили уже настроены в виде дневной и ночной темы 2ГИС, их можно скопировать к себе в аккаунт и править как угодно.

Новый стиль

Чтобы настроить всё с нуля, выберите новый шаблон в списке стилей редактора. Затем выберите мобильный SDK как тип карты. Работа над шаблоном с нуля может занять больше времени, чем настройка базовых шаблонов: в стиле дневной темы больше 200 уже настроенных слоёв, а здесь — ни одного.

Копия стиля

Вы можете скопировать свой или чужой проект стиля. Чтобы скопировать один из своих стилей, зайдите на главную страницу редактора, выберите нужный проект и нажмите на три точки в левом нижнем углу. Выберите опцию «Дублировать».

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

Создание и настройка нового слоя

• В меню слева нажмите на иконку папки с плюсом «Создать новый слой».
• Выберите тип слоя — например, полигон, линия или точка. Тип определяет внешний вид слоя и возможности его настройки.
• Выберите данные для этого слоя. В каждом типе слоя доступны только определённые наборы данных с карты — например, для линии как слоя будут доступны разные данные улиц, а для полигона как слоя — области, кварталы, здания.
• Настройте внешний вид слоя: цвет, масштаб отображения, толщину линии и т. д.

При создании нового слоя вы можете добавить динамический слой. Для этого включите опцию «Динамические слои». Такой слой позволит настроить внешний вид элементов, которые рисуются поверх карты — например, градиентные линии для визуализации пробок на дорогах или маркеры местоположения пользователя.

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

Просмотр и доступ

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

Вы можете поделиться ссылкой на проект с другими пользователями 2ГИС. Для этого нажмите «Поделиться» в верхнем меню.

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

Ссылка для копирования — другой пользователь сможет как посмотреть стиль, так и скопировать его себе для дальнейшей работы. Используйте эту ссылку, если хотите дать возможность другим пользователям создавать свои стили на базе вашего.

Подключение стилей

iOS SDK

• Нажмите «Поделиться» в проекте со стилем.
• Нажмите «Экспорт стиля».
• Выберите темы для экспорта.
• Придумайте названия для тем, чтобы удобнее переключать их на уровне кода в мобильном приложении — например, day, night и т. д.
• Нажмите «Экспортировать».
• В открывшейся вкладке «История» выберите созданный файл и нажмите «Скачать стиль».
• Переместите скачанные стили в папку с мобильным приложением и подключите их.

    var mapOptions = MapOptions.default
    let styleFactory = sdk.makeStyleFactory()
    mapOptions.styleFuture = styleFactory.loadResource(name: "styles.2gis", bundle: .main)
    let mapFactory = sdk.makeMapFactory(options: mapOptions)
    let map = mapFactory.map

Android SDK

• Нажмите «Поделиться» в проекте со стилем.
• Нажмите «Экспорт стиля».
• Выберите темы для экспорта.
• Придумайте названия для тем, чтобы удобнее переключать их на уровне кода в мобильном приложении — например, day, night и т. д.
• Нажмите «Экспортировать».
• В открывшейся вкладке «История» выберите созданный файл и нажмите «Скачать стиль».
• Переместите скачанные стили в папку с мобильным приложением и подключите их.

val mapContainer = findViewById<LinearLayout>(R.id.map_container)
// задайте настройки карты
val mapOptions = MapOptions().apply {
  // параметр styleFile позволяет указать файл стиля
  // если его не указать, будет использоваться встроенный стиль
  styleFile = null
  // а так будет использоваться стиль из указанного файла
  styleFile = ru.dgis.sdk.File("style.2gis")
  // если у вас две темы и они называются day и night, то они будут переключаться автоматически согласно настройкам системы
  // если у вас своё название тем и вы хотите, чтобы они автоматически переключались, то укажите их
  setTheme("light", "dark")
  // если вы самостоятельно хотите переключать темы, то используйте
  setTheme("cool theme")
}
// затем создайте карту, используя настроенный выше mapOptions
mapView = MapView(this, mapOptions)
mapContainer.addView(mapView)