Le schéma JSON pour les styles de cartes basés dans le cloud vous permet d'utiliser JSON pour personnaliser les cartes, comme vous le feriez via l'interface de l'éditeur de style. Ce document décrit le schéma JSON et explique comment effectuer des déclarations de style JSON.
Pour savoir comment modifier un style de carte à l'aide de JSON dans l'éditeur de style, ou pour importer et exporter un style de carte, consultez Utiliser JSON avec les styles de cartes basés dans le cloud.
Voir un exemple de déclaration de style JSON
La déclaration de style JSON suivante définit une couleur d'arrière-plan, puis définit des styles pour les points d'intérêt, les parcs et les plans d'eau, et masque les libellés des établissements de restauration.
{
"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"
}
}
]
}
L'objet JSON
Une déclaration de style JSON se compose d'un objet de niveau supérieur et d'un tableau de règles de style.
- Propriétés de premier niveau (facultatif) : paramètres de style globaux tels que
backgroundColoretvariant. styles: tableau d'objets de règle de style, qui peut se composer des éléments suivants :id: élément géographique à sélectionner pour cette modification de style (par exemple,pointOfInterest.recreation.park).geometry(facultatif) : éléments géométriques de l'élément géographique et règles de style à appliquer (par exemple,fillColor).label(facultatif) : libellé textuel ou repère de l'élément de carte et règles de style à appliquer (par exemple,textStrokeColor).
Propriétés de niveau supérieur
Les propriétés du tableau suivant s'appliquent à l'ensemble du style de carte.
| Propriété | Type | Description | Exemple |
|---|---|---|---|
|
Chaîne | Personnalisez la couleur d'arrière-plan de l'application de cartographie à l'aide d'une chaîne hexadécimale #RRGGBB. Ce paramètre n'est pas compatible avec les modifications de l'opacité. | "#002211" |
|
"light"|"dark" | Spécifiez le mode clair ou sombre. Si aucune valeur n'est spécifiée, la valeur par défaut est "light". | "light" |
|
booléen | Pour activer le mode monochrome, utilisez true pour obtenir une version grise de la carte. |
|
|
objet | Données clé-valeur arbitraires incluses dans la définition du style. Vous pouvez utiliser ce champ pour inclure du contenu non lié au style. Ces données ne sont pas envoyées aux clients de cartes tels que le SDK Maps JavaScript. |
|
Objets de règle de style
Cette section décrit les propriétés qui définissent les objets de règle de style dans le tableau styles pour personnaliser les éléments géographiques de la carte. Chaque objet de règle de style doit être composé des éléments suivants :
- Propriété
id. - Élément
geometryoulabelavec les propriétés de style associées définies.
id (élément de carte)
La propriété id spécifie l'élément de carte à styliser. Les noms des propriétés sont des versions en camelCase des noms des éléments de carte dans l'éditeur de style.
Les éléments cartographiques forment une arborescence de catégories. Si vous spécifiez un type d'élément parent, comme pointOfInterest, les styles que vous spécifiez pour le parent s'appliquent à tous ses enfants, comme pointOfInterest.retail et pointOfInterest.lodging.
Pour en savoir plus, consultez Hiérarchie des éléments cartographiques.
Liste des propriétés id disponibles
Les propriétés id disponibles sont les suivantes :
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
Éléments
Les éléments sont des subdivisions d'un élément cartographique. Par exemple, une route se compose d'une ligne graphique (la geometry) sur la carte et du texte qui indique son nom (le label).
Les éléments suivants sont disponibles, mais notez qu'il est possible qu'un élément cartographique spécifique prenne en charge tous, certains ou aucun des éléments suivants :
geometry: sélectionne tous les éléments géométriques (par exemple, polygone, polyligne) de l'élément cartographique spécifié.label: sélectionne tous les éléments de libellé (par exemple, le texte ou le repère) de l'élément cartographique spécifié.
Stylers
Les stylers vous permettent de définir vos règles de style pour chaque élément d'un élément cartographique.
Par exemple, pour l'empreinte d'un bâtiment, vous pouvez styliser chaque élément comme suit :
Exemples de stylers geometry pour un bâtiment |
Exemples de stylers label pour un bâtiment |
|---|---|
| Indique si le polygone d'empreinte au sol du bâtiment doit être masqué ou affiché sur la carte. | Indique si le libellé du bâtiment doit être masqué ou affiché. |
| Couleur et opacité du remplissage du polygone. | Couleur et opacité de remplissage du texte |
| Couleur, opacité et largeur de la bordure | Couleur et opacité du trait du texte |
Cette section décrit les différentes options de style disponibles pour les éléments geometry et label.
geometry stylers
Le tableau suivant liste tous les stylers géométriques disponibles.
| Styler | Type | Description |
|---|---|---|
|
booléen | Pour masquer le polygone ou la polyligne d'un élément cartographique, définissez la valeur sur false. |
|
chaîne | Personnalisez la couleur du polygone ou de la polyligne avec une chaîne hexadécimale RVB. |
|
float | Personnalisez l'opacité du polygone ou de la polyligne, où 0 correspond à transparent et 1 à opaque. |
|
chaîne | Personnalisez la couleur du contour avec une chaîne hexadécimale RVB. |
|
float | Personnalisez l'opacité du contour, où 0 correspond à transparent et 1 à opaque. |
|
float | Personnalisez l'épaisseur du contour (entre 0 et 8). |
Pour en savoir plus, consultez Polygones et polylignes.
label stylers
Le tableau suivant liste tous les stylers d'étiquettes disponibles.
| Styler | Type | Description |
|---|---|---|
|
booléen | Pour masquer le libellé d'un élément géographique, définissez-le sur false. |
|
chaîne | Personnalisez la couleur du libellé textuel avec une chaîne hexadécimale RVB. |
|
float | Personnalisez l'opacité du libellé textuel, où 0 correspond à transparent et 1 à opaque. |
|
chaîne | Personnalisez la couleur du contour avec une chaîne hexadécimale RVB. |
|
float | Personnalisez l'opacité du contour, où 0 correspond à transparent et 1 à opaque. |
|
float | Personnalisez l'épaisseur du contour (entre 0 et 8). |
|
chaîne | Personnalisez la couleur du repère à l'aide d'une chaîne hexadécimale RVB. |
|
chaîne | Personnalisez la couleur du glyphe (icône) dans un repère à l'aide d'une chaîne hexadécimale RVB. |
|
chaîne | Personnalisez la couleur du contour du repère à l'aide d'une chaîne hexadécimale RVB. |
Pour en savoir plus, consultez Icônes et libellés de texte.
Keyzooms
Vous pouvez définir un style unique pour un élément géographique pour tous les niveaux de keyzoom ou spécifier des styles différents pour différents niveaux de keyzoom. Si vous ne fournissez qu'un seul style, il sera utilisé pour tous les niveaux de Keyzoom à partir de z0. Si vous fournissez des styles pour différents niveaux de zoom clés, le style s'appliquera à partir de ce niveau de zoom jusqu'au suivant que vous avez défini.
Pour définir un niveau de zoom clé pour un style, dans la propriété du styler, définissez le niveau de zoom clé de z0 à z22, puis la personnalisation du styler.
Dans l'exemple suivant, la couleur de l'eau est noire pour les niveaux de keyzoom 0 à 5, gris foncé pour les niveaux de keyzoom 6 à 11 et gris clair à partir du niveau de keyzoom 12.
{
"id": "natural.water",
"geometry": {
"fillColor": {
"z0": "#000000",
"z6": "#666666",
"z12": "#cccccc"
}
}
}
Pour en savoir plus, consultez Appliquer un style aux niveaux de zoom.
Limites
Vous pouvez utiliser JSON pour styliser presque tout dans la console Google Cloud, à l'exception des options suivantes du menu Paramètres de la carte :
- Contrôler la densité des points d'intérêt
- Modifier l'affichage des bâtiments (empreintes ou 3D)
- Modifiez l'affichage (illustré ou standard) des points de repère.
Ces options au niveau de la carte nécessitent de récupérer à nouveau les données de tuiles pour s'afficher correctement, ce qui peut ne pas être souhaitable dans certains cas d'utilisation.
Pour ces options, vous devez sélectionner votre préférence dans le menu Paramètres de la carte.
Comme ces options ne sont pas incluses dans les styles exportés, vous devez les sélectionner à nouveau dans la console Google Cloud lors de l'importation d'un style.