Недавно мы обновили стиль картографического сервиса портала «Спутник». И хотим рассказать, как мы работали над обновлением, с чем экспериментировали и к чему в итоге пришли. Мультимасштабная веб-карта совмещает в себе различные функции, каждая из которых могла бы быть выполнена отдельной бумажной картой – она и топографическая, и дорожная, и туристическая, и основа для различных портальных сервисов. Поэтому создание стиля веб-карты — это непрерывный поиск универсального решения для отображения объектов, которое позволило бы одинаково успешно применять карту для различных задач пользователей.
Непрерывное изменение картостиля обусловлено прежде всего тем, что постоянно меняются устройства, на которых пользователи смотрят карты, увеличивается разрешение экранов, которое позволяет или даже требует максимально детализировать карты. Нужно также учитывать и некоторые особенностями мультимасштабных веб-карт, нехарактерных для карт аналоговых. Во-первых, веб-карты представляют собой набор небольших изображений или тайлов. Поскольку в случае Спутник/Карт тайлы растровые, то все объекты и подписи на них будут статичными, их положение не будет меняться по мере прокрутки карты, и если какое-то название вытеснено, оно не появится, сколько бы мы по карте не перемещались. И, во-вторых, где будут использовать веб-карты: на десктопе или в мобильном приложении? Экран мобильного телефона имеет небольшой охват, что позволяет с помощью нескольких иконок и удачно подобранных заливок выделить главные объекты и создать красивую картинку. Но пользователь мобильного приложения может и не подозревать, что один и тот же стиль, хорошо работающий в городе на небольшом экране, в сельской местности или на большом экране будет не читаемым, в то время как пользователь карт на ПК, где в основном и используются Спутник/Карты, обязательно это увидит.
Поэтому цель, которую мы ставим перед собой, – это добиться удобного, корректного, однозначного отображения действительности на экране вне зависимости от того, смотрим ли мы на страну, столицу государства или удалённую деревню.
Изначально при разработке стиля карт «Спутника» нам хотелось показать максимально допустимое количество объектов на местности для каждого масштаба (как это реализовано в топографических и научно-справочных картах). Однако со временем в процессе модификации стиля мы подвергали карту все большей генерализации (обобщению), объединяя классификации и оставляя только то, что считали наиболее важным. Одновременно мы работали с цветом полигональных и линейных объектов, которые стали более контрастными, что также повысило читаемость карты. И специально для картостиля «Спутника» мы разработали систему условных знаков. Про эти три аспекта мы и хотим вам рассказать. Поехали!
Про генерализацию
При генерализации объектов для того или иного уровня масштабирования важно понять, на чем сделать акцент, что является главным для каждого из них. Для начала необходимо определить, какой пространственный охват соответствует каждому масштабному уровню. Это поможет удалить лишнее и сконцентрировать внимание на главном.
| Масштабный уровень | Масштаб | Охват |
|---|---|---|
| 3 | 1:73 957 194 | весь мир |
| 4 | 1:36 978 597 | континент |
| 5 — 6 | 1:18 489 298 — 1:9 244 649 | страны |
| 7 — 8 | 1:4 622 325 — 1:2 311 162 | административные единицы 1 порядка |
| 9 — 10 | 1:1 155 581 — 1:577 791 | административные единицы 2 порядка |
| 11 | 1:288 895 | крупный город |
| 12 | 1:144 448 | городской округ |
| 13 — 15 | 1:72 224 — 1:18 056 | районы города |
| 16 — 17 | 1:9 028 — 1:4 514 | кварталы |
| 18 | 1:2 257 | двор |
| 19 | 1:1 128 | дом |
Стиль Спутник/Карт состоит из 2 больших блоков: для масштабных уровней 3 – 8 (так называемый «Стиль на мир») и 9 – 19 («Основной стиль»). Эти стили разрабатываются отдельно, поскольку в первом случае мы используем обобщенные векторные данные Natural Earth и растровую подложку Globcover, а во втором – данные OpenStreetMap (OSM). На масштабных уровнях 7 -8 происходит некоторое смешение источников, поскольку эти масштабы переходные. Если говорить о художественных средствах и способах отображения, то последнее обновление стиля в Спутник/Картах относится именно к «Основному стилю». «Стиль на мир» будет обновлён позже и заслуживает отдельного рассказа. При этом для обоих стилей были разработаны свои принципы генерализации.
Минимальный масштабный уровень на Спутник/Карты – 3, на котором пользователь видит крупнейшие страны. Для всех государств важно показать столицы, поэтому они появляются на 5 масштабном уровне, а на 6 — крупнейшие города.
На 7-8 уровнях масштабирования главную роль начинают играть дороги, так как на этом масштабе важнее акцентировать внимание не столько на регионах и находящихся в них населённых пунктах, сколько на связях между ними. Точности данных Natural Earth, которые вместе с растровой подложкой Globcover мы используем на более мелких масштабах, для этого уже недостаточно, поэтому, начиная с 7 уровня масштабирования, добавляются данные из OSM, в первую очередь для дорог и границ государств и регионов.
Начиная с 9 масштабного уровня, мы практически полностью переходим на данные OSM. На уровнях 9 — 12 пользователь хочет увидеть основные вылетные магистрали, посмотреть, что находится вокруг его города: аэропорты, населённые пункты, лесные массивы, найти свой район в городе, крупнейшие жилые и промышленные кварталы. Эти масштабные уровни очень обобщены. На 11 уровне сначала показываются только вокзалы и самые крупные парки, затем появляются крупные железнодорожные станции и некоторые POI (points of interest), относящиеся уже не к транспорту, а к достопримечательностям – монастыри, площади, парки, крепости. Таким образом, мы предлагаем пользователю места, где можно погулять в городе, посмотреть самое интересное и оценить, как далеко находятся эти объекты от его текущего местоположения, центра города и друг от друга.
С укрупнением масштаба внимание пользователя смещается от района к улице, а затем к дому. 13 и 14 масштабные уровни тоже достаточно обобщены, новых POI появляется немного. За счет этого выделяются крупные улицы, объекты транспорта, бензоколонки, появляется метро, хорошо виден тип землепользования – жилая зона, промзоны, зеленые зоны, территории больниц, образовательных учреждений, спортивных центров. Начиная с 15 уровня масштабирования мы показываем на карте отдельные дома, которые к этому моменту уже хочется увидеть пользователю. Но POI на этом уровне по-прежнему немного (чтобы не перегружать карту излишними деталями). Но крупнейшие отели, театры, торговые центры уже видны, что помогает пользователю сориентироваться в пределах района. На следующем масштабном уровне пространственный охват сужается до квартала, а акцент окончательно смещается на дома, появляются их номера, автобусные остановки и новые POI.
На 17 масштабном уровне пользователю интересно увидеть ближайшие объекты инфраструктуры. И мы можем их показать, поскольку с укрупнением масштаба на карте становится больше места для новых POI. Появляются рестораны и кафе, пока лишь только в виде значков (подписи будут только на следующем, 18 уровне). Подписываются автобусные остановки, объекты религии, банки. А на максимальном, 19 уровне масштабирования можно видеть и совсем небольшие объекты – деревья, урны, скамейки, зебры, лежачие полицейские и др.
Про типы землепользования (http://wiki.openstreetmap.org/wiki/RU:Key:landuse)
Для улучшения читаемости мы отказались от некоторых типов кварталов, например, объединили коммерческие и жилые кварталы и стали показывать их одним цветом. В то же время здания торговых центров сохранили «коммерческую» заливку и хорошо выделяются на карте. Отдельными цветами мы показали промзоны, образовательные кампусы, территории больниц, спортивных комплексов, замков и крепостей, храмов и монастырей. Здания, которые находятся на территории этих кварталов, раскрашиваются в соответствующий цвет. По сравнению с предыдущими версиями стиля, здания на 15-16 уровнях масштабирования остаются плоскими, на 17 появляется небольшой объем, а на 18-19 размер зависит от этажности или от высоты.
Так на общей схеме выглядят цвета типов землепользования, которые мы используем в стиле Спутник/Карт (основа для схемы была взята здесь).
А вот основные цвета в сравнении с другими картами на двух уровнях масштабирования – 12 (охват – городской округ) и 15 (когда появляются здания и акцент смещается на район города). В шаблон добавлены паттерны, занимающие наибольшую площадь на каждом из указанных выше масштабов (размеры паттернов выбраны произвольно). Здесь и далее мы сравниваем и те карты, для которых используются данные OSM (Спутник/Карты, OpenStreetMap, MAPS.ME, Mapbox Streets) и те, для которых используются другие источники (Яндекс.Карты, Google Maps, 2GIS, HERE). В данном случае это корректно, поскольку мы хотим сравнить именно стиль, а не сами данные. Сначала рассмотрим шаблоны для 12 уровня масштабирования:
| 1.Спутник/Карты | 2. 2GIS |
|---|---|
 |
 |
| 3. Google Maps | 4. Яндекс.Карты: |
|---|---|
 |
 |
| 5.OSM | 6. HERE |
|---|---|
 |
 |
| 7. MAPS.ME | 8. Mapbox Streets |
|---|---|
 |
 |
Видно, что в целом оттенки схожи – вода – голубая, растительность – зеленая, для отображения же типов землепользования используются несколько разные подходы. На некоторых картах различные типы землепользования показываются одним цветом: у MAPS.ME – это один цвет на все 4 типа, у Google Maps — на 3 типа (кроме собственно земли –подложки). В стиле Mapbox Streets используются разные оттенки, но очень близкие друг к другу. Принципиально другой подход используется на карте OSM, когда каждому типу землепользования соответствует свой уникальный цвет, что также обеспечивает этому стилю высокую узнаваемость. Стоит отметить, что часто один и тот же цвет используется для отображения подложки (земли) и сельскохозяйственных территорий, которые не выделяются в отдельный тип землепользования (Яндекс.Карты, HERE, 2GIS). На Спутник/Картах мы постарались объединить оба подхода – нам хотелось показать все типы землепользования и в тоже время сделать так, чтобы карта не выглядела пёстрой. Для сельскохозяйственных земель мы даже использовали специальный паттерн.
Теперь укрупним масштаб и сравним цвета, которые используются для выделения городских кварталов:
| 1.Спутник/Карты | 2. 2GIS |
|---|---|
 |
 |
| 3. Google Maps | 4. Яндекс.Карты: |
|---|---|
 |
 |
| 5.OSM | 6. HERE |
|---|---|
 |
 |
| 7. MAPS.ME | 8. Mapbox Streets |
|---|---|
 |
 |
На всех картах отдельным цветом показываются здания, которые в большинстве случаев темнее жилой застройки. 2GIS, Google Maps и HERE для отображения домов используют более светлые тона. Чаще всего отдельным цветом (оттенками серого) на всех картах выделяется промзона (кроме Google Maps и Mapbox Streets). Как и на 12 масштабном уровне, на более крупном масштабе можно выделить те стили, в которых каждый тип землепользования показывается своим цветом, и те, в которых эти типы объединены. На Яндекс.Картах большинство типов землепользования показывается так же, как жилая застройка, — хорошо узнаваемым песочным цветом, Google Maps – серым, Mapbox Streets – светло-коричневым. На картах 2GIS жилая зона выделяется отдельным цветом, но прочие типы землепользования закрашиваются одинаково. Максимальное количество цветов для отображения выделенных типов землепользования используется на OSM, HERE и Спутник/Картах. При этом карта не выглядит пестрой, так как полигоны окрашиваются в неяркие цвета, а здания, расположенные внутри различных типов землепользования, окрашиваются в соответствующие тона и не контрастируют на их фоне.
Про дороги
Чтобы улучшить читаемость карты, все дороги теперь показываются тремя цветами (а не пятью, как раньше): motorway (автомагистрали) и trunk (дороги федерального значения и транзитные трассы) – оранжевым, primary (автодороги регионального значения и основные улицы города) – желтым, secondary (автодороги межмуниципального значения и основные улицы городских районов) и прочие – белым.
Чтобы сделать сравнение более наглядным, мы подготовили шаблон, на котором хорошо видно, как изменился цвет дорог и уменьшилось количество отображаемых категорий (слева – новый стиль Спутник/Карт, справа – старый).
Созданию этого шаблона предшествовала предварительная работа:
Конечно же, для других карт нам также захотелось сделать такие паттерны. Они соответствуют 15 уровню масштабирования, когда рисуются все дороги, даже небольшие. Заливка шаблона соответствует цвету, которым показывается жилая зона на каждой из карт.
| 1.OSM | 2. HERE |
|---|---|
 |
 |
| 3. Google Maps | 4. Яндекс.Карты |
|---|---|
 |
 |
| 5.2GIS | 6. MAPS.ME |
|---|---|
 |
 |
Отдельно стоит MapBox, который для своего стиля Streets использует белую заливку дорог:
Видно, что для большинства карт характерно использование 3-х градаций, доминирование оранжевых тонов в обозначении главных дорог и белого цвета для второстепенных. Исключением являются OpenStreetMap и HERE, которые используют большее количество градаций (5 и 4 соответственно) и оттенки розового цвета для обозначения главных дорог.
Про значки
Значки для Спутник/Карт были разработаны в пиксельной графике. Это позволило привязать их к пиксельной решетке, чтобы вне зависимости от уровня масштабирования и расположения внутри растрового тайла, значок всегда оставался четким и не расплывался. Значки социальной направленности мы показываем коричневым цветом, досуг и прочие — серым. Также мы выделяем такие классы значков, как транспорт (темно-серый цвет), спорт (синий) и природные объекты, которые обозначаются разными цветами: парки – зеленым, водопады – голубым и т.д. Коричневые значки появляются раньше, начиная с 11 масштабного уровня. В свете веяний последнего времени мы также поместили наши значки на полупрозрачные плашки, хотя довольно долго «держались» и показывали их без какой-либо подложки, как на топокартах.
 |
 |
|---|
 |
 |
|---|
Возьмем 5 категорий POI (кафе, музей, банк, остановка автобуса и станция метро) и посмотрим, как они отображаются на разных картах:
| Кафе | Музей | Банк | Автобусная остановка |
Метро | |
|---|---|---|---|---|---|
| Спутник/Карты |  |
 |
 |
 |
 |
| Google Maps |  |
 |
 |
 |
 |
| Яндекс.Карты |  |
 |
 |
 |
 |
| 2GIS |  |
 |
нет |  |
 |
| MAPS.ME |  |
 |
 |
 |
 |
| OpenStreetMap |  |
 |
 |
 |
 |
| HERE |  |
 |
 |
 |
 |
| Mapbox | нет |  |
нет | нет |  |
Для сравнения был выбран 18 масштабный уровень, поскольку это наиболее крупный масштаб, который встречается на всех картах. Сразу отметим, что стиль Mapbox Streets существенно отличается, поскольку он не ориентирован на показ POI. Что же касается остальных, то в основном все наборы значков отвечают похожим требованиям и органично вписываются в свой стиль. Кроме OSM, во всех прочих стилях преимущественно используются значки на плашках. Некоторые из них одноцветные и прозрачные (Спутник/Карты, Яндекс.Карты), другие даются без прозрачности и различными цветами (MAPS.ME, HERE). Также на всех картах в отдельную категорию выделяются значки для транспорта, которые показываются или на плашке другой формы, цвета или вовсе без нее. Иногда отсутствуют некоторые категории, например на картах 2GIS нет значка для банков, а Яндекс.Карты не дифференцирует кафе и рестораны, которые показываются одним значком, но в целом семантические различия незначительны и не влияют на восприятие того или иного набора значков. Некоторые POI, например автобусные остановки на Яндекс.Картах, Google Maps и 2GIS даются без подписи, но она появляется по клику (Яндекс.Карты) или при наведении (Google Maps, 2GIS).
Про метро
Про значки метро расскажем отдельно. При разработке стиля карты всегда хочется сочетать информативность и эстетическую привлекательность: правильно найденный баланс позволит сделать карту максимально удобной в использовании. И конечно хорошую карту отличает внимание к деталям. Желание сделать нашу карту именно такой и привело к идее создания кастомных значков для различных метрополитенов мира.
Мы заменили обычные черно-белые значки с буквой «М» традиционной символикой местных метрополитенов для более чем трех десятков городов по всему миру. Были охвачены практически все метрополитены России и стран постсоветского пространства, а также некоторые подземки и системы пригородных поездов Европы, Азии, Америки и даже Австралии. Причем, это не только столицы или крупные города, например, метро (а также RER – система скоростного пригородного транспорта) Парижа, метро Хельсинки, Минска, Гонконга или Сиднея, но и некоторые небольшие метрополитены, такие как метро итальянского города Катанья.
Для метрополитенов городов России и постсоветского пространства мы сделали векторные линии, которые находятся в свободном доступе.
Наиболее интересны случаи, когда одна станция может относиться одновременно к надземному и подземному транспорту, либо когда на ней останавливаются поезда нескольких линий. Например, в Лондоне помимо подземки (London Underground) мы показали специальными значками Доклендское легкое метро (DLR), а также станции Национальных железных дорог (National Rail), отдельно обозначив остановки Лондонской «надземки» (London Overground). Кроме этого мы сделали несколько вариантов комбинированных значков для всех случаев совместного использования станций.
Мы и дальше планируем рисовать значки для метрополитенов мира, тем более, что база ОСМ постоянно пополняется. В то же время, если использовать специальный значок, то станции приходится «выгребать» по управляющей компании, например — ГУП «Московский метрополитен», или общему названию сети, например — London Underground, которым соответствуют теги соответственно operator= или network=. И тут нередки ситуации, когда эти теги проставлены не единообразно или их вовсе нет. В таком случае мы проставляем их вручную, как это было сделано, например, для сети скоростного транспорта Нью-Йорка, метро Мадрида, Стокгольма и других.
Что еще интересного?
Что касается названий географических объектов и их подписей на карте, которые мы стараемся показывать, в первую очередь, для русскоязычного пользователя, т.е. на русском языке. На 3 по 6 уровнях масштабирования включительно все подписи географических объектов даются на русском языке. Начиная же с 7 уровня, объекты могут подписываться на одном или на двух языках, и тут применяется несколько подходов:
— в странах с кириллическим алфавитом названия даются в этом написании и не дублируются на других языках;
— в странах с некириллическим алфавитом при наличии русского перевода сначала дается русское, а затем название на местном языке (или до 9 масштабного уровня для крупных городов – на английском, поскольку в этом случае названия берутся из базы Natural Earth, в которой несколько другие принципы наименования, чем в базе OSM);
— если русского аналога нет, наряду с местным названием, например, для стран с иероглифическим (Япония, Корея) или вязевым типом письма (Грузия), мы даем английскую версию. Если же нет и английского аналога, то название подписывается только на местном языке.
Вся эта многоуровневая структура позволяет сделать максимально возможную выборку названий на русском или на английском языках по всему миру. Кроме того, если название дороги в любом городе помимо местного языка продублировано на русском или английском языке, дорога на карте подписывается оригиналом и переводом. Подобный принцип применяется также для подписей объектов здравоохранения, образования и культуры, а также зеленых зон.
Еще одним направлением нашей работы является отображение на карте объектов безбарьерной среды для людей с ограниченными возможностями. К таким объектам относятся лестницы, пандусы, перила, а также пешеходные переходы. И нам приятно, что явно прослеживается позитивная тенденция в развитии картографирования таких объектов. Помимо этого, мы выделяем на картах общественные туалеты, информационные пункты. Особое внимание уделяем зеленым зонам в городах – паркам, усадьбам, местам для пикника, а также особоохраняемым природным территориям.
Поскольку место на карте ограничено, мы стараемся показывать объекты не только по их значимости, но и в зависимости от сезона или отдельных событий. Так, зимой мы актуализируем данные и на более высоких уровнях масштабирования показываем шиномонтажи, горнолыжные центры и курорты, катки и площадки для зимних видов спорта, а также отрисовываем лыжные трассы, которые часто летом показываются как пешеходные или велосипедные дорожки. С апреля по ноябрь мы акцентируем внимание пользователя на таких объектах как велопарковки, пункты проката велосипедов и лодок, пляжи, открытые бассейны. К Ночи музеев мы актуализировали информацию и добавили в ОСМ данные о множестве интересных объектов в Москве и Санкт-Петербурге.
Мы также стремимся привлекать пользователей к участию в картографических встречах, которые проводит Спутник. Специально для них мы подготавливаем «пирог», то есть распечатанные обходные листы карты, выполненные в специальном черно-белом картостиле, с участками для картографирования. Мы всегда открыты для отзывов со стороны пользователей и публикуем информацию об основных изменениях в стиле в русскоязычной ветке форума сообщества OpenStreetMap.
Автор: Ростелеком
