Mit dem JSON-Schema für Cloudbasiertes Gestalten von Karteninhalten können Sie Karten mit JSON anpassen, so wie Sie es über die Benutzeroberfläche des Stileditors tun würden. In diesem Dokument werden das JSON-Schema und das Erstellen von JSON-Stildeklarationen beschrieben.
Informationen zum Bearbeiten eines Kartenstils mit JSON im Stileditor oder zum Importieren und Exportieren eines Kartenstils finden Sie unter JSON mit Cloudbasiertem Gestalten von Karteninhalten verwenden.
Beispiel für eine JSON-Stildeklaration
In der folgenden JSON-Stildeklaration wird eine Hintergrundfarbe festgelegt und dann werden Stile für POIs, Parks und Wasserflächen definiert. Außerdem werden 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 Stilregeln.
- Attribute der obersten Ebene (optional): Globale Stileinstellungen wie
backgroundColorundvariant. 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 Stilregeln (z.B.fillColor).label(optional): Das Text- oder Stecknadellabel 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 | Passen Sie die Hintergrundfarbe der Karten-App mit einem hexadezimalen RGB-String im Format #RRGGBB an. Diese Einstellung unterstützt keine Änderungen an der Deckkraft. | "#002211" |
|
"light"|"dark" | Geben Sie den hellen oder dunklen Modus an. Wenn nichts angegeben ist, wird standardmäßig „light“ verwendet. | "light" |
|
boolean | Wenn Sie den monochromen Modus 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 Inhalte zum Stil angeben, die nicht mit dem Stil zusammenhängen. Diese Daten werden nicht an Kartenclients wie das Maps JavaScript SDK gesendet. |
|
Stilregelobjekte
In diesem Abschnitt werden die Attribute beschrieben, die die Stilregelobjekte im Array styles definieren, um Kartenelemente anzupassen. Jedes Stilregelobjekt muss aus Folgendem bestehen:
- Attribut
id. - Element
geometryoderlabelmit den zugehörigen Styler-Attributen.
id (Kartenelement)
Mit dem Attribut id wird das Kartenelement angegeben, das gestaltet werden soll. Die Attributnamen 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-Attribute
Die verfügbaren id-Attribute 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. Eine Straße besteht beispielsweise aus der grafischen Linie (geometry) auf der Karte und dem Text, der ihren Namen 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: 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 Ihre Stilregeln 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 ausgeblendet oder angezeigt 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. |
| Farbe, Deckkraft und Breite des Rahmens. | Farbe und Deckkraft des Textrahmens. |
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. 0 ist transparent und 1 ist undurchsichtig. |
|
String | Passen Sie die Farbe des Rahmens mit einem hexadezimalen RGB-String an. |
|
float | Passen Sie die Deckkraft des Rahmens an. 0 ist transparent und 1 ist undurchsichtig. |
|
float | Passen Sie die Dicke des Rahmens 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 |
|---|---|---|
|
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 | Passen Sie die Farbe des Rahmens mit einem hexadezimalen RGB-String an. |
|
float | Passen Sie die Deckkraft des Rahmens an. 0 ist transparent und 1 ist undurchsichtig. |
|
float | Passen Sie die Dicke des Rahmens im Bereich von 0 bis 8 an. |
|
String | Passen Sie die Farbe der Stecknadel mit einem hexadezimalen RGB-String an. |
|
String | Passen Sie die Farbe des Glyphen (Symbols) in einer Stecknadel mit einem hexadezimalen RGB-String an. |
|
String | Passen Sie die Farbe des Stecknadelrahmens 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 im Styler-Attribut 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 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 Optionen im Menü Karteneinstellungen:
- Dichte von POIs festlegen
- Darstellung von Gebäuden ändern (Grundrisse im Vergleich zu 3D)
- Darstellung von Sehenswürdigkeiten ändern (illustriert im Vergleich zu 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 erwünscht.
Für diese Optionen müssen Sie Ihre Einstellungen im Karteneinstellungen Menü 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.