DE:Overpass turbo/MapCSS

Overpass API · Referenz der Sprache · Leitfaden der Sprache · Technical terms · Bereiche · Beispielabfragen · Sparse Editing · Permanent ID · FAQ · mehr (Deutsch) · Web site
Servers status · Versions · Development · Technical design · Installation · XAPI compatibility layer · Public transport sketch lines · Anwendungen · Source code and issues

Overpass turbo · Wizard · Overpass turbo shortcuts · MapCSS stylesheets · Export to GeoJSON · mehr (Deutsch) · Development · Source code and issues · Web site

Overpass Ultra · Overpass Ultra extensions · MapLibre stylesheets ·mehr (Deutsch) · Source code and issues · Web site

Overpass turbo unterstützt MapCSS zum Kartenlayout. Im Folgenden finden Sie eine Einführung in die Verwendung von MapCSS in overpass turbo, einige Beispiele und die Liste der unterstützten MapCSS-Merkmale. MapCSS wird auch von anderen Anwendungen unterstützt, wie z. B. JOSM.

Eine allgemeinere Einführung findet sich auch in diesem Tagebucheintrag.

Wie wird Sie angewendet?

MapCSS kann mit einem speziellen "mustache"-Tag an eine in der Abfragesprache Overpass-QL geschriebene Abfrage angehängt werden: Sie schreiben

{{style:

und alles, was danach kommt, bis zur ersten } }, wird als MapCSS-Stylesheet interpretiert.

/* trage hier deine overpass Abfrage ein */
{{style:
    /* trage hier deine Stilvorlage ein */
}}

Wenn wir jedoch ein Leerzeichen zwischen den Objekttyp und die Tests schreiben würden, würde die Analyse nicht funktionieren:

relation [type=route]
way [highway]

Wähle diese Abfrage für ein interaktives Beispiel.

Beispiele

Marker mit Text (für fortgeschrittene)

Um mehrere Tags miteinander zu kombinieren, verwenden Sie die MapCSS-Funktionen "eval" und "tag". Das folgende Beispiel erzeugt Beschriftungen der Form "name (wikidata)":

node, way, relation {
  text: eval("tag('name') . ' (' . tag('wikidata') . ')'");
  /* oder gleichwertig mit concat */
  text: eval("concat(tag('name'), ' (', tag('wikidata'), ')')");
}

Linienstile

way
{ color:black; width:4; opacity:1; }

way[tunnel][tunnel!=no]
{ opacity:0.3; }

way[highway=motorway]
{ width:12; }

... 

way[highway=track][tracktype=grade5]
{ color:brown; width:3; dashes:1,10,1,10; }

way[highway=path]
{ color:black; width:1; dashes:5,5; }

Füllfarbe

node, area
{ color:white; fill-color:white; }

node[amenity=drinking_water],
node[amenity=fountain],
area[amenity=fountain]
{ color:blue; fill-color:blue; }

node[amenity=place_of_worship],
area[amenity=place_of_worship]
{ color:grey; fill-color:grey; }

node[amenity=restaurant],
area[amenity=restaurant]
{ color:red; fill-color:red; }

...

• Iconns für POIs

node[amenity=cafe] {
  icon-image: url('icons/maki/cafe-18.png');
  icon-width: 18;
  text:name;
}

MapCSS

Die MapCSS-Implementierung folgt den Spezifikationen des MapCSS/0.2-Entwurfs.

Selektoren

Merkmale können nach ihrem OSM-Typ

• Knoten
• Weg
• Relation

und/oder nach ihrer Geometrie

• Knoten
• Linie
• Fläche

ausgewählt werden.Die folgenden Pseudoklassen sind verfügbar:

• :active - wählt das Kartenfeature aus, auf das gerade geklickt wurde und das das Popup anzeigt
• :tainted - wählt Features aus, die unvollständige Geometrien haben. Hierzu zählen z. B. Wege mit fehlenden Knoten oder unvollständige Multipolygone.
• :mp_outline - wählt Wege aus, die zu einem Multipolygon gehören
• :tagged - wählt Features aus, die interessante Tags haben jedoch ausser dem Tag "created_by=* oder source=*"
• :untagged - wählt Merkmale aus, die keine interessanten Tags haben. Somit das Gegenteil von :tagged.
• :placeholder - wählt Punkte aus, die einen Platzhalter für eine Linie oder Fläche darstellen.

Klassen funktionieren wie in der Syntax "set .my_class" angegeben.

Objekte können sowohl nach ihren Tags als auch nach ihren Meta-Attributen gefiltert werden, welche sich von normalen Tags durch ein @-Zeichen als Präfix unterscheiden. So kann z. B. way[@id=171784106] verwendet werden, um ein bestimmtes osm-Objekt zu spezifizieren.

Eigenschaften

Die folgenden Eigenschaften können verwendet werden, um Kartenmerkmale zu gestalten:

Linieneigenschaften

• color - Farbe der Linie
• opacity - Deckkraft/Transparenz der Linie
• width - Linienbreite
• dashes - gestrichelte Linien: eine Reihe von abwechselnd ein- und ausgeschalteten Längen (z. B. 5,8)

Gebietseigenschaften

• fill-color - Füllfarbe des Gebietes
• fill-opacity - Deckkraft/Transparenz der Füllfarbe des Gebietes
• casing-* - Beachte, dass die Umhüllung von Linien noch nicht unterstützt wird und dass Umhüllungseigenschaften für Bereiche auch über die entsprechenden nicht vorangestellten Linieneigenschaften festgelegt werden können.

Punkteeigenschaften

• sympol-shape - Spezifisches Symbol, welche angibt, was an der Stelle des POI gezeichnet werden soll. Derzeit wird nur "Kreis" unterstützt.

• symbol-size - Legt die Eigenschaften des anzuzeigenden Symbols fest:
  1. symbol-stroke-width
  2. symbol-stroke-color
  3. symbol-stroke-opacity
  4. symbol-fill-color
  5. symbol-fill-opacity

Beachte, dass die Symboleigenschaften auch über die entsprechenden unpräfixierten Zeileneigenschaften festgelegt werden können.

• icon-image - Wenn ausgewählt, wird ein Symbol für den POI gerendert. Beachte dabei, dass
  1. icon_width und
  2. icon_height

angegeben werden müssen, wenn das Symbol um den Punkt zentriert werden soll.

• icon-width - Breite des Symbols
• icon-height - Höhe des Symbols

Einige Beschränkungen

• Layering, weder über ::layername Subparts noch über z-index Sublayer, wird nicht unterstützt. Es wird nur der "Standard"-Layer (Subpart) verarbeitet. Andere Layer sowie der z-index werden ignoriert.
• Die Eval-Unterstützung ist derzeit noch etwas experimentell. Rechnen Sie mit einigen Pannen, z. B. ist die eingebaute Funktion prop() noch nicht implementiert. Eine einfache Verwendung (wie eval('tag("population")/100000');) sollte aber in Ordnung funktioieren.
• die Set-Syntax unterstützt noch keine eval-Anweisungen.
• Zoom-Level-Selektoren (z. B. |z12) werden nicht unterstützt. Sie werden immer für Zoom-Level 18 ausgewertet, unabhängig vom tatsächlichen Kartenstatus.
• Der Wildcard-Selektor "*" ist noch nicht implementiert.
• Um Symbole und Icons auf Wege und Relationen anzuwenden, müssen diese als einzelne Knoten mit Hilfe von "out center;" ausgegeben werden. Siehe hierzu Overpass_API/Overpass_QL#Print (out)
  

Einige Einschränkungen

• Wenn mehrere Selektoren unabhängig voneinander getestet werden sollen, trennen Sie sie durch ein Komma. Der letzte Selektor sollte jedoch nicht von einem Komma gefolgt werden (da sonst alles passt).
• Leerzeichen in Selektoren sind wichtig.

Wir können zum Beispiel schreiben

relation[type=route]
way[highway]

Wenn wir jedoch ein Leerzeichen zwischen den Objekttyp und die Tests schreiben würden, würde die Analyse nicht funktionieren:

relation [typ=route]
way [highway]

Icon Einstellungen

Overpass turbo wird mit drei Kartensätzen ausgeliefert:

• maki (v0.5)
• osm mapnik
• osmic.

Sie können sie verwenden, indem Sie auf icons/maki/***.png, icons/mapnik/***.png bzw. icons/osmic/***.png verweisen. Siehe dieses Beispiel. Alternativ ist es auch möglich, Icons von externen URLs zu verwenden.

Mehr Beispiele

overpass turbo - Standardstil

Dies ist das Standard-MapCSS-Kartenstil für Kartenmerkmale in Overpass-Turbo:

/* Punktmerkmale */
node {
  color:#03f;
  width:2;
  opacity:0.7;
  fill-color:#fc0;
  fill-opacity:0.3;
}
/* Linienmerkmale */
line {
  color:#03f;
  width:5;
  opacity:0.6;
}
/* Polygonmerkmale */
area {
  color:#03f;
  width:2;
  opacity:0.7;
  fill-color:#fc0;
  fill-opacity:0.3;
}
/* Stilmodifikationen */
/* Objekte in Relationen */
relation node, relation way, relation relation {
  color:#d0f;
}
/* gefärbte Objekte */
way:tainted, relation:tainted {
  dashes:5,8;
}
/* Platzhalter */
way:placeholder, relation:placeholder {
  fill-color:red;
}
/* hervorgehobene Merkmale */
node:active, way:active, relation:active {
  color:#f50;
  fill-color:#f50;
}