Файл стиля состоит из правил, которые применяются к каждому объекту сверху-вниз.
Например стиль:
node[natural=tree] {
icon-image: "tree.svg";
}отобразит картинку tree.svg для точек у которых тег natural имеет значение tree.
Каждое правило в стиле состоит из двух частей. Фильтра node[natural=tree] и параметров прорисовки icon-image: "tree.svg";. Фильтр выбирает к каким объектам надо применить параметры.
Правила могут быть вложенными и устанавливать параметры на каждом из уровней.
|z16- {
icon-scale: 0.50;
icon-tint: @color_icon_tint;
[amenity=bicycle_parking] {
icon-image: "bike_parking.svg";
}
[amenity=bicycle_rental] {
icon-image: "bike_rental.svg";
}
[amenity=bicycle_repair_station] {
icon-image: "bike_service.svg";
}
}Вложенные правила делают стиль лаконичным, с четко видной структурой. Так общие параметры можно установить заранее и не копировать по нескольку раз.
Эта документация описывает стиль карты, используемый в приложении Guru Maps. Изначально он был похож на MapCSS, но по мере разработки приложения и усложнения стиля было решено добавить в него некоторые уникальные черты. Была добавлена вложенность правил, команды препроцессора для подстановки и условий, добавлены новые функций для вычисляемых операций. В то же время часть параметров прорисовки и функций из спецификации MapCSS не была реализована.
Стиль и иконки, используемые в Guru Maps, вы можете найти в публичном репозитории https://github.com/GuruMaps/MapStyle.
Рассмотрим сложный фильтр:
node,area|z14-[boundary=forest_compartment][ref]Он состоит из:
- фильтра по типу
node,area. Он может бытьnodeдля точек,lineдля линий,areaдля полигонов. Если надо указать несколько типов они разделяются запятой. Так же можно использовать*, если тип не важен. - фильтра масштаба
z14-. Он указывает для каких масштабов должно срабатывать правило. Может быть только минимальным масштабомz8-, или интерваломz3-9. В таком случае правило будет применено для на масштабах с 3-го по 8 включительно. - фильтра параметров
[boundary=forest_compartment][ref]. Такой фильтр оставит только объекты у которых тегboundaryимеет значениеforest_compartment, а так же установлено любое значение для тегаref.Чтобы оставить объекты у которых нет значения тегаrefможно написать[!ref].
Несколько фильтров можно перечислить через запятую. Например:
node,area|z14-[boundary=forest_compartment][ref],
node,area|z14-[boundary=forestry_compartment][ref]Общие параметры можно вынести на отдельный уровень:
node,area|z14-[ref] {
[boundary=forest_compartment],
[boundary=forestry_compartment] {
}
}Иногда бывает необходимо объединить несколько правил в группу. Она начинается скобкой ( и заканчивается скобкой ). Группа объединит несколько фильтров и после группы не обязательно начинать блок с правилами.
node,area|z14-[ref](
[boundary=forest_compartment],
[boundary=forestry_compartment]) {
}
}Препроцессор подготавливает стиль к парсингу. Подставляет общие значения, включает или выключает какие-то блоки в зависимости от настроек.
Вставляет содержимое указанного файла.
@import "polygons.mapcss";Вставляет значение макроса, во все места где он использован.
// Define color using
@color_ground: #EAE3D3;
// then use it as
canvas {
fill-color: @color_ground;
}Проверяет параметр и включает или исключает блок из стиля:
@if Theme == Dark
@import "colors_dark.mapcss";
@else // Default colors
@import "colors.mapcss";
@endifGuru Maps использует следующие параметры препроцессора:
- Theme {Light, Dark} - текущая тема,
- Style {Default, Outdoor} - текущий стиль карты,
- SubStyle {Car, Hike, Bike}:
- Car используется для навигации на машине,
- Hike и Bike для велосипедного и пешеходного стилей соответственно.
Содержит блок, который надо выполнить если условие ложно.
Иногда, нужно проверить несколько вариантов условия. Для этого используется блок else if.
Закрывает блок текущего условия.
Параметры управляют отображением объектов на карте. Guru Maps поддерживает следующий набор параметров:
Толщина линий может быть задана в пикселях 1px, поинтах 2pt, метрах 3m или вычислена с помощью выражения eval( zlinear( 13, 1px,1pt,max(2pt, 4m) ) );. О выражениях, читайте в отдельной секции.
Цвет может быть задан следующими форматами: #RGB, #RRGGBB, #RRGGBBAA или константой цвета из списка CSS.
Текстом считается любая последовательность символов между одиночными или двойными кавычками.
'string'
"another string"Номер слоя нужен для разделения разных уровней на карте.
// for any object with tag 'layer', set it's 'layer' property, to the value of 'layer' tag
*|z9-[layer]
{
layer: eval(tag(layer));
}z-index устанавливает порядок прорисовки объектов одного типа внутри одного слоя.
area|z10-[natural=wood]
{
z-index: -3;
fill-color: @color_wood;
}
area[natural=oceanwater]
{
z-index: -2;
fill-color: @color_water;
}Цвет заливки полигона
area|z5-[natural=water]
{
fill-color: @color_water;
}Картинка заливки
// fill image of military area desplayed on top of the other objects
area|z11- {
[landuse=military],
[military=danger_area] {
z-index: 2;
fill-image:"forbiddenArea.png";
}
}Цвет и толщина обводки полигона
area|z15-[building]
{
z-index: 3;
width: 1px;
color: @color_landuse_residential_stroke;
}Цвет и толщина линии
line|z13-[natural=tree_row]
{
width: 3pt;
color: @color_wood;
z-index: -10;
}Цвет и толщина обводки линии
line|z8-[highway=motorway],
line|z11-[highway=motorway_link] {
color: @color_motorway;
casing-color: @color_motorway_casing;
casing-width: 0.5pt;
}Указывает длины закрашенных и пустых участков. Сумма цифр должна быть равна степени двойки. Величина цифры - это длинна участка линии в поинтах.
line|z15-[highway=cycleway] {
dashes: 2,2,2,2;
dashes-color: @color_cycleway_dashes;
}Цвет и толщина пунктира
line|z15-[highway=steps] {
dashes-color: @color_footway_dashes;
dashes-width: eval( zlinear( 16, 3pt, 4pt ) );
}Форма краев линий. Возможные значения: none, square, round.
Форма соединения линий. Возможные значения round, miter, bevel, auto.
Текст, который будет написан рядом с точкой, в центре линии или в центре полигона.
node,area|z2-8[place=country]
{
text: eval(locTag('name'));
// other params skipped
}Толщина текста. Возможные значения: bolder, bold, normal, light, ligther.
node,area|z9-[place=town],
node,area|z10-[place=village],
node,area|z12-[place=hamlet]
{
font-weight:light;
font-size:11;
font-stroke-width:2px;
font-stroke-color: @color_label_stroke;
}Размер шрифта.
Толщина и цвет обводки текста.
Цвет текста
node,area|z2-8[place=country]
{
text: eval(locTag('name'));
text-color: @color_name_text;
text-priority: 10;
// other tags skipped
}Когда много текста находится рядом, приоритет текста позволяет указать какой текст надо рисовать в первую очередь.
Позволяет разрешить отображение текста с наложением. Несколько надписей одна поверх другой.
Указывает, что этому тексту надо в 2 раза больше свободного места вокруг. Используется для названий населенных пунктов, чтобы они не заслоняли всю карту.
Имя картинки которую надо показать в центре полигона или в точке.
node,area|z17-[amenity=library] {
icon-image: "library.svg";
icon-scale: 0.37;
icon-tint: @color_icon_tint;
}Масштаб картинки позволяет сделать картинку больше или меньше ее изначального размера.
Тинт позволяет перекрасить картинку в другой цвет. Цвета картинки меняются следующим образом. #FFF белый цвет остается белым, #ССС - станет осветленным tint-color, #888 - станет идентичным цвету в tint-color, #444 - затемненный tint-color и #000 черный останется черным. На всех промежутках цвет будет плавно меняться между указанными цветами.
Позволяет сдвинуть картинку относительно точки привязки. По умолчанию центр картинки совпадает с точкой на карте, для которой картинка была показана. icon-offset-y: 0; позволяет показать пин на карте иголкой в точке, для которой он показан. Используются значения от 0 до 1. Где 0 это низ для icon-offset-y и левая сторона для icon-offset-x, а 1 - это верх и правая сторона соответственно.
Разрешает наложение картинок одна на одну.
details-text и details-description используются для установки имени и описания у GeoJSON объектов. Текст установленный в details-text будет показн как имя, а текст установленный в details-description будет показан как описание. Если details-text или details-description не заполнен, то нажатие по таким объектам не обрабатывается. В этих параметрых можно использовать выражения.
* {
details-text: eval(tag('name'));
details-description: eval(tag('description'));
}Не только фильтры, но и параметры объекта могут зависеть от внешних факторов, вычисляться по формуле или изменяться в зависимости от масштаба.
Если значение параметра должно быть вычислено, оно всегда начинается с функции eval().
Внутри выражения могут быть использованы следующие функции:
Возвращает минимальное или максимальное значение из параметров. Число параметров не ограничено.
Возвращает первое не null значение из параметров. Число параметров не ограничено.
Возвращает значение тега, указанного в параметре или null, если значения нет.
Возвращает локализованное значения тега в зависимости от языковых настроек пользователя. Например если порядок порядок языков английский, русский, язык региона. Для locTag(name) будут проверены значения тегов name:en, name:ru, name и использованно первое найденное значение. Поддерживаемые языки: be, cs, da, de, en, es, fr, it, ja, ko, nl, pl, ru, sv, uk, zh. Перечисленные языки могут быть использованы в locTag. Другие языки должны быть написаны явно с помощью tag().
Первый параметр содержит логическое выражение, второй будет возвращен, если выражение истинно, третий, если выражение ложно.
// Если уставновлен addr:housenumber,
// присоединим к нему следующее условие
text: eval( cond( tag('addr:housenumber'),
tag('addr:housenumber') . cond( any( locTag('name'), tag('addr:housename') ),
// Если установлен тег name или addr:housename добавим его между скобок
' (' . any( locTag('name'), tag('addr:housename') ) . ')',
// иначе ничего не будем добавлять
''),
// Если addr:housenumber не установлен,
// просто используем name или addr:housename
any( locTag('name'), tag('addr:housename') ) ) );Переводит значение в булевый тип. Если нет значения или оно равно 0, No, Off, False без учета регистра - функция вернет false. В остальных случаях true.
Плавно меняет значение по мере изменения масштаба. Первый параметр - начальный уровень масштаба. Далее любое число значений для всех масштабов начиная с начального.
line|z13-[highway=residential]
{
width: eval( zlinear( 13, 1px, 1pt, max(2pt, 4m) ) );
color: @color_small_road;
linecap: round;
}В этом примере толщина дороги на 13 зуме 1 пиксель, на 14 зуме 1 поинт, на 15+ будет использована большая из толщин 2 поинта или 4 метра.
Число, переданное в эту функцию, считается в метрах.
line|z12-[highway=tertiary]
{
width: eval( zlinear( 12, 1px, 1pt, 1pt, max(3pt, metric(any(tag(lanes),2)*2)) ));
}В этом примере число полос умножается на 2 - результат умножения считается расстоянием в метрах. max(3pt, metric()) вернет большее значение, ширину в метрах или в поинтах.
В выражениях могут быть использованы следующие математические операторы: +, -, *, \, оператор слияния строк - ., операторы сравнения < - меньше,> - больше, == - точное равенство, ~= - наличие подстроки в строке.