Сервисы
Sergey Kolomenkin

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

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

Карты

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

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

Оформление карты зависит от задач, которые она решает. Сравним карты 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.

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

{ "author_name": "Sergey Kolomenkin", "author_type": "self", "tags": ["2\u0433\u0438\u0441"], "comments": 50, "likes": 79, "favorites": 126, "is_advertisement": false, "subsite_label": "services", "id": 189327, "is_wide": true, "is_ugc": true, "date": "Tue, 22 Dec 2020 08:16:36 +0300", "is_special": false }
0
50 комментариев
Популярные
По порядку
Написать комментарий...
30

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

Ответить
8

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

Ответить

Одинокий Орзэмэс

Stanislav
0

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить

Дикий мангал

4

Комментарий удален по просьбе пользователя

Ответить
3

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

Ответить
6

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

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

Ответить
0

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

Ответить
0

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

Ответить
3

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

Ответить
1

Эта фича будет доступна пользователям? Так хочется убрать тонны визуального говна в картах. 

Ответить
0

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

Ответить
3

Я про пользователей приложения 2GIS. Как мне кастомизировать карту в приложении на телефоне? 

Ответить
0

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

Ответить
0

Все очень просто: убрать рекламу, индикацию всяких парков, арт-объектов, театров, музеев и прочего. 

И будет счастье. 

Ответить
20

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

Ответить
2

Конечно, рекламодателям не будет счастья.

Ответить
1

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

Ответить

Одинокий Орзэмэс

Roman
–2

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

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

Ответить
4

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

Ответить

Одинокий

Sergey
0

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

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

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

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

Ответить
2

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

Ответить

Одинокий

Sergey
–1

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

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

Ответить
4

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

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

Ответить

Одинокий

Sergey
–1

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

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

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

Ответить
2

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

Ответить

Одинокий

Sergey
–7

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

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

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

Ответить
1

Ох.

Ответить

Одинокий

Sergey
–9

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

Удачи 😌

Ответить
1

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

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

Ответить

Одинокий

Digital
0

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

Ответить
0

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

Ответить
3

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

Ответить

Одинокий

Andrey
0

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

Ответить
1

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

Ответить
2

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

Ответить
1

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

Ответить
0

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

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

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

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

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
–4

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

Ответить

Комментарии

null