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

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

Карты

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

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

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

Внешний вид одного и того же места — московского парка «Зарядье» — в приложениях MapsMe и Uber

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

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

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

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

Карта «2ГИС»

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

Транспортные точки: типы транспорта, линии веток метро
POI фирм — категорий с уникальными метафорами сфер деятельности
Достопримечательности — интересные и важные гео-объекты

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

Редактор «2ГИС»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С чего начать

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

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

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

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

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

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

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

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

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

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

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

0
50 комментариев
Написать комментарий...
towardsahead

Боже, храни 2ГИС!

Ответить
Развернуть ветку
Stanislav Kirichenko

Отличная фича!
Веду список с интересными фичами для чужих продуктов, эта попала в список 4 года назад. Дождался)

Ответить
Развернуть ветку
Ol Ka

Зачем вести список с интересными фичами в чужих продуктах, когда можно сделать интересные фичи в своём продукте — и безо всяких списков? 🤔

Ответить
Развернуть ветку
Mikhail Malyshev

Список фич из чужого продукта - тоже своего рода продукт :)

Ответить
Развернуть ветку
Сергей Чернышёв

Уже интересно, а какие остальные?)) 

Ответить
Развернуть ветку
Stanislav Kirichenko

Например фича loop from to на ютубе, или любом другом плеере, pornhub если хотите)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Михаил Белошицкий

Думаю, что наиболее существенная разница тут в данных. У 2гис и мапбокса они разные, какие вам более подходят, те и нужно стилизовать. А возможности у редакторов +/- одинаковые.

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Почти так и есть. Но разница есть — всё-таки, Mapbox существует уже очень давно, а мы только начинаем :-) 

Но тут важнее смотреть на задачи. Если нужны точные данные и карты, то я бы рекомендовал наш редактор. 

Ответить
Развернуть ветку
Sasha

2GIS – Founded 1999; 21 years ago
Mapbox – Founded 2010; 10 years ago
¯\_(ツ)_/¯

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Всё верно. И 21 год мы не развивали редактор стилей, так как фокус был на другом.

Ответить
Развернуть ветку
Sergey Vlasov

Только недавно обратил внимание, что на сайте Пика карта с их новостройками. Выглядит красиво.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Если вы захотите сделать карту именно под ваши интересы, то конечно. Но нужно будет подключить API.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Нет, так кастомизировать не получится. 
А что именно вам хочется изменить?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Anton Spiridonov

Без рекламы счастье будет не всем.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Sergei Timofeyev

Рекламодатели будут грустными, вы правы. )

Ответить
Развернуть ветку
Ol Ka

Попросить 2ГИС убрать AD/POI с карт — проще было попросить Apple свои устройства даром раздать 🤭

2ГИС же даже на отзывах зарабатывает 😉

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Можете поделиться опытом, как «2ГИС же даже на отзывах зарабатывает»? В статье по вашей ссылке не нашёл об этом.

Ответить
Развернуть ветку
Ol Ka

Зачем вам пересказ чужого опыта, когда вы можете легко получить свой собственный, да ещё и совершенно бесплатно?

Я вас научу: выписываете у компании сумму на расходы для R&D, потом выбираете рандомный негативный комментарий на карте, потом гуглите фразу «2ГИС удалить негативный отзыв с гарантией», потом выбираете исполнителя, потом передаёте ему тот самый негативный комментарий, потом профит 😉

Таким образом можно ещё и вычислить «помогаек», но, судя по датам и количеству предложений на рынке, услуга давно поставлена на поток — что говорит о том, что компания если не прямо, то косвенно извлекает из этого прибыль.

Тут, конечно, можно начать бить себя в грудь, кричать о честности и прозрачности, но факт — когда открываешь некоторые карточки, счётчик отзывов сбрасывается прямо на глазах, а в комментариях открыто пишут возмущения вроде «Почему удалили мой отзыв?». Но это, конечно, никакое не доказательство нечистоплотности 2ГИС 🤭

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Спасибо, но не хочу этим заниматься. Но хочу разобраться, что значит «2ГИС же даже на отзывах зарабатывает».

Ответить
Развернуть ветку
Ol Ka

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

А вот пользоваться описанным способом, чтобы убедиться в наличии проблемы, или не пользоваться — ваше полное право, здесь никто никого не принуждает 🙂

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Так я не спорю, что кто-то в интернете рассказывает, как они «удаляют отзывы».

Но вы же сказали, что 2ГИС на этом зарабатывает. Вот мне и стало интересно, что это за способ заработка такой. 

Ответить
Развернуть ветку
Ol Ka

Тогда зачем разводить спор на ровном месте? 😏

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

Там и узна́ете, кто именно в компании на этом зарабатывает: официальная бухгалтерия или отдельные сотрудники, имеющие доступ 😉

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Так никто не спорит — вы утверждаете, а я пытаюсь понять, что стоит за вашими словами. Но пока мы пришли только к тому, что я сам должен проверять ваши утверждения.

Ответить
Развернуть ветку
Ol Ka

Минуточку... Судя по щедрой раздаче минусов от вашего аккаунта, последовательному выпытыванию у меня деталей, показательном якобы непонимании схемы заработка компании на отзывах, и отказу проверять её на практике лично — вы и есть тот самый человек, который причастен к зарабатыванию на удалении негативных отзывов на карте 2ГИС, так? 😉

Блин, это же очевидно, почему это сразу мне в голову не пришло? 🙂

Хотя, это и не пришло бы мне в голову, если бы не ваш минус моему сообщению, которое вообще не имеет отношения к нашему диалогу, такая вот ирония судьбы 🤭

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Ох.

Ответить
Развернуть ветку
Ol Ka

Всё, меня утомил наш диалог — с детства не могу долго с картёжниками и другими шулерами общаться 🤭

Удачи 😌

Ответить
Развернуть ветку
Digital Sharks

Привет! Внесем ясность. Удалить отзыв с 2ГИС можно в двух случаях:
1) Если отзыв нарушает правила площадки, тогда его может удалить администрация.
2) Если отзыв не нарушает правила, то удаление возможно только по договоренности с автором отзыва. Мы регулируем конфликт между автором негатива и нашим клиентом через переговоры. Конфликт решается - автор удаляет отзыв сам. 

В нашей статье на VC мы рассказывали, как мы это делаем. 

Ответить
Развернуть ветку
Ol Ka

Испытываю чувство гордости и радости за ваш сервис, но вы далекооооо не единственные, кто оказывает услуги удаления отзывов 😏

Ответить
Развернуть ветку
Andrey Kulakov

Может быть стоит работать так, чтобы негативные отзывы не оставляли?)

Ответить
Развернуть ветку
Digital Sharks

Конечно, мы предупреждаем клиентов, удалять бесконечно - это не решение проблемы. Стоить удалить, если проблема решена, отзывы старые, но мешают бизнесу до сих пор. Второй шанс бизнесу можно дать, но постоянно косячить и удалять - это плохой вариант. 

Ответить
Развернуть ветку
Ol Ka

Кому? Тем, кто заказывает удаление негативных отзывов о своём бизнесе? Конечно, им сто́ит работать лучше, но речь-то сейчас не о них, а о тех, кто помогает им удалять эти отзывы 😉

Ответить
Развернуть ветку
Yagget Proof

Чёрт, неистово плюсую. 2ГИС в мобильном приложении - это просто ад. Хочешь найти маршрут от точки А до точки Б, а тебе вываливают рекламу, предложения, какие-то разноцветные значки, которые засирают весь экран. В последний раз, когда я на телефоне 2ГИСом решил воспользоваться, я его просто не смог победить и закрыл.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Art.Spark

соседняя тема слива MapsMe, прикатит вам много новых юзеров ...

Ответить
Развернуть ветку
Dear Moscow,
Внешний вид одного и того же места — московского парка «Зарядье» — в приложениях MapsMe и Uber

Кому нравится MAPS.ME для пеших прогулок и оффлайн-использования — не зевайте!

Максимально оперативно скачивайте нужные вам города и сохраняйте/экспортируйте метки — новый владелец вовсю разносит санузел: 

https://habr.com/ru/post/534242/

Не знаю насчёт Андроида, но владельцы яблок, похоже, уже опоздали. 
Но зато после обновления кошелёк в картах появился.

Ответить
Развернуть ветку
Artem Petrenkov

Для Андроида пока ещё обновления не было.

Ответить
Развернуть ветку
Алексей Щербаков

А планируется поддержка CartoCSS или стилей из Mapnik?

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

В ближайшее время не планируется.

Ответить
Развернуть ветку
Кирилл Царенко

Напишите, когда появится скин starcraft или redalert

Ответить
Развернуть ветку
Alexey Vinogradov

А сколько стоит у вас апи?

Ответить
Развернуть ветку
Sergey Kolomenkin
Автор

Цена зависит от количества запросов и способа применения. Получить ключ для тестирования можно бесплатно. Оставьте заявку, вам ответят. 

Ответить
Развернуть ветку
Ruslan Fatikhov

По сути создали snazzy maps.

Ответить
Развернуть ветку
Иван Родионов

У вас же вектор? Добавьте выгрузку в .svg для дизайнеров, что бы можно было вставлять в кликабельные прототипы.

Ответить
Развернуть ветку
Andrey Yurchenko

Ох уж этот 2Гис.
Почти месяц меня обрабатывал менеджер, предлагая приоритетное размещение (магазин мебели) и обещая отличную посещаемость. Согласовали «спец» условия на 1 месяц за 34000₽. Хотя минимум у них идёт на 3 месяца.
В середине месяца решил проверить почему так мало переходов на сайт. Оказалось, что по ключевому запросу меня просто не находят. Помимо этого, 2Гис отклонил название моей точки «Дисконт центр», сославшись на то, что это противоречит правилам. Но это не мешает другим организациям даже без платного размещения иметь такие названия. Двойные стандарты.

В итоге за месяц - 44 перехода на сайт. 44, Карл! То есть цена клика вышла почти в 750₽. Менеджер слился, сказал возврата не будет. 2Гис - это просто фуфло и надувательство. Подумайте дважды, прежде чем покупать там рекламу.

Ответить
Развернуть ветку
Юрий

За одно только это дизлайк

Ответить
Развернуть ветку
47 комментариев
Раскрывать всегда