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

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

Ce produit ou cette fonctionnalité est en phase expérimentale (pré-DG). La prise en charge des fonctionnalités et produits pré-DG peut être limitée, et il se peut que les modifications apportées à ces fonctionnalités ou produits ne soient pas compatibles avec d'autres versions pré-DG. Les offres en pré-DG sont couvertes par les Conditions spécifiques du service Google Maps Platform. Pour en savoir plus, consultez les descriptions des étapes de lancement.

Le schéma JSON pour le style de carte 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.

Télécharger le schéma JSON

Pour découvrir 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 le style de carte 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 où l'on peut manger et boire.

{
  "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 globaux 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é de texte ou de repère 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 cartographique à l'aide d'une chaîne hexadécimale #RRGGBB string. Ce paramètre n'est pas compatible avec les modifications apportées à 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 une version grise de la carte.	true

Objets de règles de style

Cette section décrit les propriétés qui définissent les objets de règles de style dans le tableau styles pour personnaliser les éléments cartographiques. Chaque objet de règles de style doit se composer des éléments suivants :

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

id (élément cartographique)

La propriété id spécifie l'élément cartographique à styliser. Les noms de propriétés sont des versions en camel case des noms d'éléments cartographiques 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, tel que pointOfInterest, les styles que vous spécifiez pour le parent s'appliquent à tous ses enfants, tels que 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 :

• 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 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, texte, 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'emprise 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 de l'emprise du bâtiment doit être masqué ou affiché sur la carte.	Indique si le libellé du bâtiment doit être masqué ou affiché.
Couleur de remplissage et opacité du polygone.	Couleur de remplissage et opacité 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.

Stylers geometry

Le tableau suivant répertorie tous les stylers géométriques disponibles.

Remarque : Tous les stylers ne sont pas disponibles pour tous les éléments cartographiques.

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 dans une plage de 0 à 8.

Pour en savoir plus, consultez Polygones et polylignes.

Stylers label

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

Remarque : Tous les stylers ne sont pas disponibles pour tous les éléments cartographiques.

Styler	Type	Description
visible	booléen	Pour masquer le libellé d'un élément cartographique, définissez la valeur sur false.
textFillColor	chaîne	Personnalisez la couleur du libellé de texte 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 dans une plage 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 un élément pour tous les niveaux de keyzoom ou spécifier différents styles 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 keyzoom, le style s'appliquera à partir de ce niveau de zoom jusqu'au suivant que vous avez défini.

Pour définir un niveau de keyzoom pour un style, dans la propriété de styler, définissez le niveau de keyzoom 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 tous les éléments de la console Google Cloud, à l'exception des fonctionnalités suivantes du menu Paramètres de la carte :

• Contrôler la densité des points d'intérêt.
• Modifier le style des bâtiments.
• Modifier le style des points de repère.

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