Mit dem JSON-Schema für cloudbasierte Kartenstile können Sie Karten mit JSON anpassen, genau wie über die Benutzeroberfläche des Stileditors. In diesem Dokument wird das JSON-Schema beschrieben und es wird erläutert, wie JSON-Stildeklarationen erstellt werden.
Informationen zum Bearbeiten eines Kartenstils mit JSON im Design-Editor 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. Anschließend werden Stile für POIs, Parks und Gewässer definiert und Labels für Orte, an denen es Essen und Trinken gibt, werden 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 Stilregeln.
- Properties auf höchster Ebene (optional): Globale Stileinstellungen wie
backgroundColorundvariant. styles: Ein Array von Stilregelobjekten, das aus Folgendem bestehen 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 Stilregeln (z.B.fillColor).label(optional): Das Text- oder Pinsymbol 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 #RRGGBB-Hexadezimalstring anpassen. Bei dieser Einstellung kann die Deckkraft nicht geändert werden. | "#002211" |
|
„light“ | „dark“ | Geben Sie den hellen oder dunklen Modus an. Wenn nichts angegeben ist, wird standardmäßig „light“ verwendet. | „light“ |
|
boolean | Verwenden Sie true, um die Karte in Graustufen darzustellen. |
|
|
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. |
|
Formatregelobjekte
In diesem Abschnitt werden die Eigenschaften beschrieben, mit denen die Stilregelobjekte im styles-Array zum Anpassen von Kartenelementen definiert werden. Jedes Stilregelobjekt muss aus Folgendem bestehen:
id-Attribut.geometry- oderlabel-Element mit den zugehörigen Styler-Attributen.
id (Kartenfunktion)
Mit der Eigenschaft id wird das Kartenobjekt angegeben, das formatiert werden soll. Die Eigenschaftsnamen sind CamelCase-Versionen der Namen der Kartenelemente im Design-Editor.
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-Properties
Die verfügbaren id-Eigenschaften sind:
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
Elemente sind Unterteilungen 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 sind verfügbar. Beachten Sie jedoch, dass ein bestimmtes Kartenelement möglicherweise keines, einige oder alle Elemente unterstützt:
geometry: Wählt alle geometrischen Elemente (z.B. Polygon, Polylinie) des angegebenen Kartenelements aus.label: Wählt alle Label-Elemente (z.B. Text, Markierung) des angegebenen Kartenelements aus.
Styler
Mit Stylern definieren Sie Ihre Stilregeln für jedes Element eines Kartenelements.
Für einen Gebäudeumriss können Sie beispielsweise die einzelnen Elemente 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 ausgeblendet oder angezeigt werden soll. |
| Füllfarbe und Deckkraft des Polygons. | Füllfarbe und Deckkraft des Texts |
| Rahmenfarbe, -deckkraft und -breite | 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. Der Wert 0 steht für transparent und der Wert 1 für undurchsichtig. |
|
String | Die Farbe des Umrisses kann mit einem hexadezimalen RGB-String angepasst werden. |
|
float | Sie können die Deckkraft des Umrisses anpassen. Dabei steht 0 für transparent und 1 für undurchsichtig. |
|
float | Sie können die Stärke des Umrisses in einem Bereich von 0 bis 8 anpassen. |
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, legen Sie false fest. |
|
String | Passen Sie die Farbe des Textlabels mit einem hexadezimalen RGB-String an. |
|
float | Passen Sie die Deckkraft des Textlabels an. 0 ist transparent und 1 ist undurchsichtig. |
|
String | Die Farbe des Umrisses kann mit einem hexadezimalen RGB-String angepasst werden. |
|
float | Sie können die Deckkraft des Umrisses anpassen. Dabei steht 0 für transparent und 1 für undurchsichtig. |
|
float | Sie können die Stärke des Umrisses in einem Bereich von 0 bis 8 anpassen. |
|
String | Passen Sie die Farbe der Markierung mit einem hexadezimalen RGB-String an. |
|
String | Sie können die Farbe des Glyphen (Symbols) in einer Markierung mit einem hexadezimalen RGB-String anpassen. |
|
String | Sie können die Farbe des Markierungssymbols mit einem hexadezimalen RGB-String anpassen. |
Weitere Informationen finden Sie unter Symbole und Textlabels.
Keyzooms
Sie können einen einzelnen Stil für ein Feature für alle Keyzoom-Stufen festlegen oder unterschiedliche Stile für verschiedene Keyzoom-Stufen angeben. Wenn Sie nur einen Stil angeben, wird dieser 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 angewendet.
Wenn Sie eine Keyzoom-Stufe für einen Stil festlegen möchten, definieren Sie in der Stiler-Property die Keyzoom-Stufe von z0 bis z22 und dann die Stiler-Anpassung.
Im folgenden Beispiel ist die Wasserfarbe bei den Keyzoom-Stufen 0 bis 5 Schwarz, bei den Keyzoom-Stufen 6 bis 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 im Vergleich zu 3D)
- Darstellung von Sehenswürdigkeiten ändern (illustriert oder Standard).
Für diese Optionen auf Kartenebene müssen Kacheldaten neu abgerufen werden, damit sie richtig gerendert werden. Das ist für bestimmte Anwendungsfälle möglicherweise nicht wünschenswert.
Für diese Optionen müssen Sie Ihre bevorzugte 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 neu ausgewählt werden.