Formatreferenz

Mit Formatoptionen kannst du die Darstellung der Standard-Google-Kartenformate individuell gestalten, indem du die visuelle Anzeige von Merkmalen wie Straßen, Parks, Unternehmen und anderen Points of Interest (POI) änderst. Neben der Änderung des Formats solcher Merkmale kannst du Merkmale auch ganz ausblenden. Das heißt, dass du bestimmte Komponenten der Karte hervorheben bzw. dafür sorgen kannst, dass die Karte zum Format der sie umgebenden Seite passt.

Beispiele

Mit der nachfolgenden JSON-Formatdeklaration werden alle Kartenmerkmale in Grau dargestellt. Dann werden die Ein- und Ausfallstraßen blau eingefärbt und die Landschaftslabels werden vollständig ausgeblendet.

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Das JSON-Objekt

Eine JSON-Formatdeklaration besteht aus den folgenden Elementen:

  • featureType (optional) gibt die für diese Formatänderung auszuwählenden Merkmale an. Merkmale sind geografische Charakteristika auf der Karte, z. B. Straßen, Parks, Gewässer und mehr. Wenn du kein Merkmal angibst, werden alle Merkmale ausgewählt.
  • elementType (optional): Die auszuwählende Eigenschaft des angegebenen Merkmals. Elemente gehören zu einem Merkmal, einschließlich Labels und Geometrie. Wenn du kein Element angibst, werden alle Elemente des jeweiligen Merkmals ausgewählt.
  • stylers: Die Regeln, die auf die ausgewählten Merkmale und Elemente angewendet werden sollen. Styler geben die Farbe, Sichtbarkeit und Stärke des Merkmals an. Du kannst einen oder mehrere Styler auf ein Merkmal anwenden.

Um ein Format anzugeben, musst du featureType- und elementType-Selektoren und stylers in einem Formatarray zusammenfassen. In einem Array lassen sich beliebige Merkmale zusammenfassen. Allerdings kannst du nur eine begrenzte Anzahl von Formaten auf einmal anwenden. Wenn dein Formatarray die maximale Zeichenzahl überschreitet, wird keine Formatierung angewendet.

Im weiteren Verlauf dieser Seite findest du weitere Informationen zu Merkmalen, Elementen und Stylern.

featureType

Mit dem folgenden JSON-Snippet werden alle Straßen auf der Karte ausgewählt:

{
  "featureType": "road"
}

Merkmale oder Merkmalstypen sind geografische Charakteristika auf der Karte, etwa Straßen, Parks, Gewässer, Unternehmen und mehr.

Die Merkmale bilden einen Kategoriebaum mit all als Stamm. Wenn kein Merkmal angeben ist, werden alle Merkmale ausgewählt. Wenn du das Merkmal all angibst, hat das denselben Effekt.

Zu einigen Merkmalen gibt es untergeordnete Merkmale, die auf einen Punkt folgen. Beispiel: landscape.natural oder road.local. Wenn du nur das übergeordnete Merkmal angibst, z. B. road, gelten die für das übergeordnete Merkmal angegebenen Formate auch für alle untergeordneten Merkmale, zum Beispiel road.local und road.highway.

Es kann sein, dass einige Elemente von übergeordneten Merkmalen nicht in allen ihnen untergeordneten Merkmalen enthalten sind.

Die folgenden Merkmale sind verfügbar:

  • all (Standardeinstellung): Zum Auswählen aller Merkmale.
  • administrative zum Auswählen aller Bundesländer. Die Formatierung betrifft nur die Beschriftungen der Bundesländer, nicht die geografischen Grenzen oder die Füllbereiche.
    • administrative.country zum Auswählen von Ländern
    • administrative.land_parcel zum Auswählen von Landparzellen
    • administrative.locality zum Auswählen von Orten
    • administrative.neighborhood zum Auswählen von Stadtteilen
    • administrative.province zum Auswählen von Provinzen
  • landscape zum Auswählen aller Landschaften
    • landscape.man_made zum Auswählen von Merkmalen, die von Menschen erschaffen wurden, etwa Gebäuden und anderen Bauwerken
    • landscape.natural zum Auswählen von Landschaftsmerkmalen wie Bergen, Seen, Wüsten und Gletschern
    • landscape.natural.landcover zum Auswählen von Landbedeckungsmerkmalen, etwa Wäldern, Sumpfgebieten und kahlen Böden
    • landscape.natural.terrain zum Auswählen von Geländeelementen einer Landoberfläche, z. B. Höhe, Gefälle und Ausrichtung
  • poi zum Auswählen aller POIs
    • poi.attraction zum Auswählen von Touristenattraktionen
    • poi.business zum Auswählen von Unternehmen
    • poi.government zum Auswählen von Regierungsgebäuden
    • poi.medical zum Auswählen von Einrichtungen zur Notfallversorgung und -hilfe, etwa Krankenhäuser, Apotheken, Polizei oder Ärzte
    • poi.park zum Auswählen von Parks
    • poi.place_of_worship zum Auswählen von Andachtsstätten, darunter Kirchen, Tempel, Moscheen und andere
    • poi.school zum Auswählen von Schulen
    • poi.sports_complex zum Auswählen von Sportanlagen
  • road zum Auswählen von Straßen
    • road.arterial zum Auswählen von Hauptverkehrsstraßen
    • road.highway zum Auswählen von Bundesstraßen
    • road.highway.controlled_access zum Auswählen von Autobahnen
    • road.local zum Auswählen lokaler Straßen
  • transit zum Auswählen aller Haltestellen und Linien öffentlicher Verkehrsmittel
    • transit.line zum Auswählen von Linien öffentlicher Verkehrsmittel
    • transit.station zum Auswählen aller Haltestellen öffentlicher Verkehrsmittel
    • transit.station.airport zum Auswählen von Flughäfen
    • transit.station.bus zum Auswählen von Bushaltestellen
    • transit.station.rail zum Auswählen von Bahnhöfen
  • water zum Auswählen von Gewässern

elementType

Mit dem folgenden JSON-Snippet werden die Labels für alle Nahverkehrsstraßen ausgewählt:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Ein Merkmal besteht aus verschiedenen Elementen. Beispielsweise besteht eine Straße aus der Liniengrafik (Geometrie) auf der Karte sowie dem Text, der den Straßennamen angibt (Label).

Die folgenden Elemente stehen zur Verfügung, wobei du beachten solltest, dass ein bestimmtes Merkmal ein Element oder auch einige oder alle der Elemente unterstützen kann:

  • all (Standard): Zum Auswählen aller Elemente des angegebenen Merkmals
  • geometry zum Auswählen aller geometrischen Elemente des angegebenen Merkmals
    • Mit geometry.fill wird nur die Füllung der Geometrie des Elements ausgewählt.
    • Mit geometry.stroke wird nur der Strich der Geometrie des Elements ausgewählt.
  • Mit labels werden die mit dem angegebenen Merkmal verknüpften Textlabels ausgewählt.
    • Mit labels.icon wird nur das Symbol ausgewählt, das im Label des Merkmals angezeigt wird.
    • Mit labels.text wird nur der Text des Labels ausgewählt.
    • Mit labels.text.fill wird nur die Füllung des Labels ausgewählt. Der Füllbereich eines Labels wird in der Regel als farbiger Rahmen um den Labeltext dargestellt.
    • Mit labels.text.stroke wird nur der Strich des Labeltexts ausgewählt.

stylers

Styler sind Formatierungsoptionen, die auf Kartenmerkmale und -elemente angewendet werden können.

Mit dem folgenden JSON-Snippet wird anhand eines RGB-Wertes ein Merkmal in Hellgrün angezeigt:

"stylers": [
  { "color": "#99FF33" }
]

Mit diesem Snippet wird von einem Merkmal, unabhängig von seiner Ausgangsfarbe, die ganze Farbintensität entfernt. Dies führt zu einer Darstellung des Merkmals in Graustufen:

"stylers": [
  { "saturation": -100 }
]

Durch dieses Snippet wird ein Merkmal vollständig ausgeblendet:

    "stylers": [
      { "visibility": "off" }
    ]

Die folgenden Formatoptionen werden unterstützt:

  • hue (ein hexadezimaler RGB-String des Formats #RRGGBB) gibt die Grundfarbe an.

    Hinweis: Mit dieser Option wird der Farbton festgelegt, während die Sättigung und die Helligkeit weiterhin der Festlegung im Standard-Google-Format entsprechen (oder in anderen Formatoptionen, die du für die Karte definierst). Die resultierende Farbe hängt vom Format der Basiskarte ab. Wenn Google Änderungen am Basiskartenformat vornimmt, haben diese Änderungen Auswirkungen auf die mit hue formatierten Merkmale deiner Karte. Besser ist es, möglichst den Absolut-Styler color zu verwenden.

  • lightness (ein Gleitkommawert zwischen -100 und 100) gibt die Helligkeitsänderung des Elements in Prozent an. Negative Werte führen zu einem dunkleren Ergebnis (wobei -100 die Farbe Schwarz ergibt), positive Werte sorgen für mehr Helligkeit (wobei +100 die Farbe Weiß bedeutet).

    Mit dieser Option wird die Helligkeit festgelegt, während die Sättigung und der Farbton weiterhin der Festlegung im Standard-Google-Format entsprechen (oder in anderen Formatoptionen, die du für die Karte definierst). Die resultierende Farbe hängt vom Format der Basiskarte ab. Wenn Google Änderungen am Basiskartenformat vornimmt, haben diese Änderungen Auswirkungen auf die mit lightness formatierten Merkmale deiner Karte. Besser ist es, möglichst den Absolut-Styler colorzu verwenden.

  • saturation (ein Gleitkommawert zwischen -100 und 100) gibt die Intensitätsänderung der Grundfarbe in Prozent an, die auf das Element angewendet wird.

    Hinweis: Mit dieser Option wird die Sättigung festgelegt, während der Farbton und die Helligkeit weiterhin der Festlegung im Standard-Google-Format entsprechen (oder in anderen Formatoptionen, die du für die Karte definierst). Die resultierende Farbe hängt vom Format der Basiskarte ab. Wenn Google Änderungen am Basiskartenformat vornimmt, wirken sich diese Änderungen auf die mit saturation formatierten Merkmale deiner Karte aus. Besser ist es, möglichst den Absolut-Styler color zu verwenden.

  • gamma (ein Gleitkommawert zwischen 0.01 und 10.0, wobei mit 1.0 keine Korrektur angewendet wird) gibt die Stärke der Gammakorrektur an, die auf das Element angewendet wird. Mit Gammakorrekturen werden nicht lineare Korrekturen von Farbhelligkeiten durchgeführt. Schwarz- und Weißwerte werden nicht beeinflusst. Gammakorrekturen erfolgen in der Regel, um den Kontrast mehrerer Elemente zu ändern. Du kannst den Gammakorrekturwert beispielsweise ändern, um den Kontrast zwischen den Rändern und dem Inneren von Elementen zu erhöhen oder zu verringern.

    Mit dieser Option wird die Helligkeit relativ zum Standard-Google-Format anhand einer Gammakurve variiert. Wenn Google Änderungen am Basiskartenformat vornimmt, wirken sich diese Änderungen auf die mit gamma formatierten Merkmale deiner Karte aus. Besser ist es, möglichst den Absolut-Styler color zu verwenden.

  • invert_lightness (wenn true) invertiert die vorhandene Helligkeit. Das ist z. B. hilfreich, um schnell zu einer dunkleren Karte mit weißem Text zu wechseln.

    Hinweis: Mit dieser Option wird das Standard-Google-Format einfach invertiert. Wenn Google Änderungen am Basiskartenformat vornimmt, haben diese Änderungen Auswirkungen auf die mit invert_lightness formatierten Merkmale deiner Karte. Besser ist es, möglichst den Absolut-Styler color zu verwenden.

  • visibility (on, off oder simplified) gibt an, ob und wie die Elemente auf der Karte angezeigt werden. Bei der Sichtbarkeit simplified werden einige Formatelemente aus den betroffenen Merkmalen entfernt. Straßen werden zum Beispiel zu dünneren Linien ohne Konturen vereinfacht, während Parks ihren Labeltext verlieren, aber das Labelsymbol behalten.
  • Mit color (ein hexadezimaler RGB-String des Formats #RRGGBB) wird die Farbe eines Elements festgelegt.
  • Mit weight (eine Ganzzahl größer oder gleich null) wird die Stärke des Merkmals in Pixeln angegeben. Ein hoher Wert kann dazu führen, dass die Darstellung an den Kachelrändern abgeschnitten wird.

Formatregeln werden in der von dir angegebenen Reihenfolge angewendet. Du solltest nicht mehrere Vorgänge zu einem einzelnen Formatierungsvorgang zusammenfassen. Definiere stattdessen jeden Vorgang als separaten Eintrag im Formatarray.

Hinweis: Die Reihenfolge ist hierbei wichtig, weil einige Vorgänge nicht vertauscht werden dürfen. Für Merkmale und/oder Elemente, die durch Formatierungsvorgänge geändert werden, sind normalerweise bereits Formate vorhanden. Mit diesen Vorgängen werden diese vorhandenen Formate, falls solche existieren, geändert.

HSL-Farbmodell (Hue, Saturation, Lightness bzw. Farbton, Sättigung, Helligkeit)

Für Karten mit benutzerdefinierten Stilen wird das HSL-Modell (Hue, Saturation, Lightness; Farbton, Sättigung, Helligkeit) zur Darstellung von Farben in Styler-Vorgängen verwendet. Farbton gibt die Grundfarbe an, Sättigung die Intensität der Farbe und Helligkeit den relativen Anteil von Weiß oder Schwarz in der zugehörigen Farbe.

Mit der Gammakorrektur wird die Sättigung über den Farbraum hinweg geändert, in der Regel zum Erhöhen oder Verringern des Kontrasts. Außerdem definiert das HSL-Modell die Farbe in einem Koordinatenbereich, wobei hue die Ausrichtung innerhalb eines Farbrads angibt, während Sättigung und Helligkeit Werte entlang verschiedener Achsen angeben. Farbtöne werden in einem RGB-Farbraum gemessen, der den regulären RGB-Farbräumen entspricht, außer dass Weiß- und Schwarzschattierungen fehlen.

Modell „Farbton, Sättigung und Helligkeit“

Für hue wird ein HTML-Hexadezimalwert zur Farbbestimmung verwendet, jedoch legt dieser Wert ausschließlich die Basisfarbe fest, d. h. die Ausrichtung im Farbkreis. Die Werte für Sättigung und Helligkeit werden separat als prozentuale Änderungen angegeben.

Beispielsweise kannst du den Farbton für reines Grün als hue:0x00ff00 oder hue:0x000100 definieren. Die beiden Farbtöne sind identisch. Beide Werte ergeben im HSL-Farbmodell reines Grün.

Ein RGB-Farbkreis

RGB-Farbtonwerte (hue), die zu gleichen Teilen aus Rot, Grün und Blau bestehen, geben keinen Farbton an, da keiner dieser Werte eine Ausrichtung im Koordinatensystem für Farbton, Sättigung und Helligkeit angibt. Beispiele sind „#000000“ (Schwarz), „#FFFFFF“ (Weiß) und alle reinen Grauschattierungen. Zum Angeben von Schwarz, Weiß oder Grau muss saturation entfernt werden, indem du den Wert auf -100 setzt. Passe dann den lightness-Wert an.

Außerdem werden beim Ändern vorhandener Funktionen, die bereits ein Farbschema haben, durch das Ändern eines Werts wie zum Beispiel hue die vorhandenen saturation- oder lightness-Werte nicht geändert.