Перайсці да асноўнага змесціва

Стыль карты

Файл стылю 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:ru і 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()) вяртае большае з двух значэнняў: шырыню ў метрах або пунктах.

Аператары выразаў​

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