Cette page a été traduite par l'API Cloud Translation.

Référence JSON pour les styles de cartes basés dans le cloud

Sélectionnez une plate-forme : Android iOS JavaScript Services Web

Le schéma JSON pour la personnalisation de cartes dans le cloud vous permet d'utiliser JSON pour personnaliser les cartes comme vous le feriez avec l'interface de l'éditeur de style. Ce document décrit le schéma JSON et explique comment créer des déclarations de style JSON.

Télécharger le schéma JSON

Pour savoir comment modifier un style de carte à l'aide de JSON dans l'éditeur de style, ou comment importer et exporter un style de carte, consultez Utiliser JSON avec les styles de cartes basés dans le cloud.

Consulter 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 éléments aquatiques, et masque les libellés des lieux 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 premier niveau et d'un tableau de règles de style.

Paramètres de premier niveau (facultatif) : paramètres de style généraux tels que backgroundColor et variant.
styles : tableau d'objets de règles de style, qui peuvent se composer des éléments suivants :
- id : élément cartographique à sélectionner pour cette modification de style (par exemple, pointOfInterest.recreation.park).
- geometry (facultatif) : éléments géométriques de l'élément cartographique et règles de style à appliquer (par exemple, fillColor).
- label (facultatif) : libellé textuel ou d'épingle de l'élément cartographique et règles de style à appliquer (par exemple, textStrokeColor).

Paramètres de premier niveau

Les propriétés du tableau suivant s'appliquent à l'ensemble du style de carte.

Propriété	Type	Description	Exemple
`backgroundColor`	Chaîne	Personnalisez la couleur d'arrière-plan de l'application de carte à l'aide d'une chaîne hexadécimale #RRGGBB. Ce paramètre n'est pas compatible avec les modifications de l'opacité.	"#002211"
`variant`	"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"
`monochrome`	booléen	Pour activer le mode monochrome, utilisez `true` pour afficher une version grise de la carte.	`true`

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 cartographiques. Chaque objet de règle de style doit se composer des éléments suivants :

Propriété id.
Élément geometry ou label avec les propriétés de style associées définies.

`id` (fonctionnalité de cartographie)

La propriété id spécifie l'élément de carte à styliser. Les noms de propriétés sont des versions en casse mixte des noms de caractéristiques de la 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

Voici les propriétés id disponibles :

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

Éléments

Les éléments sont des subdivisions d'un élément de carte. 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 ou polyligne) de l'élément cartographique spécifié.
label : sélectionne tous les éléments de libellé (par exemple, le texte et l'épingle) de l'élément de carte spécifié.

Stylers

Les stylers vous permettent de définir vos règles de style pour chaque élément d'une entité cartographique.

Par exemple, pour une emprise au sol, vous pouvez styliser chaque élément comme suit :

Exemple de styles `geometry` pour un bâtiment	Exemple de styles `label` pour un bâtiment
Indique si le polygone de l'emprise du bâtiment doit être masqué ou affiché sur la carte.	Indique s'il faut masquer ou afficher le libellé du bâtiment.
Couleur et opacité de remplissage du polygone.	Couleur et opacité du 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 répertorie tous les stylers géométriques disponibles.

Styler	Type	Description
`visible`	booléen	Pour masquer le polygone ou la polyligne d'un élément cartographique, définissez la valeur sur `false`.
`fillColor`	chaîne	Personnalisez la couleur du polygone ou de la polyligne avec une chaîne hexadécimale RVB.
`fillOpacity`	float	Personnalisez l'opacité du polygone ou de la polyligne, où 0 correspond à transparent et 1 à opaque.
`strokeColor`	chaîne	Personnalisez la couleur du contour avec une chaîne hexadécimale RVB.
`strokeOpacity`	float	Personnalisez l'opacité du contour, où 0 correspond à transparent et 1 à opaque.
`strokeWeight`	float	Personnalisez l'épaisseur du contour (de 0 à 8).

Pour en savoir plus, consultez Polygones et polylignes.

`label` stylers

Le tableau suivant répertorie tous les stylers de libellés disponibles.

Styler	Type	Description
`visible`	booléen	Pour masquer le libellé d'une entité cartographique, définissez la valeur sur `false`.
`textFillColor`	chaîne	Personnalisez la couleur du libellé textuel avec une chaîne hexadécimale RVB.
`textFillOpacity`	float	Personnalisez l'opacité du libellé de texte, où 0 correspond à transparent et 1 à opaque.
`textStrokeColor`	chaîne	Personnalisez la couleur du contour avec une chaîne hexadécimale RVB.
`textStrokeOpacity`	float	Personnalisez l'opacité du contour, où 0 correspond à transparent et 1 à opaque.
`textStrokeWeight`	float	Personnalisez l'épaisseur du contour (de 0 à 8).
`pinFillColor`	chaîne	Personnalisez la couleur du repère avec 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 une caractéristique pour tous les niveaux de zoom ou spécifier différents styles pour différents niveaux de zoom. Si vous ne fournissez qu'un seul style, il sera utilisé pour tous les niveaux de zoom clés à partir de z0. Si vous fournissez des styles pour différents niveaux de zoom, le style s'appliquera à partir de ce niveau de zoom jusqu'au prochain que vous avez défini.

Pour définir un niveau de zoom clé pour un style, dans la propriété de style, définissez le niveau de zoom clé de z0 à z22, puis la personnalisation du style.

Dans l'exemple suivant, la couleur de l'eau est noire pour les niveaux de zoom clés 0 à 5, gris foncé pour les niveaux de zoom clés 6 à 11 et gris clair à partir du niveau de zoom clé 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 tous les éléments de la console Google Cloud, à l'exception des fonctionnalités suivantes du menu Paramètres de la carte :

Pour ces fonctionnalités, vous devez sélectionner votre préférence dans le menu Paramètres de la carte .