Zum Hauptinhalt springen

Kartenstil

Eine MapCSS-Stildatei besteht aus Regeln, die von oben nach unten auf jedes Objekt angewendet werden.

Dieser Stil zum Beispiel:

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

zeigt an Punkten, deren Tag natural den Wert tree besitzt, das Bild tree.svg an.

Jede Regel besteht aus zwei Teilen: dem Filter node[natural=tree] und den Darstellungsparametern icon-image: tree.svg;. Der Filter bestimmt, für welche Objekte die Parameter gelten.

Regeln können verschachtelt werden und auf jeder Ebene Parameter setzen.

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

Verschachtelte Regeln halten den Stil kurz und strukturiert: Gemeinsame Parameter werden einmal definiert und müssen nicht in mehreren Blöcken wiederholt werden.

Diese Dokumentation beschreibt den MapCSS-Dialekt von Guru Maps. Einige ursprüngliche Darstellungsparameter sind nicht implementiert; dafür stehen Präprozessor-Makros, verschachtelte Regeln und zusätzliche Funktionen für berechnete Ausdrücke zur Verfügung. Den in Guru Maps verwendeten Stil findest du im Repository.

Filter​

Betrachten wir einen komplexen Filter:

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

Er besteht aus:

  1. Dem Typfilter node,area: Verwende node für Punkte, line für Linien und area für Polygone. Mehrere Typen werden durch Kommas getrennt. Mit * spielt der Typ keine Rolle.
  2. Dem Zoomfilter z14-: Er legt die Zoomstufen fest, auf denen die Regel greift. Du kannst nur eine Mindeststufe wie z8- oder einen Bereich wie z3-9 angeben. Im zweiten Fall gilt die Regel für die Zoomstufen 3 bis einschließlich 8.
  3. Den Tagfiltern [boundary=forest_compartment][ref]: Sie behalten nur Objekte, deren Tag boundary den Wert forest_compartment und deren Tag ref einen beliebigen Wert besitzt. Mit [!ref] werden dagegen Objekte ohne Tag ref ausgewählt.

Mehrere Filter können durch Kommas getrennt werden:

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

Gemeinsame Parameter lassen sich auf eine höhere Ebene verschieben:

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

    }
}

Um mehrere Regeln zu gruppieren, ohne sofort einen Regelblock zu beginnen, umschließe die Filter mit Klammern:

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

Präprozessor-Makros​

Der Präprozessor bereitet den Stil für das Parsen vor. Er ersetzt Werte und aktiviert oder deaktiviert Blöcke abhängig von den Einstellungen.

Ersetzungsmakros​

@import​

Fügt den Inhalt einer Datei ein:

@import "polygons.mapcss";

@{name}​

Setzt an jeder Verwendungsstelle den Wert eines Makros ein:

// Farbe definieren
@color_ground: #EAE3D3;

// und anschließend verwenden
canvas
{
    fill-color: @color_ground;
}

Bedingungen​

@if​

Prüft einen Parameter und nimmt einen Block abhängig vom Ergebnis in den Stil auf oder schließt ihn aus:

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

Guru Maps stellt dem Präprozessor folgende Parameter bereit:

  • Theme {Light, Dark} – aktuelles App-Design,
  • Style {Default, Outdoor} – aktueller Kartenstil,
  • SubStyle {Car, Hike, Bike}
    • Car wird beim Autofahren verwendet,
    • Hike beim Wandern,
    • Bike beim Radfahren.

@else​

Definiert den Block, der ausgeführt wird, wenn die erste Bedingung falsch ist.

@elif​

Enthält eine weitere Bedingung für den Fall, dass vorherige Bedingungen nicht zutrafen.

@endif​

Schließt den aktuellen Bedingungsblock.

Darstellungsparameter​

Diese Parameter steuern, wie Objekte auf der Karte gezeichnet werden.

Parameterwerte​

Breite​

Eine Linienbreite kann in Pixeln (1px), Punkten (2pt) oder Metern (3m) angegeben oder mit einem Ausdruck berechnet werden, zum Beispiel eval( zlinear( 13, 1px,1pt,max(2pt, 4m)) );. Mehr dazu im Abschnitt Ausdrücke.

Farbe​

Farben werden als #RGB, #RRGGBB, #RRGGBBAA oder als benannte Farbe aus der CSS-Farbliste angegeben.

Text​

Eine Zeichenfolge zwischen einfachen oder doppelten Anführungszeichen gilt als Text:

'string'
"another string"

Parameter der Zeichenreihenfolge​

layer​

Die Ebenennummer trennt unterschiedliche Höhenebenen der Karte.

// Für jedes Objekt mit dem Tag 'layer' den Tagwert als Ebenennummer verwenden
*|z9-[layer] {
    layer: eval(tag(layer));
}

z-index​

z-index legt die Zeichenreihenfolge gleichartiger Objekte innerhalb einer Ebene fest.

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

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

Polygonparameter​

fill-color​

Füllfarbe eines Polygons.

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

fill-image​

Füllbild eines Polygons.

// Füllbild eines militärischen Gebiets über anderen Objekten
area|z11- {
    [landuse=military],
    [military=danger_area] {
        z-index: 2;
        fill-image:"forbiddenArea.png";
    }
}

fill-image unterstützt eingebettete Base64-Daten:

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

color und width für Polygone​

Farbe und Breite des Polygonrands.

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

Linienparameter​

color und width für Linien​

Farbe und Breite einer Linie.

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

casing-color und casing-width​

Farbe und Breite der äußeren Linienkontur, meist für Straßen verwendet.

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

dashes​

Legt die Längen gezeichneter und leerer Segmente fest. Die Summe der Zahlen muss eine Zweierpotenz ergeben, etwa 4, 8, 16, 32 oder 64. Jede Zahl bezeichnet die Länge eines Liniensegments in Punkten.

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

dashes-color und dashes-width​

Farbe und Breite der Striche, beispielsweise für Pfade, Treppen und Grenzen.

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

linecap​

Form der Linienenden. Mögliche Werte: none, square, round.

linejoin​

Form der Linienverbindungen. Mögliche Werte: round, miter, bevel, auto.

Textparameter​

text​

Text, der neben einem Punkt oder mittig auf einer Linie beziehungsweise einem Polygon gezeichnet wird.

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

font-weight​

Schriftgewicht. Mögliche Werte: 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​

Schriftgröße.

font-stroke-width und font-stroke-color​

Breite und Farbe der Schriftkontur.

text-color​

Textfarbe.

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

text-priority​

Wenn mehrere Beschriftungen um denselben Platz konkurrieren, bestimmt text-priority, welcher Text zuerst erscheint.

text-allow-overlap​

Erlaubt die Überlappung von Beschriftungen, sodass mehrere Texte denselben Bereich belegen können.

text-big-padding​

Reserviert doppelt so viel Abstand um den Text. Dies eignet sich für größere Siedlungen wie Städte und Vororte, damit Beschriftungen die Karte nicht überdecken.

icon-image​

Name des Bilds, das an einem Punkt oder in der Mitte eines Polygons angezeigt wird.

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

icon-image unterstützt eingebettete Base64-Daten:

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

icon-scale​

Skaliert das Bild gegenüber seiner Originalgröße.

icon-tint​

icon-tint färbt das Bild um. #FFF bleibt weiß, #CCC erhält eine hellere Variante der gewählten Farbe, #888 entspricht ihr, #444 wird dunkler und #000 bleibt schwarz. Dazwischen gehen die Farben weich ineinander über.

icon-offset-x und icon-offset-y​

Verschiebt das Bild relativ zu seinem Ankerpunkt. Standardmäßig ist das Bild über dem Kartenpunkt zentriert. icon-offset-y: 0; richtet beispielsweise die Unterkante einer Pin-Grafik am Zielpunkt aus. Die Werte reichen von 0 bis 1; 0 steht für die untere beziehungsweise linke Kante und 1 für die obere beziehungsweise rechte.

image-allow-overlap​

Erlaubt die Überlappung von Symbolen.

Detailparameter​

Mit details-text und details-description legst du Name und Beschreibung von GeoJSON-Objekten fest. details-text erscheint als Titel, details-description als Beschreibung. Sind beide Werte leer, werden Berührungen des Objekts ignoriert. Die Parameter unterstützen Ausdrücke.

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

Ausdrücke​

Filter und Darstellungsparameter können von äußeren Faktoren abhängen, durch Formeln berechnet werden oder sich mit der Zoomstufe ändern.

Berechnete Werte müssen immer mit der Funktion eval() beginnen. Darin sind folgende Funktionen verfügbar:

min und max​

Geben den kleinsten beziehungsweise größten Parameterwert zurück. Die Anzahl der Parameter ist nicht begrenzt.

any​

Gibt den ersten Parameterwert zurück, der nicht null ist. Die Anzahl der Argumente ist nicht begrenzt.

data​

Dekodiert eine Base64-Zeichenfolge und kann für icon-image und fill-image verwendet werden.

tag​

Gibt den Wert des angegebenen Tags zurück oder null, falls es fehlt.

locTag​

Gibt abhängig von den Spracheinstellungen des Benutzers einen lokalisierten Tagwert zurück. Sind beispielsweise Englisch, Russisch und die Landessprache bevorzugt, prüft locTag('name') nacheinander name:en, name:ru und name und verwendet den ersten Treffer. Guru Maps unterstützt be, cs, da, de, en, es, fr, it, ja, ko, nl, pl, ru, sv, uk, zh. Verwende für diese Sprachen locTag() und für andere Sprachen ausdrücklich tag().

cond​

Wertet einen logischen Ausdruck aus. Ist das erste Argument wahr, gibt die Funktion das zweite zurück, andernfalls das dritte.

// addr:housenumber prüfen
    text: eval( cond( tag('addr:housenumber'),
    // Bei vorhandener Hausnummer die nächste Bedingung anhängen
        tag('addr:housenumber') . cond( any( locTag('name'), tag('addr:housename') ),
            // Name oder addr:housename in Klammern setzen
            ' (' . any( locTag('name'), tag('addr:housename') ) . ')',
            // andernfalls leere Zeichenfolge
            ''),
    // Ohne Hausnummer name oder addr:housename verwenden
    any( locTag('name'), tag('addr:housename') ) ) );

boolean​

Wandelt einen Wert in einen booleschen Wert um. Fehlt er oder entspricht er ohne Beachtung der Großschreibung 0, No, Off oder False, gibt die Funktion false zurück, andernfalls true.

zlinear​

Ändert einen Wert mit der Zoomstufe gleichmäßig. Der erste Parameter ist die anfängliche Zoomstufe; danach folgen die Werte für jede weitere Zoomstufe.

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

In diesem Beispiel beträgt die Straßenbreite auf Zoomstufe 13 ein Pixel, auf Stufe 14 einen Punkt und ab Stufe 15 den größeren Wert aus zwei Punkten und vier Metern.

metric​

Wandelt einen numerischen Parameter in Meter um.

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

Hier wird die Anzahl der Fahrspuren mit zwei multipliziert und als Entfernung in Metern verwendet. max(3pt, metric()) gibt den größeren Wert aus der Breite in Metern und der Breite in Punkten zurück.

Ausdrucksoperatoren​

Ausdrücke unterstützen die mathematischen Operatoren +, -, *, /, den Operator . zum Verketten von Zeichenfolgen sowie die Vergleichsoperatoren <, >, == und ~= für Teilzeichenfolgen.