Стиль карти

Файл стилю MapCSS складається з правил, які послідовно згори вниз застосовуються до кожного об’єкта.

Наприклад, стиль:

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";
    }
}

Вкладені правила роблять стиль коротшим і структурованішим: спільні параметри задаються один раз, а не повторюються в кожному блоці.

Ця документація описує діалект MapCSS, який використовує Guru Maps. Деякі параметри малювання з оригінального MapCSS не реалізовано, натомість доступні макроси препроцесора, вкладені правила й додаткові функції для обчислень. Стиль Guru Maps міститься в репозиторії.

Фільтри

Розгляньмо складний фільтр:

node,area|z14-[boundary=forest_compartment][ref]

Він складається з трьох частин:

1. Фільтр типу node,area. node позначає точки, line — лінії, area — полігони. Кілька типів розділяються комами, а * означає будь-який тип.
2. Фільтр масштабу z14-. Він задає рівні, на яких діє правило. Можна зазначити лише мінімальний рівень, наприклад z8-, або діапазон z3-9. В останньому випадку правило діє на рівнях від 3 до 8 включно.
3. Фільтри тегів [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

Вставляє вміст заданого файлу:

@import "polygons.mapcss";

@\{name\}

Вставляє значення макросу в місці його використання:

// Визначаємо колір
@color_ground: #EAE3D3;

// Потім використовуємо його так
canvas
{
    fill-color: @color_ground;
}

Умови

@if

Перевіряє параметр і додає або виключає блок зі стилю:

@if Theme == Dark
    @import "colors_dark.mapcss";
@else // Стандартні кольори
    @import "colors.mapcss";
@endif

Guru Maps передає препроцесору такі параметри:

• Theme {Light, Dark} — поточна тема застосунку;
• Style {Default, Outdoor} — поточний стиль карти;
• SubStyle {Car, Hike, Bike}:
  • Car — їзда автомобілем;
  • Hike і Bike — піші та велосипедні активності відповідно.

@else

Задає блок коду, який виконується, якщо перша умова хибна.

@elif

Містить наступну умову, яка перевіряється, якщо попередні не спрацювали.

@endif

Закриває поточний умовний блок.

Параметри малювання

Ці параметри визначають, як об’єкти виглядають на карті.

Значення параметрів

Ширина

Товщину лінії width можна задати в пікселях 1px, пунктах 2pt, метрах 3m або обчислити виразом, наприклад eval( zlinear( 13, 1px,1pt,max(2pt, 4m)) );. Докладніше дивіться в розділі про вирази.

Колір

Колір задається як #RGB, #RRGGBB, #RRGGBBAA або назвою з переліку кольорів CSS.

Текст

Будь-яка послідовність символів між одинарними або подвійними лапками вважається текстом:

'string'
"another string"

Параметри порядку малювання

layer

Номер шару розділяє різні рівні об’єктів на карті.

// Для кожного об’єкта з тегом 'layer' задаємо властивості 'layer' значення цього тегу
*|z9-[layer] {
    layer: eval(tag(layer));
}

z-index

z-index задає порядок малювання об’єктів одного типу в межах шару.

area|z10-[natural=wood] {
    z-index: -3;
    fill-color: @color_wood;
}

area[natural=oceanwater] {
    z-index: -2;
    fill-color: @color_water;
}

Параметри полігонів

fill-color

Колір заповнення полігона.

area|z5-[natural=water] {
    fill-color: @color_water;
}

fill-image

Зображення для заповнення полігона.

// Зображення заливки військової зони, яке відображається поверх інших об’єктів
area|z11- {
    [landuse=military],
    [military=danger_area] {
        z-index: 2;
        fill-image:"forbiddenArea.png";
    }
}

fill-image підтримує вбудований стиль із даними base64.

// Те саме, що arrow.svg
fill-image: eval(data("PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI2IDNoMTBWMWw1IDMtNSAzVjVIMjZ6IiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii40Ii8+PC9zdmc+Cg=="))

color і width для полігона

Колір і ширина межі полігона.

area|z15-[building] {
    z-index: 3;
    width: 1px;
    color: @color_landuse_residential_stroke;
}

Параметри ліній

color і width для лінії

Колір і ширина лінії.

line|z13-[natural=tree_row] {
    width: 3pt;
    color: @color_wood;
    z-index: -10;
}

casing-color і casing-width

Колір і ширина зовнішнього контуру лінії, найчастіше дороги.

line|z8-[highway=motorway],
line|z11-[highway=motorway_link] {
    color: @color_motorway;
    casing-color: @color_motorway_casing;
    casing-width: 0.5pt;
}

dashes

Задає довжини намальованих і порожніх відрізків. Сума чисел має бути степенем двійки: 4, 8, 16, 32, 64 і так далі. Кожне число — довжина відрізка в пунктах.

line|z15-[highway=cycleway] {
    dashes: 2,2,2,2;
    dashes-color: @color_cycleway_dashes;
}

dashes-color і dashes-width

Колір і ширина штрихів для стежок, доріжок, сходів та меж.

line|z15-[highway=steps] {
    dashes-color: @color_footway_dashes;
    dashes-width: eval( zlinear( 16, 3pt, 4pt ) );
}

linecap

Форма кінців лінії. Можливі значення: none, square, round.

linejoin

Форма з’єднань лінії. Можливі значення: round, miter, bevel, auto.

Параметри тексту

text

Текст біля точки або по центру лінії чи полігона.

node,area|z2-8[place=country] {
    text: eval(locTag('name'));
    // Інші параметри пропущено
}

font-weight

Товщина шрифту. Можливі значення: bolder, bold, normal, light, lighter.

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;
}

font-size

Розмір шрифту.

font-stroke-width і font-stroke-color

Ширина й колір обведення шрифту.

text-color

Колір тексту.

node,area|z2-8[place=country] {
    text: eval(locTag('name'));
    text-color: @color_name_text;
    text-priority: 10;
    // Інші теги пропущено
}

text-priority

Якщо написам бракує місця, text-priority визначає, який із них показати першим.

text-allow-overlap

Дає змогу написам перекриватися, щоб кілька текстів займали одну область.

text-big-padding

Залишає навколо тексту вдвічі більше вільного місця. Використовуйте для великих населених пунктів — міст, містечок, передмість і подібних об’єктів, — щоб написи не перекривали карту.

icon-image

Назва зображення, яке показується в точці або в центрі полігона.

node,area|z17-[amenity=library] {
    icon-image: "library.svg";
    icon-scale: 0.37;
    icon-tint: @color_icon_tint;
}

icon-image підтримує вбудований стиль із даними base64.

// Те саме, що poi_circle_small.svg
icon-image: eval(data("PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNyA0QzcgNS42NTY4NSA1LjY1Njg1IDcgNCA3QzIuMzQzMTUgNyAxIDUuNjU2ODUgMSA0QzEgMi4zNDMxNSAyLjM0MzE1IDEgNCAxQzUuNjU2ODUgMSA3IDIuMzQzMTUgNyA0WiIgZmlsbD0iIzgwODA4MCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggNEM4IDYuMjA5MTQgNi4yMDkxNCA4IDQgOEMxLjc5MDg2IDggMCA2LjIwOTE0IDAgNEMwIDEuNzkwODYgMS43OTA4NiAwIDQgMEM2LjIwOTE0IDAgOCAxLjc5MDg2IDggNFpNNCA3QzUuNjU2ODUgNyA3IDUuNjU2ODUgNyA0QzcgMi4zNDMxNSA1LjY1Njg1IDEgNCAxQzIuMzQzMTUgMSAxIDIuMzQzMTUgMSA0QzEgNS42NTY4NSAyLjM0MzE1IDcgNCA3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="))

icon-scale

Змінює розмір зображення відносно оригінального.

icon-tint

icon-tint перефарбовує зображення: #FFF залишається білим, #CCC стає світлішим відтінком заданого кольору, #888 збігається з ним, #444 стає темнішим, а #000 залишається чорним. Між цими точками кольори змішуються плавно.

icon-offset-x і icon-offset-y

Зсувають зображення відносно точки прив’язки. Типово центр зображення збігається з точкою на карті. Наприклад, icon-offset-y: 0; суміщає низ значка-шпильки з потрібною точкою. Значення лежать у межах від 0 до 1: 0 означає нижній або лівий край, 1 — верхній або правий.

image-allow-overlap

Дає змогу значкам перекриватися.

Параметри подробиць

details-text і details-description задають назву й опис об’єктів GeoJSON. Перший показується як заголовок, другий — як опис. Якщо обидва значення порожні, дотик до об’єкта ігнорується. У цих параметрах можна використовувати вирази.

* {
    details-text: eval(tag('name'));
    details-description: eval(tag('description'));
}

Вирази

Фільтри й параметри малювання можуть залежати від зовнішніх чинників, обчислюватися за формулами або змінюватися разом із масштабом.

Обчислене значення завжди має починатися з функції eval().

Усередині доступні такі функції.

min і max

Повертають найменше або найбільше значення серед необмеженої кількості параметрів.

any

Повертає перше значення, яке не дорівнює null. Кількість аргументів не обмежена.

data

Декодує рядок base64. Можна використовувати в icon-image і fill-image.

tag

Повертає значення заданого тегу або null, якщо його немає.

locTag

Повертає локалізоване значення тегу відповідно до мовних налаштувань користувача. Наприклад, якщо вибрано англійську, українську та місцеву мову, locTag('name') послідовно перевіряє name:en, name:uk і name, а потім використовує перше знайдене значення. Guru Maps підтримує be, cs, da, de, en, es, fr, it, ja, ko, nl, pl, ru, sv, uk, zh. Для цих мов використовуйте locTag(), для решти — явний виклик tag().

cond

Обчислює логічний вираз. Якщо перший аргумент істинний, повертає другий, інакше — третій.

// Перевіряємо addr:housenumber
    text: eval( cond( tag('addr:housenumber'),
    // Якщо є addr:housenumber, додаємо результат наступної умови
        tag('addr:housenumber') . cond( any( locTag('name'), tag('addr:housename') ),
            // Якщо є name або addr:housename, додаємо його в дужках
            ' (' . any( locTag('name'), tag('addr:housename') ) . ')',
            // Інакше використовуємо порожній рядок
            ''),
    // Якщо housenumber немає, використовуємо name або addr:housename
    any( locTag('name'), tag('addr:housename') ) ) );

boolean

Перетворює значення на логічне. Якщо значення немає або воно дорівнює 0, No, Off чи False без урахування регістру, функція повертає false; у всіх інших випадках — true.

zlinear

Плавно змінює значення разом із масштабом. Перший параметр — початковий рівень масштабу, далі йдуть значення для кожного наступного рівня.

line|z13-[highway=residential] {
    width: eval( zlinear( 13, 1px, 1pt, max(2pt, 4m) ) );
    color: @color_small_road;
    linecap: round;
}

У цьому прикладі ширина дороги дорівнює 1 пікселю на рівні 13, 1 пункту на рівні 14 і найбільшому з 2 пунктів або 4 метрів на рівні 15 і вище.

metric

Перетворює числовий параметр на метри.

line|z12-[highway=tertiary] {
    width: eval( zlinear( 12, 1px, 1pt, 1pt, max(3pt, metric(any(tag(lanes),2)*2)) ));
}

Кількість смуг у прикладі множиться на 2, що дає відстань у метрах. max(3pt, metric()) повертає більше з двох значень: ширину в метрах або пунктах.

Оператори виразів

Вирази підтримують математичні оператори +, -, *, /, оператор з’єднання рядків . та оператори порівняння <, >, ==, ~= для пошуку підрядка.