Formatierte Karten

  1. Übersicht
  2. Formatsyntax
    1. Kartenmerkmale
    2. Styler
    3. Beispiel Style Array
  3. Standardkartenformat ändern
  4. StyledMapType erstellen
  5. Assistent für formatierte Karten

Übersicht

Mit formatierten Karten können Sie die Darstellung der Google-Standardbasiskarten anpassen, indem Sie verändern, in welcher Weise Elemente wie Straßen, Parks und bebaute Flächen angezeigt werden.

Es gibt zwei Möglichkeiten Karten zu formatieren.

  • Durch Setzen der Eigenschaft .styles des Kartenobjekts MapOptions. Bei dieser Methode wird das Format der Standardkartentypen geändert (Basisbilder in den Gelände- und Satellitenansichten sind nicht betroffen, Straßen, Bezeichnungen usw. folgen dagegen den Formatierungsregeln). Siehe Standardkartenformat ändern.

  • Durch Erstellen und Definieren von StyledMapType und Übernehmen der Einstellungen für die Karte. Dadurch wird ein neuer Kartentyp erstellt, der dann durch die Kartentypsteuerung ausgewählt werden kann. Siehe StyledMapType erstellen.

Bei beiden Methoden wird ein Array von MapTypeStyles verwendet, der sich jeweils aus Selektoren und Stylers zusammensetzt. Selektoren geben an, welche Kartenbestandteile zur Formatierung ausgewählt werden sollen, während mit Stylers die optische Veränderung dieser Elemente definiert wird.

Formatsyntax

Für formatierte Karten kommen zwei Konzepte zum Einsatz, um Farben und Änderungen für eine Karte anzuwenden:

  • Kartenmerkmale sind die geografischen Elemente, die auf der Karte vorgegeben werden können. Dazu gehören Straßen, Parks, Gewässer usw. sowie deren Bezeichnungen.
  • Styler sind Farb- und Sichtbarkeitseigenschaften, die auf die Kartenmerkmale angewandt werden können. Mit ihnen definieren Sie die Anzeigefarbe, indem Sie Farbton-, Farb- sowie Helligkeits-/Gammawerte kombinieren.

Kartenmerkmale und Styler werden in einem Format-Array kombiniert, der an das Standardobjekt MapOptions der Karte oder an den Konstruktor StyledMapType übergeben wird. Ein Array hat folgende Form:

var stylesArray = [
  {
    featureType: '',
    elementType: '',
    stylers: [
      {hue: ''},
      {saturation: ''},
      {lightness: ''},
      // etc...
    ]
  },
  {
    featureType: '',
    // etc...
  }
]

Seine einzelnen Bestandteile sind nachfolgend beschrieben.

Kartenmerkmale

Eine Karte besteht aus verschiedenen Merkmalen, z. B. einer Straße oder einem Park, die mithilfe von MapTypeStyleFeatureType definiert sind. Die Merkmalstypen bilden einen Kategoriebaum mit all als Stamm. Eine vollständige Liste der Merkmale, die in einer Karte zur Auswahl stehen, finden Sie der Referenz zu Google Maps JavaScript API. Die Definition der Merkmale als all führt dazu, dass alle Kartenelemente ausgewählt werden.

Merkmale werden mithilfe der Syntax featureType: 'feature' definiert.

Beispiel:

{
  featureType: "road"
}

Einige Merkmalstyp-Kategorien enthalten Unterkategorien, die mit einer durch einen Punkt verbundenen Notation angegeben werden (z. B. landscape.natural oder road.local). Wird das übergeordnete Merkmal (z. B. road) definiert, werden die für diese Auswahl verwendeten Formate auch für die untergeordneten Kategorien übernommen.

Darüber hinaus enthalten einige Merkmale einer Karte verschiedene Elemente. Eine Straße besteht beispielsweise nicht nur aus der grafischen Linie (Geometrie) auf der Karte, sondern auch aus dem Text, der den Straßennamen angibt (Beschriftungen). Elemente innerhalb von Merkmalen werden durch Angeben einer Kategorie vom Typ MapTypeStyleElementType ausgewählt. Die folgenden Elemente werden unterstützt:

  • Mit all (Standard) werden alle Elemente des Merkmals ausgewählt.
  • Mit geometry werden alle geometrischen Elemente des Merkmals ausgewählt.
    • Mit geometry.fill wird nur der Füllbereich der Geometrie des Merkmals ausgewählt.
    • Mit geometry.stroke wird nur der Strich der Geometrie des Merkmals ausgewählt.
  • Mit labels werden nur Beschriftungen zu diesem Merkmal ausgewählt.
    • Mit labels.icon wird nur das in der Beschriftung des Merkmals angezeigte Icon ausgewählt.
    • Mit labels.text wird nur der Text der Beschriftung ausgewählt.
    • Mit labels.text.fill wird nur der Füllbereich der Beschriftung ausgewählt. Der Füllbereich einer Beschriftung wird in der Regel als farbiger Rahmen um den Beschriftungstext dargestellt.
    • labels.text.stroke wählt nur den Strich des Beschriftungstextes aus.

Mit der folgenden Angabe werden die Beschriftungen für alle örtlichen Straßen ausgewählt:

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

Styler

Styler sind Formatierungsoptionen vom Typ MapTypeStyler, die für Kartenmerkmale verwendet werden. Folgende MapTypeStyler-Optionen werden unterstützt:

  • Mit hue (ein RGB-Hexadezimalwert) wird der Basisfarbton angegeben.
  • Mit lightness (ein Gleitkommawert zwischen –100 und 100) wird die prozentuale Änderung der Helligkeit eines Elements angegeben. 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ß ergibt).
  • saturation (ein Gleitkommawert zwischen –100 und 100) gibt die Veränderung der Basisfarbenintensität (Sättigung) für das Element in Prozent an.
  • Mit gamma (ein Gleitkommawert zwischen 0,01 und 10,0, wobei 1,0 keine Korrektur bedeutet) wird der für das Element anzuwendende Gamma-Korrekturwert angegeben. Gammakorrekturen verändern die Helligkeit von Farbtönen in nichtlinearer Weise, ohne die Weiß- oder Schwarz-Werte zu beeinflussen. Gammakorrekturen erfolgen in der Regel, um den Kontrast mehrerer Elemente zu verändern. Sie können den Gammawert beispielsweise ändern, um den Kontrast zwischen den Rändern und dem Inneren von Elementen zu erhöhen oder zu verringern. Niedrige Gammawerte (<1) erhöhen den Kontrast, während hohe Werte (>1) den Kontrast verringern.
  • Mit invert_lightness (auf true gesetzt) wird die vorhandene Helligkeit umgekehrt. Dies ist z. B. hilfreich, um schnell zu einer dunkleren Karte mit weißem Text zu wechseln.
  • Mit visibility (auf on, off oder simplified gesetzt) wird angegeben, ob und wie das Element auf der Karte dargestellt wird. Ist die Sichtbarkeit auf simplified gesetzt, werden einige Formateigenschaften der betroffenen Merkmale entfernt; so wird die Darstellung von Straßen beispielsweise zu dünneren Linien ohne Rahmen vereinfacht, und für Parks wird die Beschriftung entfernt und nur das Beschriftungsicon beibehalten.
  • Mit color (ein RGB-Hexadezimalwert) wird die Farbe des Merkmals festgelegt.
  • Mit weight (eine Ganzzahl größer oder gleich null) wird die Stärke des Merkmals in Pixel angegeben. Ein hoher Wert kann dazu führen, dass die Darstellung an den Kachelrändern abgeschnitten wird.

Die Farbe eines Merkmals kann entweder über einen einzelnen Wert color eingestellt oder durch Kombinieren von hue (Farbton), saturation (Sättigung) und lightness (Helligkeit) verändert werden. Diese Eigenschaften bilden zwei verschiedene Methoden zur Farbdarstellung; es lassen sich jedoch beide Methoden auch kombinieren. Sie können beispielsweise eine Farbe definieren und anschließend die Sättigung und Helligkeit so verändern, dass diese bei der Anzeige eines Dialogfensters ausgeblendet werden. Weitere Informationen zu Farbmodellen finden Sie in der Dokumentation zum Modell „Farbton, Sättigung und Helligkeit“.

Styler-Regeln kommen in der Reihenfolge zur Anwendung, in der sie im Array MapTypeStyler aufgeführt sind. Kombinieren Sie nicht mehrere Vorgänge in einem einzelnen Styler-Vorgang; definieren Sie stattdessen jeden Vorgang als eigenständigen Eintrag im Styler-Array. Die Reihenfolge ist hierbei wichtig, da zwischen einigen Vorgängen keine Kommunikation erfolgt. Merkmale und/oder Elemente, die über Styler-Vorgänge verändert werden, verfügen (in der Regel) bereits über Formate; in den Vorgängen werden diese vorhandenen Formate verwendet, sofern vorhanden.

Modell „Farbton, Sättigung und Helligkeit“

Formatierte Karten verwenden das Modell Farbton, Sättigung, Helligkeit zur Angabe der Farbe bei Styler-Vorgängen. Diese Vorgänge zur Farbdefinition werden im Grafikdesign häufig verwendet. Hue gibt den Basisfarbton an, saturation die Intensität (Sättigung) dieser Farbe und lightness den relativen Weiß- oder Schwarzanteil, also die Helligkeit der daraus resultierenden Farbe.

Während für hue ein HTML-Hexadezimal-Farbwert verwendet wird, bestimmt dieser Wert ausschließlich die Basisfarbe und nicht die Sättigung oder Helligkeit; diese Werte werden separat angegeben.

RGB-Farbtonwerte (hue), die zu gleichen Teilen aus Rot, Grün und Blau bestehen (z. B. „#000000“ (schwarz) und „#FFFFFF“ (weiß) sowie alle reinen Grauschattierungen), geben keinerlei Farbton an, da keiner dieser Werte eine Ausrichtung im Koordinatensystem für Farbton, Sättigung und Helligkeit nennt. Um Schwarz, Weiß oder Grau anzugeben, entfernen Sie zunächst die gesamte Sättigung (setzen Sie den Wert für (saturation auf -100), und passen Sie stattdessen die Helligkeit (lightness) an.

Bei der Bearbeitung vorhandener Merkmale, denen bereits ein Farbschema zugeordnet ist, führt das Ändern eines Wertes, z. B. des Farbtons (hue) nicht zu einer Veränderung der vorhandenen Sättigung (saturation) oder Helligkeit (lightness).

Styler-Beispiele

So wird ein Merkmal hellblau dargestellt:

stylers: [
  { hue: "#00d4ff" },
  { saturation: 60 },
  { lightness: -20 },
  { gamma: 1.51 }
]

So wird ein Merkmal mithilfe eines einzelnen RGB-Wertes hellgrün dargestellt:

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

So entfernen Sie sämtliche Farbe eines Merkmals, unabhängig von der Ausgangsfarbe:

stylers: [
  { saturation: -100 }
]

So blenden Sie ein Merkmal vollständig aus:

stylers: [
  { visibility: "off" }
]

Beispiel Style Array

Die Selektoren für Kartenmerkmale und die Styler-Regeln werden zu einem Styler-Array kombiniert. Sie können eine beliebige Kombination von Merkmalen für einen einzelnen Array vorgeben; die Anzahl der gleichzeitig anwendbaren Formate ist jedoch begrenzt. Wenn Ihr Style-Array die maximale Zeichenzahl überschreitet, wird keine Formatierung angewendet.

Im nachfolgenden Beispiel werden alle Kartenmerkmale in grau dargestellt, dann werden die Hauptverkehrsadern blau eingefärbt, und die Unternehmensbezeichnungen werden vollständig ausgeblendet.

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

Standardkartenformat ändern

Um die Formate des Standardkartentyps zu bearbeiten (Änderungen an Beschriftungen und Straßen wirken sich auch auf Gelände- und Satellitenkarten aus), definieren Sie den Style-Array in den MapOptions der Karte entweder während der Erstellung oder durch Aufrufen von setOptions.

Im nachfolgenden Beispiel wird die Sättigung aller Merkmale verringert, und Beschriftungen von Straßen werden deaktiviert.

var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

map.setOptions({styles: styles});

Informationen zu den formatierbaren Elementen finden Sie unter Kartenmerkmale; Informationen zu den verwendbaren Farben und Effekten finden Sie unter Styler.

StyledMapType erstellen

Sie können einen neuen Kartentyp anlegen, für den Formate angewendet werden sollen, indem Sie einen StyledMapType anlegen und die Merkmals- und Styler-Informationen an den Konstruktor übergeben. Diese Methode wirkt sich nicht auf das Format der Standardkartentypen aus.

So erstellen Sie einen neuen Kartentyp:

  1. Legen Sie Ihren Array mit den Formaten an. Eine Anleitung finden Sie unter „Kartenmerkmale und Styler“.
  2. Erstellen Sie ein neues Objekt google.maps.StyledMapType, übergeben Sie das Objekt sowie einen Namen für den neuen Kartentyp an den Array mit den Formaten.
  3. Erstellen Sie Ihr Kartenobjekt, und fügen Sie in den Kartenoptionen einen Bezeichner für den neuen Kartentyp im Array mapTypeIds hinzu (dieser ist eine Eigenschaft des Objekts mapTypeControlOptions).
  4. Im letzten Schritt weisen Sie den Bezeichner der neu formatierten Karte zu.
  5. Definieren Sie die Karte, die den neuen Kartentyp verwenden soll.
function initialize() {

  // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}

Die daraus resultierende Karte ist nachfolgend dargestellt. Beachten Sie das Kartentyp-Steuerelement unten links auf der Karte; dies ist der im Beispielcode erstellte neue Kartentyp.

Informationen zu den formatierbaren Elementen finden Sie unter Kartenmerkmale; Informationen zu den verwendbaren Farben und Effekten finden Sie unter Styler.

Assistent für formatierte Karten

Das manuelle Erstellen von Formaten und das Testen des Codes, um die Darstellung zu überprüfen, kann sehr zeitintensiv sein. Alternativ können Sie den Assistent für formatierte Karten verwenden, um das JSON für Ihre Kartenformate einzurichten. Der Assistent ermöglicht Ihnen das Auswählen von Merkmalen und den zugehörigen Elementen, das Anwenden von Vorgängen auf diese Merkmale sowie das Speichern der Formate in JSON, das Sie kopieren und in Ihre Anwendung einfügen können.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API