Mit dem JSON-Schema für das cloudbasierte Gestalten von Karteninhalten können Sie benutzerdefinierte Karten mit JSON genauso anpassen wie über die Oberfläche des Stil-Editors. In diesem Dokument werden das JSON-Schema und die Erstellung von JSON-Stildeklarationen beschrieben.
Informationen zum Bearbeiten eines Kartenstils mit JSON im Stileditor sowie zum Importieren und Exportieren eines Kartenstils finden Sie unter JSON mit cloudbasiertem Gestalten von Karteninhalten verwenden.
Beispiel für eine JSON-Stildeklaration
Mit der folgenden JSON-Stildeklaration wird eine Hintergrundfarbe festgelegt und dann werden Stile für POIs, Parks und Gewässer definiert. Außerdem werden Labels für Restaurants und Cafés 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 auf oberster Ebene und einem Array von Stilregeln.
- Eigenschaften auf oberster Ebene (optional): Globale Stileinstellungen wie
backgroundColorundvariant. styles: Ein Array von Stilregelobjekten, die Folgendes enthalten können: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 Stilregeln (z.B.fillColor).label(optional): Der Text oder das Pin-Label des Kartenelements und die anzuwendenden Stilregeln (z.B.textStrokeColor).
Attribute der obersten Ebene
Die Attribute in der folgenden Tabelle gelten für den gesamten Kartenstil.
| Attribut | Typ | Beschreibung | Beispiel |
|---|---|---|---|
|
String | Sie können die Hintergrundfarbe der Karten-App mit einem Hexadezimalstring im Format #RRGGBB anpassen. Bei dieser Einstellung kann die Deckkraft nicht geändert werden. | "#002211" |
|
"light"|"dark" | Geben Sie den hellen oder dunklen Modus an. Wenn nichts anderes angegeben wird, wird der Wert standardmäßig auf „light“ gesetzt. | „light“ |
|
boolean | Wenn Sie die monochrome Darstellung aktivieren möchten, verwenden Sie true für eine graue Version der Karte. |
|
|
Objekt | Beliebige Schlüssel/Wert-Daten, die in der Stildefinition enthalten sind. In diesem Feld können Sie nicht stilbezogene Inhalte zum Stil angeben. Diese Daten werden nicht an Kartenclients wie das Maps JavaScript SDK gesendet. |
|
Stilregelobjekte
In diesem Abschnitt werden die Eigenschaften beschrieben, mit denen die Stilregelobjekte im Array styles definiert werden, um Kartenelemente anzupassen. Jedes Stilregelobjekt muss Folgendes enthalten:
id-Attribut.geometry- oderlabel-Element mit den zugehörigen Styler-Eigenschaften.
id (Kartenelement)
Mit der Eigenschaft id wird das Kartenelement angegeben, das gestaltet werden soll. Die Attributnamen sind CamelCase-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
Folgende id-Eigenschaften sind verfügbar:
pointOfInterestpointOfInterest.emergencypointOfInterest.emergency.firepointOfInterest.emergency.hospitalpointOfInterest.emergency.pharmacypointOfInterest.emergency.policepointOfInterest.entertainmentpointOfInterest.entertainment.artspointOfInterest.entertainment.casinopointOfInterest.entertainment.cinemapointOfInterest.entertainment.historicpointOfInterest.entertainment.museumpointOfInterest.entertainment.themeParkpointOfInterest.entertainment.touristAttractionpointOfInterest.foodAndDrinkpointOfInterest.foodAndDrink.barpointOfInterest.foodAndDrink.cafepointOfInterest.foodAndDrink.restaurantpointOfInterest.foodAndDrink.winerypointOfInterest.landmarkpointOfInterest.lodgingpointOfInterest.recreationpointOfInterest.recreation.beachpointOfInterest.recreation.boatingpointOfInterest.recreation.fishingpointOfInterest.recreation.golfCoursepointOfInterest.recreation.hotSpringpointOfInterest.recreation.natureReservepointOfInterest.recreation.parkpointOfInterest.recreation.peakpointOfInterest.recreation.sportsComplexpointOfInterest.recreation.sportsFieldpointOfInterest.recreation.trailheadpointOfInterest.recreation.zoopointOfInterest.retailpointOfInterest.retail.grocerypointOfInterest.retail.shoppingpointOfInterest.servicepointOfInterest.service.atmpointOfInterest.service.bankpointOfInterest.service.carRentalpointOfInterest.service.evChargingpointOfInterest.service.gasStationpointOfInterest.service.parkingLotpointOfInterest.service.postOfficepointOfInterest.service.restStoppointOfInterest.service.restroompointOfInterest.transitpointOfInterest.transit.airportpointOfInterest.otherpointOfInterest.other.bridgepointOfInterest.other.cemeterypointOfInterest.other.governmentpointOfInterest.other.librarypointOfInterest.other.militarypointOfInterest.other.placeOfWorshippointOfInterest.other.schoolpointOfInterest.other.townSquarepoliticalpolitical.countryOrRegionpolitical.borderpolitical.reservationpolitical.stateOrProvincepolitical.citypolitical.sublocalitypolitical.neighborhoodpolitical.landParcelinfrastructureinfrastructure.buildinginfrastructure.building.commercialinfrastructure.businessCorridorinfrastructure.roadNetworkinfrastructure.roadNetwork.noTrafficinfrastructure.roadNetwork.noTraffic.pedestrianMallinfrastructure.roadNetwork.noTraffic.trailinfrastructure.roadNetwork.noTraffic.trail.pavedinfrastructure.roadNetwork.noTraffic.trail.unpavedinfrastructure.roadNetwork.parkingAisleinfrastructure.roadNetwork.rampinfrastructure.roadNetwork.roadinfrastructure.roadNetwork.road.arterialinfrastructure.roadNetwork.road.highwayinfrastructure.roadNetwork.road.localinfrastructure.roadNetwork.road.noOutletinfrastructure.roadNetwork.roadShieldinfrastructure.roadNetwork.roadSigninfrastructure.roadNetwork.roadDetailinfrastructure.roadNetwork.roadDetail.surfaceinfrastructure.roadNetwork.roadDetail.crosswalkinfrastructure.roadNetwork.roadDetail.sidewalkinfrastructure.roadNetwork.roadDetail.intersectioninfrastructure.railwayTrackinfrastructure.railwayTrack.commercialinfrastructure.railwayTrack.commuterinfrastructure.transitStationinfrastructure.transitStation.bicycleShareinfrastructure.transitStation.busStationinfrastructure.transitStation.ferryTerminalinfrastructure.transitStation.funicularStationinfrastructure.transitStation.gondolaStationinfrastructure.transitStation.monorailinfrastructure.transitStation.railStationinfrastructure.transitStation.railStation.subwayStationinfrastructure.transitStation.railStation.tramStationinfrastructure.urbanAreanaturalnatural.continentnatural.archipelagonatural.islandnatural.landnatural.land.landCovernatural.land.landCover.cropsnatural.land.landCover.dryCropsnatural.land.landCover.forestnatural.land.landCover.icenatural.land.landCover.sandnatural.land.landCover.shrubnatural.land.landCover.tundranatural.waternatural.water.oceannatural.water.lakenatural.water.rivernatural.water.othernatural.base
Elemente
Ein Kartenelement besteht aus verschiedenen Unterelementen. Beispielsweise besteht eine Straße aus der Liniengrafik (geometry) auf der Karte sowie dem Text, der den Straßennamen angibt (label).
Die folgenden Unterelemente 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: Zum Auswählen aller geometrischen Unterelemente (z.B. Polygon, Polylinie) des angegebenen Kartenelements.label: Zum Auswählen aller Labelelemente (z.B. Text, Markierung) des angegebenen Kartenelements.
Styler
Mit Stylern definieren Sie die Stilregeln für jedes Unterelement eines Kartenelements.
Für einen Gebäudegrundriss 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 des Rahmens | Farbe und Deckkraft des Textstrichs |
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 |
|---|---|---|
|
boolean | Wenn Sie das Polygon oder die Polylinie eines Kartenelements ausblenden möchten, legen Sie false fest. |
|
String | Passen Sie die Farbe des Polygons oder der Polylinie mit einem hexadezimalen RGB-String an. |
|
float | Passen Sie die Deckkraft des Polygons oder der Polylinie an, wobei 0 transparent und 1 undurchsichtig ist. |
|
String | Passen Sie die Farbe des Umrisses mit einem RGB-Hexadezimalstring an. |
|
float | Passen Sie die Deckkraft der Kontur an, wobei 0 transparent und 1 deckend ist. |
|
float | Passen Sie die Stärke der Kontur an. Sie können einen Wert zwischen 0 und 8 auswählen. |
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 |
|---|---|---|
|
boolean | Wenn Sie das Label eines Kartenelements ausblenden möchten, setzen Sie es auf false. |
|
String | Passen Sie die Farbe des Textlabels mit einem RGB-Hexadezimalstring an. |
|
float | Passen Sie die Deckkraft des Textlabels an, wobei 0 transparent und 1 undurchsichtig ist. |
|
String | Passen Sie die Farbe des Umrisses mit einem RGB-Hexadezimalstring an. |
|
float | Passen Sie die Deckkraft der Kontur an, wobei 0 transparent und 1 deckend ist. |
|
float | Passen Sie die Stärke der Kontur an. Sie können einen Wert zwischen 0 und 8 auswählen. |
|
String | Passen Sie die Farbe der Stecknadel mit einem RGB-Hexadezimalstring an. |
|
String | Sie können die Farbe der Glyphe (Symbol) in einer Markierung mit einem hexadezimalen RGB-String anpassen. |
|
String | Passen Sie die Farbe des Umrisses des Markierungssymbols mit einem hexadezimalen RGB-String an. |
Weitere Informationen finden Sie unter Symbole und Textlabels.
Keyzooms
Sie können für ein Element einen einzelnen Stil für alle Keyzoom-Stufen festlegen oder verschiedene Stile für unterschiedliche 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, gilt der Stil von dieser Zoomstufe bis zur nächsten, die Sie definiert haben.
Wenn Sie eine Keyzoom-Stufe für einen Stil festlegen möchten, definieren Sie in der Styler-Property die Keyzoom-Stufe von z0 bis z22 und dann die Styler-Anpassung.
Im folgenden Beispiel ist die Wasserfarbe bei den Keyzoom-Stufen 0–5 schwarz, bei den Keyzoom-Stufen 6–11 dunkelgrau und ab Keyzoom-Stufe 12 hellgrau.
{
"id": "natural.water",
"geometry": {
"fillColor": {
"z0": "#000000",
"z6": "#666666",
"z12": "#cccccc"
}
}
}
Weitere Informationen finden Sie unter Zoomstufen gestalten.
Beschränkungen
Mit JSON können Sie fast alles in der Google Cloud Console gestalten, mit Ausnahme der folgenden Optionen im Menü Karteneinstellungen:
- Dichte von POIs festlegen
- Darstellung von Gebäuden ändern (Grundrisse oder 3D)
- Anzeige von Sehenswürdigkeiten ändern (illustriert oder Standard)
Für diese Optionen auf Kartenebene müssen die Kacheldaten neu abgerufen werden, damit sie korrekt gerendert werden. Das ist für bestimmte Anwendungsfälle möglicherweise nicht wünschenswert.
Für diese Optionen müssen Sie Ihre Einstellung im Menü Karteneinstellungen auswählen.
Da diese Optionen nicht in exportierten Stilen enthalten sind, müssen sie beim Importieren eines Stils in der Google Cloud Console noch einmal ausgewählt werden.