Редактор стилей карты: помогайте пользователям контролировать мир

Мы создали редактор стилей, который помогает адаптировать карту под задачи сторонних сервисов.

Уже несколько столетий карты помогают планировать действия и «контролировать» мир — нельзя повлиять на географию и ландшафт, но если узнать о них, рассмотрев на карте, то уже можно подстроиться.

Карты — объекты информационного дизайна. Это сложная инфографика, где важны обе составляющие: информация — данные, привязанные к координатам, и графика — сбалансированное оформление этих данных.

Оформление карты зависит от задач, которые она решает. Сравним карты MapsMe и Uber.

MapsMe — карты для путешественников и туристов с акцентами на пешие сценарии и множеством POI городских мест. Задача таких карт — показать ориентиры на местности и заинтересовать пользователя маршрутами, достопримечательностями и необычными местами поблизости.

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

Пользователи не всегда замечают вариативность карт. Но в этом и заключается работа команд, которые их разрабатывают — подстроить карты под фокус пользователя так, чтобы ничего не отвлекало. Чаще такие задачи решаются настройкой стилей и объёма информации на каждом масштабе: показывать или скрыть дворовые проезды на ранних зумах, показывать иконки автобусных остановок, вводить цветовое кодирование зданий разного типа или все сделать одинаковыми и ещё много вариаций.

Для таких задач мы и сделали редактор стилей.

Сейчас в базовом дневном стиле 250 слоёв. И это не предел — кастомизируя только уже существующие слои, количество можно увеличить на пару сотен точно. Каждый слой — определённый тип объекта: дороги разного типа, здания, подписи, гидрография и остальные. Больше всего слоёв с точками. Их количество напрямую связано с объёмом данных в трёх больших категориях:

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

Раньше между тем, что создавали картографы, и тем, как карта может выглядеть в конечном продукте, существовала грань из тысячи строк кода. Технически процесс прост, но технологически — запутан. Множество конфигов, описывающих внешний вид слоёв карты, множество итераций выгрузки карты для проверки на тестовых стейджингах через множественные действия их доставки до этих стейджингов.

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

Интерфейс редактора старались сделать лёгким, интуитивно понятным и наследующим фирменный стиль «2ГИС». Отдельный вызов — уместить атрибуты для всех типов объектов, это ≈100 уникальных значений, не превратив редактор в excel-таблицу параметров и значений. Поиск общих контролов, порядок атрибутов, группировка их в табы и желание оставить весь процесс настройки в одном окне определили интерфейс редактора.

Вдохновлялись наиболее близким по духу и разнообразию инструментов Mapbox’ом. Приятные и полезные функции подсматривали в редакторах векторной графики: Sketch, Adobe Illustrator.

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

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

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

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

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

Настя Барыкина, дизайнер визуализации геоданных «Такси ВКонтакте»:

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

Мы в Ситимобил создали свой прототип стилей карт для такси, который затем переносился на данные 2ГИС.

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

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

Команда 2ГИС очень быстро реагировала на обратную связь. Если у нас что-то не получалось настроить, они разбирались: либо дорабатывали редактор, либо предлагали альтернативы. От работы с ними остались только приятные впечатления.

Для начала определиться, какие задачи должна решать карта. После этого перейти на styles.2gis.com.

Можно начать с чистого листа. Но для быстрого старта мы подготовили два шаблона: дневной и ночной.

Можно изменить ширину дорог:

Оставить только дома:

Или только дороги:

Или отключить объём зданий:

Или настроить приоритет показа POI по сферам деятельности:

Или с остановками транспорта со своим логотипом:

А можно сделать карту в зимнем стиле или в стиле олдскульного ДубльГИСа

Чтобы попробовать остальные возможности, заходите на styles.2gis.com. Редактор бесплатный, оплата только за использование API или SDK. Чтобы добавить карту в проект, получите ключ API.

Ещё немного подробностей о работе редактора стилей можно почитать на Хабре.

#2гис