Мы создали редактор стилей, который помогает адаптировать карту под задачи сторонних сервисов.
Слушать
Карты
Уже несколько столетий карты помогают планировать действия и «контролировать» мир — нельзя повлиять на географию и ландшафт, но если узнать о них, рассмотрев на карте, то уже можно подстроиться.
Карты — объекты информационного дизайна. Это сложная инфографика, где важны обе составляющие: информация — данные, привязанные к координатам, и графика — сбалансированное оформление этих данных.
Оформление карты зависит от задач, которые она решает. Сравним карты MapsMe и Uber.
MapsMe — карты для путешественников и туристов с акцентами на пешие сценарии и множеством POI городских мест. Задача таких карт — показать ориентиры на местности и заинтересовать пользователя маршрутами, достопримечательностями и необычными местами поблизости.
Uber — карта про автомобильную доступность мест и небольшой пеший сценарий. Главную роль играет навигация в кварталах городской застройки, а достопримечательности важны только в качестве ориентиров на местности.
Пользователи не всегда замечают вариативность карт. Но в этом и заключается работа команд, которые их разрабатывают — подстроить карты под фокус пользователя так, чтобы ничего не отвлекало. Чаще такие задачи решаются настройкой стилей и объёма информации на каждом масштабе: показывать или скрыть дворовые проезды на ранних зумах, показывать иконки автобусных остановок, вводить цветовое кодирование зданий разного типа или все сделать одинаковыми и ещё много вариаций.
Для таких задач мы и сделали редактор стилей.
Карта «2ГИС»
Сейчас в базовом дневном стиле 250 слоёв. И это не предел — кастомизируя только уже существующие слои, количество можно увеличить на пару сотен точно. Каждый слой — определённый тип объекта: дороги разного типа, здания, подписи, гидрография и остальные. Больше всего слоёв с точками. Их количество напрямую связано с объёмом данных в трёх больших категориях:
Безусловно, что-то упрощается, группируется — это важный процесс, но при этом и повышается детализация, информативность, добавляются новые типы данных.
Редактор «2ГИС»
Раньше между тем, что создавали картографы, и тем, как карта может выглядеть в конечном продукте, существовала грань из тысячи строк кода. Технически процесс прост, но технологически — запутан. Множество конфигов, описывающих внешний вид слоёв карты, множество итераций выгрузки карты для проверки на тестовых стейджингах через множественные действия их доставки до этих стейджингов.
Желание обернуть сухой код в понятный и доступный UI появилось почти сразу — с момента первого создания стиля карты. И когда пришло время для этой задачи, что-то придумывать особо не пришлось — примерный вектор был уже давно понятен.
Интерфейс редактора старались сделать лёгким, интуитивно понятным и наследующим фирменный стиль «2ГИС». Отдельный вызов — уместить атрибуты для всех типов объектов, это ≈100 уникальных значений, не превратив редактор в excel-таблицу параметров и значений. Поиск общих контролов, порядок атрибутов, группировка их в табы и желание оставить весь процесс настройки в одном окне определили интерфейс редактора.
Вдохновлялись наиболее близким по духу и разнообразию инструментов Mapbox’ом. Приятные и полезные функции подсматривали в редакторах векторной графики: Sketch, Adobe Illustrator.
Пример — контрол для настройки анимации изменения цвета, размера, ширины и других параметров, которые могут зависеть от зума карты.
Изначально из основного продукта пытались заимствовать графику, метафоры, типографику и цвета. И если с последними двумя удалось, то метафоры для кнопок и обозначений слоёв, заимствованные из 2ГИС, выглядели чужеродно. Немного их переделали, и так у редактора появилось своё лицо.
Уже создавая редактор, мы пересмотрели структуру данных — объединили сущности, которые были раньше независимыми. Та же иконка с подписью — раньше для наших движков они были независимыми объектами, что крайне неочевидно для сторонних пользователей.
«Доставлять» редактор сразу планировали частями. В первой — функции, позволяющие проверить работоспособность всех систем. Во вторую версию постарались собрать базовые инструменты для решения основных потребностей. В третьей части ускорим и упростим настройку и добавим больше возможностей для тонкой настройки отображаемых данных.
Купить рекламу Отключить
Определиться с составом второго, основного релиза, помогло то, что практически сразу с нами работал, реальный пользователь, который давал обратную связь. Ребята из Такси ВКонтакте использовали редактор, чтобы создать собственный стиль карты для своего продукта.
Настя Барыкина, дизайнер визуализации геоданных «Такси ВКонтакте»:
Для агрегатора такси карты и навигация — одни из ключевых составляющих сервиса. Без удобных и понятных карт ни пассажир не сможет определить точку подачи, ни водитель добраться до пассажира. Пассажиру должно быть интуитивно понятно, как заказать такси, куда приедет водитель и каким маршрутом поедет. Большую роль играет интерфейс карт и цветовые решения.
Мы в Ситимобил создали свой прототип стилей карт для такси, который затем переносился на данные 2ГИС.
Сам редактор стилей достаточно прост в использовании, если знать структуру данных. В нем уже достаточно функций, чтобы настроить карту для публикации. Освоить его можно за пару дней.
От первого релиза к текущему очень многое изменилось. Изначально вообще можно было настроить только полигональные объекты. Потом появилась возможность их подписывать. Затем — более расширенные настройки для добавления своих иконок на карту и для отображения объектов на разных масштабах.
Команда 2ГИС очень быстро реагировала на обратную связь. Если у нас что-то не получалось настроить, они разбирались: либо дорабатывали редактор, либо предлагали альтернативы. От работы с ними остались только приятные впечатления.
С чего начать
Для начала определиться, какие задачи должна решать карта. После этого перейти на styles.2gis.com.
Можно начать с чистого листа. Но для быстрого старта мы подготовили два шаблона: дневной и ночной.
[{"title":"","image":{"type":"image","data":{"uuid":"9f6598f8-3a8f-5437-80fd-884b5fa11cfd","width":2890,"height":1542,"size":754659,"type":"png","color":"e1e7c3","hash":"","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"6ea6711b-a021-5b7b-afc4-006853fd6727","width":2890,"height":1541,"size":696628,"type":"png","color":"222d2e","hash":"","external_service":[]}}}]
Можно изменить ширину дорог:
[{"title":"","image":{"type":"image","data":{"uuid":"a1267ec6-d940-5d85-a569-42495acc0d1e","width":2890,"height":1542,"size":2555869,"type":"png","color":"e3e3e3","hash":"","external_service":[]}}},{"title":"","image":{"type":"image","data":{"uuid":"8d00616d-6d8d-5092-9708-eeea8166cd5c","width":2890,"height":1542,"size":2503519,"type":"png","color":"e4e4e4","hash":"","external_service":[]}}}]
Оставить только дома:
Или только дороги:
Или отключить объём зданий:
Или настроить приоритет показа POI по сферам деятельности:
Или с остановками транспорта со своим логотипом:
А можно сделать карту в зимнем стиле или в стиле олдскульного ДубльГИСа
Чтобы попробовать остальные возможности, заходите на styles.2gis.com. Редактор бесплатный, оплата только за использование API или SDK. Чтобы добавить карту в проект, получите ключ API.
Ещё немного подробностей о работе редактора стилей можно почитать на Хабре.
Источник: vc.ru
