JSON-Referenz für das cloudbasierte Gestalten von Karteninhalten

Plattform auswählen: Android iOS JavaScript Webdienst

Mit dem JSON-Schema für cloudbasierte Kartenstile können Sie Karten mit JSON anpassen, genau wie über die Oberfläche des Stileditors. In diesem Dokument werden das JSON-Schema und die Erstellung von JSON-Stildeklarationen beschrieben.

JSON-Schema herunterladen

Informationen zum Bearbeiten eines Kartenstils mit JSON im Stileditor oder zum Importieren und Exportieren eines Kartenstils finden Sie unter JSON mit cloudbasierten Kartenstilen verwenden.

Beispiel für eine JSON-Stildeklaration

Mit der folgenden JSON-Stildeklaration wird eine Hintergrundfarbe festgelegt. Anschließend werden Stile für POIs, Parks und Wasserflächen definiert und Labels für Orte mit Speisen und Getränken ausgeblendet.


{
  "variant": "light",
  "styles": [
    {
      "id": "natural.land",
      "geometry": {
        "fillColor": "#f7e3f7"
      }
    },
    {
      "id": "natural.water",
      "geometry": {
        "fillColor": "#d4b2ff"
      },
      "label": {
        "textFillColor": "#3d2163",
        "textStrokeColor": "#f0e1ff"
      }
    },
    {
      "id": "pointOfInterest",
      "label": {
        "pinFillColor": "#e0349a",
        "textFillColor": "#a11e6e",
        "textStrokeColor": "#ffd9f0"
      }
    },
    {
      "id": "pointOfInterest.emergency.hospital",
      "geometry": {
        "fillColor": "#ffe3e3"
      }
    },
    {
      "id": "pointOfInterest.foodAndDrink",
      "label": {
        "visible": false
      }
    },
    {
      "id": "pointOfInterest.recreation.park",
      "geometry": {
        "fillColor": "#f9b9d2"
      }
    }
  ]
}

Das JSON-Objekt

Eine JSON-Stildeklaration besteht aus einem Objekt der obersten Ebene und einem Array von Formatregeln.

  • Einstellungen der obersten Ebene (optional): Globale Stileinstellungen wie backgroundColor und variant.
  • styles : Ein Array von Stilregelobjekten, das Folgendes enthalten kann:
    • id : Das Kartenelement, das für diese Stiländerung ausgewählt werden soll (z.B. pointOfInterest.recreation.park).
    • geometry (optional): Die geometrischen Elemente des Kartenelements und die anzuwendenden Formatregeln (z.B. fillColor).
    • label (optional): Das Text- oder Stecknadellabel des Kartenelements und die anzuwendenden Formatregeln (z.B. textStrokeColor).

Einstellungen der obersten Ebene

Die Eigenschaften in der folgenden Tabelle gelten für den gesamten Kartenstil.

Attribut Typ Beschreibung Beispiel

backgroundColor

String Passen Sie die Hintergrundfarbe der Karten-App mit einem hexadezimalen RGB-String im Format #RRGGBB an. Mit dieser Einstellung kann die Deckkraft nicht geändert werden. "#002211"

variant

"light"|"dark" Geben Sie den hellen oder dunklen Modus an. Wenn nichts angegeben ist, wird standardmäßig „light“ verwendet. "light"

monochrome

boolean Wenn Sie die monochrome Darstellung aktivieren möchten, verwenden Sie true für eine graue Version der Karte.

true

Stilregelobjekte

In diesem Abschnitt werden die Eigenschaften beschrieben, die die Stilregelobjekte im Array styles definieren, um Kartenelemente anzupassen. Jedes Stilregelobjekt muss Folgendes enthalten:

  • Das Attribut id.
  • Das Element geometry oder label mit den zugehörigen Styler-Eigenschaften.

id (Kartenelement)

Mit dem Attribut id wird das Kartenelement angegeben, das gestaltet werden soll. Die Attributnamen sind Camel-Case-Versionen der Namen der Kartenelemente im Stileditor.

Die Kartenelemente bilden einen Kategoriebaum. Wenn Sie einen übergeordneten Elementtyp angeben, z. B. pointOfInterest, gelten die für das übergeordnete Element angegebenen Stile auch für alle untergeordneten Elemente, zum Beispiel pointOfInterest.retail und pointOfInterest.lodging. Weitere Informationen finden Sie unter Hierarchie von Kartenelementen.

Liste der verfügbaren id-Attribute

Die verfügbaren id-Attribute sind:

  • pointOfInterest
  • pointOfInterest.emergency
  • pointOfInterest.emergency.fire
  • pointOfInterest.emergency.hospital
  • pointOfInterest.emergency.pharmacy
  • pointOfInterest.emergency.police
  • pointOfInterest.entertainment
  • pointOfInterest.entertainment.arts
  • pointOfInterest.entertainment.casino
  • pointOfInterest.entertainment.cinema
  • pointOfInterest.entertainment.historic
  • pointOfInterest.entertainment.museum
  • pointOfInterest.entertainment.themePark
  • pointOfInterest.entertainment.touristAttraction
  • pointOfInterest.foodAndDrink
  • pointOfInterest.foodAndDrink.bar
  • pointOfInterest.foodAndDrink.cafe
  • pointOfInterest.foodAndDrink.restaurant
  • pointOfInterest.foodAndDrink.winery
  • pointOfInterest.landmark
  • pointOfInterest.lodging
  • pointOfInterest.recreation
  • pointOfInterest.recreation.beach
  • pointOfInterest.recreation.boating
  • pointOfInterest.recreation.fishing
  • pointOfInterest.recreation.golfCourse
  • pointOfInterest.recreation.hotSpring
  • pointOfInterest.recreation.natureReserve
  • pointOfInterest.recreation.park
  • pointOfInterest.recreation.peak
  • pointOfInterest.recreation.sportsComplex
  • pointOfInterest.recreation.sportsField
  • pointOfInterest.recreation.trailhead
  • pointOfInterest.recreation.zoo
  • pointOfInterest.retail
  • pointOfInterest.retail.grocery
  • pointOfInterest.retail.shopping
  • pointOfInterest.service
  • pointOfInterest.service.atm
  • pointOfInterest.service.bank
  • pointOfInterest.service.carRental
  • pointOfInterest.service.evCharging
  • pointOfInterest.service.gasStation
  • pointOfInterest.service.parkingLot
  • pointOfInterest.service.postOffice
  • pointOfInterest.service.restStop
  • pointOfInterest.service.restroom
  • pointOfInterest.transit
  • pointOfInterest.transit.airport
  • pointOfInterest.other
  • pointOfInterest.other.bridge
  • pointOfInterest.other.cemetery
  • pointOfInterest.other.government
  • pointOfInterest.other.library
  • pointOfInterest.other.military
  • pointOfInterest.other.placeOfWorship
  • pointOfInterest.other.school
  • pointOfInterest.other.townSquare
  • political
  • political.countryOrRegion
  • political.border
  • political.reservation
  • political.stateOrProvince
  • political.city
  • political.sublocality
  • political.neighborhood
  • political.landParcel
  • infrastructure
  • infrastructure.building
  • infrastructure.building.commercial
  • infrastructure.businessCorridor
  • infrastructure.roadNetwork
  • infrastructure.roadNetwork.noTraffic
  • infrastructure.roadNetwork.noTraffic.pedestrianMall
  • infrastructure.roadNetwork.noTraffic.trail
  • infrastructure.roadNetwork.noTraffic.trail.paved
  • infrastructure.roadNetwork.noTraffic.trail.unpaved
  • infrastructure.roadNetwork.parkingAisle
  • infrastructure.roadNetwork.ramp
  • infrastructure.roadNetwork.road
  • infrastructure.roadNetwork.road.arterial
  • infrastructure.roadNetwork.road.highway
  • infrastructure.roadNetwork.road.local
  • infrastructure.roadNetwork.road.noOutlet
  • infrastructure.roadNetwork.roadShield
  • infrastructure.roadNetwork.roadSign
  • infrastructure.roadNetwork.roadDetail
  • infrastructure.roadNetwork.roadDetail.surface
  • infrastructure.roadNetwork.roadDetail.crosswalk
  • infrastructure.roadNetwork.roadDetail.sidewalk
  • infrastructure.roadNetwork.roadDetail.intersection
  • infrastructure.railwayTrack
  • infrastructure.railwayTrack.commercial
  • infrastructure.railwayTrack.commuter
  • infrastructure.transitStation
  • infrastructure.transitStation.bicycleShare
  • infrastructure.transitStation.busStation
  • infrastructure.transitStation.ferryTerminal
  • infrastructure.transitStation.funicularStation
  • infrastructure.transitStation.gondolaStation
  • infrastructure.transitStation.monorail
  • infrastructure.transitStation.railStation
  • infrastructure.transitStation.railStation.subwayStation
  • infrastructure.transitStation.railStation.tramStation
  • infrastructure.urbanArea
  • natural
  • natural.continent
  • natural.archipelago
  • natural.island
  • natural.land
  • natural.land.landCover
  • natural.land.landCover.crops
  • natural.land.landCover.dryCrops
  • natural.land.landCover.forest
  • natural.land.landCover.ice
  • natural.land.landCover.sand
  • natural.land.landCover.shrub
  • natural.land.landCover.tundra
  • natural.water
  • natural.water.ocean
  • natural.water.lake
  • natural.water.river
  • natural.water.other
  • natural.base

Elemente

Elemente sind Unterelemente eines Kartenelements. Beispielsweise besteht eine Straße aus der Liniengrafik (geometry) auf der Karte sowie dem Text, der den Straßennamen angibt (label).

Die folgenden Elemente stehen zur Verfügung, wobei Sie beachten sollten, dass ein bestimmtes Kartenelement genau ein Unterelement oder auch einige oder alle Unterelemente unterstützen kann:

  • geometry: Wählt alle geometrischen Elemente (z.B. Polygon, Polylinie) des angegebenen Kartenelements aus.
  • label: Wählt alle Label-Elemente (z.B. Text, Stecknadel) des angegebenen Kartenelements aus.

Styler

Mit Stylern definieren Sie die Formatregeln für jedes Element eines Kartenelements.

Für einen Gebäudeumriss können Sie beispielsweise jedes Element so gestalten:

Beispiel für geometry-Styler für ein Gebäude Beispiel für label-Styler für ein Gebäude
Gibt an, ob das Polygon des Gebäudeumrisses auf der Karte ein- oder ausgeblendet werden soll. Gibt an, ob das Gebäudelabel ein- oder ausgeblendet werden soll.
Füllfarbe und Deckkraft des Polygons. Füllfarbe und Deckkraft des Texts.
Farbe, Deckkraft und Breite der Rahmenlinie. Farbe und Deckkraft der Textstrichfarbe.

In diesem Abschnitt werden die verschiedenen Stiloptionen für die Elemente geometry und label beschrieben.

geometry-Styler

In der folgenden Tabelle sind alle verfügbaren geometrischen Styler aufgeführt.

Styler Typ Beschreibung

visible

boolean Wenn Sie das Polygon oder die Polylinie eines Kartenelements ausblenden möchten, legen Sie false fest.

fillColor

string Passen Sie die Farbe des Polygons oder der Polylinie mit einem hexadezimalen RGB-String an.

fillOpacity

float Passen Sie die Deckkraft des Polygons oder der Polylinie an. 0 ist transparent und 1 ist undurchsichtig.

strokeColor

string Passen Sie die Farbe der Rahmenlinie mit einem hexadezimalen RGB-String an.

strokeOpacity

float Passen Sie die Deckkraft der Rahmenlinie an. 0 ist transparent und 1 ist undurchsichtig.

strokeWeight

float Passen Sie die Dicke der Rahmenlinie im Bereich von 0 bis 8 an.

Weitere Informationen finden Sie unter Polygone und Polylinien.

label-Styler

In der folgenden Tabelle sind alle verfügbaren Label-Styler aufgeführt.

Styler Typ Beschreibung

visible

boolean Wenn Sie das Label eines Kartenelements ausblenden möchten, legen Sie false fest.

textFillColor

string Passen Sie die Farbe des Textlabels mit einem hexadezimalen RGB-String an.

textFillOpacity

float Passen Sie die Deckkraft des Textlabels an. 0 ist transparent und 1 ist undurchsichtig.

textStrokeColor

string Passen Sie die Farbe der Rahmenlinie mit einem hexadezimalen RGB-String an.

textStrokeOpacity

float Passen Sie die Deckkraft der Rahmenlinie an. 0 ist transparent und 1 ist undurchsichtig.

textStrokeWeight

float Passen Sie die Dicke der Rahmenlinie im Bereich von 0 bis 8 an.

pinFillColor

string Passen Sie die Farbe der Stecknadel mit einem hexadezimalen RGB-String an.

Weitere Informationen finden Sie unter Symbole und Textlabels.

Keyzooms

Sie können einen einzelnen Stil für ein Element für alle Keyzoom-Stufen festlegen oder unterschiedliche Stile für verschiedene Keyzoom-Stufen angeben. Wenn Sie nur einen Stil angeben, wird er für alle Keyzoom-Stufen ab z0 verwendet. Wenn Sie Stile für verschiedene Keyzoom-Stufen angeben, wird der Stil ab dieser Zoomstufe bis zur nächsten von Ihnen definierten Zoomstufe angewendet.

Wenn Sie eine Keyzoom-Stufe für einen Stil festlegen möchten, definieren Sie in der Styler-Eigenschaft die Keyzoom-Stufe von z0 bis z22 und dann die Styler-Anpassung.

Im folgenden Beispiel ist die Farbe des Wassers bei den Keyzoom-Stufen 0 bis 5 schwarz, bei den Keyzoom-Stufen 6 bis 11 dunkelgrau und ab der Keyzoom-Stufe 12 hellgrau.

{
  "id": "natural.water",
  "geometry": {
    "fillColor": {
      "z0": "#000000",
      "z6": "#666666",
      "z12": "#cccccc"
    }
  }
}

Weitere Informationen finden Sie unter Zoomstufen gestalten.

Beschränkungen

Sie können mit JSON fast alles in der Google Cloud Console gestalten, mit Ausnahme der folgenden Funktionen im Menü Karteneinstellungen:

Für diese Funktionen müssen Sie Ihre Einstellungen im Menü Karteneinstellungen auswählen.