Przejdź do głównej zawartości

Styl mapy

Plik stylu MapCSS składa się z reguł stosowanych kolejno do każdego obiektu, od góry do dołu.

Przykładowy styl:

node[natural=tree] {
    icon-image: "tree.svg";
}

wyświetli obraz tree.svg dla punktów, w których znacznik natural ma wartość tree.

Każda reguła stylu składa się z dwóch części: filtra node[natural=tree] oraz parametrów rysowania icon-image: tree.svg;. Filtr określa, do których obiektów zostaną zastosowane parametry.

Reguły można zagnieżdżać i ustawiać parametry na każdym poziomie.

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

Zagnieżdżone reguły pozwalają zachować zwięzłą i uporządkowaną strukturę stylu. Wspólne parametry można zdefiniować raz, bez powtarzania ich w wielu blokach.

Ta dokumentacja opisuje odmianę MapCSS używaną w aplikacji Guru Maps. Niektóre oryginalne parametry rysowania nie zostały zaimplementowane, ale dostępne są makra preprocesora, zagnieżdżone reguły i nowe funkcje obliczeniowe. Styl używany w Guru Maps znajduje się w repozytorium.

Filtry​

Przyjrzyjmy się złożonemu filtrowi:

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

Składa się on z:

  1. Filtra typu node,area. Użyj node dla punktów, line dla linii, area dla wielokątów albo rozdziel kilka typów przecinkami. Użyj *, jeśli typ nie ma znaczenia.
  2. Filtra powiększenia z14-. Określa poziomy powiększenia, na których reguła ma zadziałać. Można podać tylko minimalny poziom, np. z8-, albo zakres, np. z3-9. W tym przypadku reguła działa na poziomach od 3 do 8 włącznie.
  3. Filtrów znaczników [boundary=forest_compartment][ref]. Pozostawiają one wyłącznie obiekty ze znacznikiem boundary o wartości forest_compartment i dowolną wartością znacznika ref. Aby wybrać obiekty bez znacznika ref, użyj filtra [!ref].

Kilka filtrów można rozdzielić przecinkami:

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

W tym przykładzie wspólne parametry można przenieść na wyższy poziom:

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

    }
}

Czasami trzeba połączyć kilka reguł w grupę. Umieść filtry w nawiasach ( i ), aby je zgrupować bez natychmiastowego rozpoczynania bloku reguły.

node,area|z14-[ref](
    [boundary=forest_compartment],
    [boundary=forestry_compartment]) {
    }
}

Makra preprocesora​

Preprocesor przygotowuje styl do analizy, podstawiając wartości oraz włączając lub wyłączając bloki zależnie od ustawień.

Makra podstawiania​

@import​

Wstawia zawartość wskazanego pliku:

@import "polygons.mapcss";

@{name}​

Wstawia wartość makra w każdym miejscu jego użycia:

// Define color using
@color_ground: #EAE3D3;

// then use it as
canvas
{
    fill-color: @color_ground;
}

Warunki​

@if​

Sprawdza parametr i dołącza blok do stylu albo go pomija:

@if Theme == Dark
    @import "colors_dark.mapcss";
@else // Default colors
    @import "colors.mapcss";
@endif

Guru Maps używa następujących parametrów preprocesora:

  • Theme {Light, Dark} — bieżący motyw aplikacji,
  • Style {Default, Outdoor} — bieżący styl mapy,
  • SubStyle {Car, Hike, Bike}
    • Car jest używany podczas jazdy samochodem,
    • Hike i Bike są używane odpowiednio podczas wędrówki i jazdy na rowerze.

@else​

Określa blok kodu wykonywany, gdy pierwszy warunek jest fałszywy.

@elif​

Zawiera warunek sprawdzany, jeśli wcześniejsze warunki nie zostały spełnione.

@endif​

Zamyka blok bieżącego warunku.

Parametry rysowania​

Te parametry określają sposób rysowania obiektów na mapie.

Wartości parametrów​

Szerokość​

Grubość linii, czyli width, można podać w pikselach 1px, punktach 2pt, metrach 3m albo obliczyć za pomocą wyrażenia, np. eval( zlinear( 13, 1px,1pt,max(2pt, 4m)) );. Więcej informacji znajduje się w sekcji o wyrażeniach.

Kolor​

Kolor można zapisać jako #RGB, #RRGGBB, #RRGGBBAA albo podać jego nazwę z listy kolorów CSS.

Tekst​

Każdy ciąg znaków między apostrofami lub cudzysłowami jest traktowany jako tekst.

'string'
"another string"

Parametry kolejności rysowania​

layer​

Numer warstwy służy do rozdzielania różnych poziomów na mapie.

// for any object with tag 'layer', set its 'layer' property to the value of the tag
*|z9-[layer] {
    layer: eval(tag(layer));
}

z-index​

z-index określa kolejność rysowania obiektów tego samego typu w obrębie warstwy.

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

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

Parametry wielokątów​

fill-color​

Kolor wypełnienia wielokąta.

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

fill-image​

Obraz wypełniający wielokąt.

// fill image of a military area displayed on top of other objects
area|z11- {
    [landuse=military],
    [military=danger_area] {
        z-index: 2;
        fill-image:"forbiddenArea.png";
    }
}

fill-image obsługuje osadzony styl z danymi base64.

// same as arrow.svg
fill-image: eval(data("PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI2IDNoMTBWMWw1IDMtNSAzVjVIMjZ6IiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii40Ii8+PC9zdmc+Cg=="))

color i width dla wielokąta​

Kolor i szerokość obrysu wielokąta.

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

Parametry linii​

color i width dla linii​

Kolor i szerokość linii.

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

casing-color i casing-width​

Kolor i szerokość obwódki linii, używane głównie dla dróg.

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

dashes​

Określa długości rysowanych i pustych odcinków. Suma liczb musi być potęgą liczby 2 (4, 8, 16, 32, 64 itd.). Każda liczba oznacza długość odcinka linii w punktach.

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

dashes-color i dashes-width​

Kolor i szerokość kresek używanych dla szlaków, ścieżek, schodów i granic.

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

linecap​

Kształt zakończeń linii. Dostępne wartości: none, square, round.

linejoin​

Kształt połączeń linii. Dostępne wartości: round, miter, bevel, auto.

Parametry tekstu​

text​

Tekst rysowany obok punktu albo wyśrodkowany na linii lub wielokącie.

node,area|z2-8[place=country] {
    text: eval(locTag('name'));
    // other params skipped
}

font-weight​

Grubość kroju pisma. Dostępne wartości: 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​

Rozmiar czcionki.

font-stroke-width i font-stroke-color​

Szerokość i kolor obrysu czcionki.

text-color​

Kolor tekstu.

node,area|z2-8[place=country] {
    text: eval(locTag('name'));
    text-color: @color_name_text;
    text-priority: 10;
    // other tags skipped
}

text-priority​

Gdy etykiety konkurują o miejsce, text-priority określa, który tekst pojawi się jako pierwszy.

text-allow-overlap​

Pozwala etykietom nakładać się na siebie, dzięki czemu kilka tekstów może zajmować ten sam obszar.

text-big-padding​

Rezerwuje dwukrotnie większy odstęp wokół tekstu. Używaj tego parametru dla dużych miejscowości (miast, przedmieść itd.), aby etykiety nie zasłaniały mapy.

icon-image​

Nazwa obrazu wyświetlanego w punkcie albo na środku wielokąta.

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

icon-image obsługuje osadzony styl z danymi base64.

// same as poi_circle_small.svg
icon-image: eval(data("PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNyA0QzcgNS42NTY4NSA1LjY1Njg1IDcgNCA3QzIuMzQzMTUgNyAxIDUuNjU2ODUgMSA0QzEgMi4zNDMxNSAyLjM0MzE1IDEgNCAxQzUuNjU2ODUgMSA3IDIuMzQzMTUgNyA0WiIgZmlsbD0iIzgwODA4MCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggNEM4IDYuMjA5MTQgNi4yMDkxNCA4IDQgOEMxLjc5MDg2IDggMCA2LjIwOTE0IDAgNEMwIDEuNzkwODYgMS43OTA4NiAwIDQgMEM2LjIwOTE0IDAgOCAxLjc5MDg2IDggNFpNNCA3QzUuNjU2ODUgNyA3IDUuNjU2ODUgNyA0QzcgMi4zNDMxNSA1LjY1Njg1IDEgNCAxQzIuMzQzMTUgMSAxIDIuMzQzMTUgMSA0QzEgNS42NTY4NSAyLjM0MzE1IDcgNCA3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="))

icon-scale​

Skaluje obraz tak, aby był większy lub mniejszy od oryginału.

icon-tint​

icon-tint zmienia kolor obrazu. #FFF pozostaje białe, #CCC przyjmuje jaśniejszy odcień wybranego koloru, #888 odpowiada kolorowi docelowemu, #444 staje się jego ciemniejszym odcieniem, a #000 pozostaje czarne. Między tymi punktami kolory przechodzą płynnie.

icon-offset-x i icon-offset-y​

Przesuwają obraz względem punktu zakotwiczenia. Domyślnie obraz jest wyśrodkowany na punkcie mapy. Na przykład icon-offset-y: 0; wyrównuje dolną krawędź ikony pinezki z punktem docelowym. Wartości mieszczą się w zakresie od 0 do 1, gdzie 0 oznacza dolną lub lewą krawędź, a 1 — górną lub prawą.

image-allow-overlap​

Pozwala ikonom nakładać się na siebie.

Parametry szczegółów​

Użyj details-text i details-description, aby ustawić nazwę i opis obiektów GeoJSON. Wartość details-text jest wyświetlana jako tytuł, a details-description jako opis. Jeśli obie wartości są puste, dotknięcia obiektu są ignorowane. W tych parametrach można używać wyrażeń.

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

Wyrażenia​

Filtry i parametry rysowania mogą zależeć od czynników zewnętrznych, być obliczane za pomocą wzorów albo zmieniać się wraz z poziomem powiększenia.

Obliczane wartości muszą zawsze rozpoczynać się od funkcji eval().

Wewnątrz można używać następujących funkcji:

min i max​

Zwracają najmniejszą albo największą wartość spośród parametrów. Liczba parametrów nie jest ograniczona.

any​

Zwraca pierwszą wartość parametrów różną od null. Można przekazać dowolną liczbę argumentów.

data​

Dekoduje ciąg base64. Może być używana przez icon-image i fill-image.

tag​

Zwraca wartość wskazanego znacznika albo null, jeśli znacznik nie istnieje.

locTag​

Zwraca zlokalizowaną wartość znacznika zgodnie z ustawieniami języka użytkownika. Jeśli preferowane języki to na przykład angielski, rosyjski i język ojczysty, locTag('name') sprawdza kolejno name:en, name:ru i name, a następnie używa pierwszej znalezionej wartości. Guru Maps obsługuje be, cs, da, de, en, es, fr, it, ja, ko, nl, pl, ru, sv, uk, zh. Dla tych języków używaj locTag(), a dla pozostałych wywołuj bezpośrednio tag().

cond​

Oblicza wyrażenie logiczne. Jeśli pierwszy argument jest prawdziwy, funkcja zwraca drugi argument; w przeciwnym razie zwraca trzeci.

// check addr:housenumber
    text: eval( cond( tag('addr:housenumber'),
    // if there is addr:housenumber, then concatenate next condition
        tag('addr:housenumber') . cond( any( locTag('name'), tag('addr:housename') ),
            // if there is name or addr:housename - put them between ()
            ' (' . any( locTag('name'), tag('addr:housename') ) . ')',
            // empty line otherwise
            ''),
    // if there is no housenumber just use any from name or addr:housename
    any( locTag('name'), tag('addr:housename') ) ) );

boolean​

Konwertuje wartość na typ logiczny. Jeśli wartość nie istnieje albo jest równa 0, No, Off lub False (bez rozróżniania wielkości liter), funkcja zwraca false; w przeciwnym razie zwraca true.

zlinear​

Płynnie zmienia wartość wraz ze zmianą powiększenia. Pierwszy parametr to początkowy poziom powiększenia, a po nim podawane są wartości dla kolejnych poziomów.

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

W tym przykładzie szerokość drogi wynosi 1 piksel na 13. poziomie powiększenia, 1 punkt na poziomie 14., a na poziomie 15. i wyższych — większą z wartości: 2 punkty lub 4 metry.

metric​

Przelicza parametr liczbowy na metry.

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

W tym przykładzie liczba pasów jest mnożona przez 2, co daje odległość w metrach. max(3pt, metric()) zwraca większą wartość: szerokość w metrach albo szerokość w punktach.

Operatory wyrażeń​

Wyrażenia obsługują operatory matematyczne +, -, *, /, operator łączenia ciągów ., a także operatory porównania <, >, == i ~= (dopasowanie podciągu).