Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps SDK for iOS

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou choisir un projet
  2. Activer Google Maps SDK for iOS
  3. Créer les clés appropriées
Continuer

Référence de style

Avec les options de style, vous pouvez personnaliser la présentation des styles de carte Google standard en modifiant le visuel de composants tels que les routes, les établissements et d'autres points d'intérêt. Vous pouvez non seulement modifier le style de ces composants, mais également les masquer complètement. Cela signifie que vous pouvez faire ressortir des composants spécifiques sur la carte ou assortir la carte au style de la page où elle se trouve.

Exemples

La déclaration de style JSON suivante définit en gris tous les composants de la carte, puis colore en bleu la géométrie des principaux axes routiers et masque entièrement les libellés des paysages :

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

L'objet JSON

Une déclaration de style JSON se compose des éléments suivants :

  • featureType (facultatif) – composants à sélectionner pour cette modification de style. Les composants sont des caractéristiques géographiques sur la carte, notamment les routes, les parcs, les plans d'eau, etc. Si vous ne spécifiez pas de composant, tous les composants sont sélectionnés.
  • elementType (facultatif) – propriété du composant spécifié à sélectionner. Les éléments sont des sous-parties d'un composant, notamment les libellés et la géométrie. Si vous ne spécifiez pas d'élément, tous les éléments du composant sont sélectionnés.
  • stylers – règles à appliquer aux composants et aux éléments sélectionnés. Les stylers indiquent la couleur, la visibilité et le poids du composant. Vous pouvez appliquer un ou plusieurs stylers à un composant.

Pour spécifier un style, vous devez combiner un ensemble de sélecteurs featureType et elementType et vos stylers dans un tableau de styles. Vous pouvez cibler n'importe quelle combinaison de composants dans un même tableau. Cependant, le nombre de styles que vous pouvez appliquer simultanément est limité. Si votre tableau de styles dépasse le nombre maximum de caractères autorisé, aucun style n'est appliqué.

Le reste de cette page contient plus d'informations sur les composants, les éléments et les stylers.

featureType

L'extrait de code JSON suivant sélectionne toutes les routes sur la carte :

{
  "featureType": "road"
}

Les composants ou les types de composants sont des caractéristiques géographiques sur la carte, notamment les routes, les parcs, les plans d'eau, les établissements et bien plus encore.

Les composants forment une arborescence de catégorie, dont la racine est all. Si vous ne spécifiez pas de composant, tous les composants sont sélectionnés. Spécifier un composant all a le même effet.

Certains composants contiennent des composants enfants que vous spécifiez à l'aide d'une notation à point. Par exemple, landscape.natural ou road.local. Si vous ne spécifiez que le composant parent, comme road, les styles que vous spécifiez pour le parent s'appliquent à tous ses enfants, comme road.local et road.highway.

Notez que les composants parents peuvent inclure des éléments qui ne sont pas inclus dans tous leurs composants enfants.

Les composants suivants sont disponibles :

  • all (par défaut) sélectionne tous les composants.
  • administrative sélectionne toutes les zones administratives. Les styles ont uniquement un effet sur les libellés des zones administratives, pas sur les frontières géographiques et le remplissage.
    • administrative.country sélectionne les pays.
    • administrative.land_parcel sélectionne les parcelles de terrain.
    • administrative.locality sélectionne les localités.
    • administrative.neighborhood sélectionne les quartiers.
    • administrative.province sélectionne les provinces.
  • landscape sélectionne tous les paysages.
    • landscape.man_made sélectionne les structures construites par l'homme.
    • landscape.natural sélectionne les composants naturels.
    • landscape.natural.landcover sélectionne les composants de couverture terrestre.
    • landscape.natural.terrain sélectionne les composants de terrain.
  • poi sélectionne tous les points d'intérêt.
    • poi.attraction sélectionne les attractions touristiques.
    • poi.business sélectionne les établissements.
    • poi.government sélectionne les bâtiments administratifs.
    • poi.medical sélectionne les services d'urgence, notamment les hôpitaux, les pharmacies, la police, les médecins, etc.
    • poi.park sélectionne les parcs.
    • poi.place_of_worship sélectionne les lieux de culte, notamment les églises, les temples, les mosquées, etc.
    • poi.school sélectionne les écoles.
    • poi.sports_complex sélectionne les complexes sportifs.
  • road sélectionne toutes les routes.
    • road.arterial sélectionne les artères principales.
    • road.highway sélectionne les autoroutes.
    • road.highway.controlled_access sélectionne les autoroutes à accès contrôlé.
    • road.local sélectionne les routes locales.
  • transit sélectionne tous les arrêts et toutes les lignes de transports en commun.
    • transit.line sélectionne toutes les lignes de transports en commun.
    • transit.station sélectionne tous les arrêts de transports en commun.
    • transit.station.airport sélectionne les aéroports.
    • transit.station.bus sélectionne les arrêts de bus.
    • transit.station.rail sélectionne les gares ferroviaires.
  • water sélectionne les plans d'eau.

elementType

L'extrait de code JSON suivant sélectionne les libellés de toutes les routes locales :

{
  "featureType": "road.local",
  "elementType": "labels"
}

Les éléments sont des subdivisions des composants. Par exemple, une route se compose d'une ligne graphique (la géométrie) sur la carte et du texte qui indique son nom (le libellé).

Les éléments suivants sont disponibles, mais notez qu'il est possible qu'un composant spécifique prenne en charge tous, certains ou aucun des éléments suivants :

  • all (par défaut) sélectionne tous les éléments du composant spécifié.
  • geometry sélectionne tous les éléments géométriques du composant spécifié.
    • geometry.fill sélectionne uniquement le remplissage de la géométrie du composant.
    • geometry.stroke sélectionne uniquement le trait de la géométrie du composant.
  • labels sélectionne les libellés textuels associés au composant spécifié.
    • labels.icon sélectionne uniquement l'icône affichée dans le libellé du composant.
    • labels.text sélectionne uniquement le texte du libellé.
    • labels.text.fill sélectionne uniquement le remplissage du libellé. Le remplissage du libellé est généralement rendu comme contour en couleur autour du texte du libellé.
    • labels.text.stroke sélectionne uniquement le trait du texte du libellé.

stylers

Les stylers sont des options de mise en forme que vous pouvez appliquer à des composants et à des éléments de la carte.

L'extrait de code JSON suivant affiche un composant en vert vif au moyen d'une valeur RVB :

"stylers": [
  { "color": "#99FF33" }
]

Cet extrait de code supprime toute l'intensité de la couleur d'un composant, quelle que soit sa couleur de départ. L'effet consiste à effectuer le rendu du composant en nuances de gris :

"stylers": [
  { "saturation": -100 }
]

Cet extrait de code masque totalement un composant :

    "stylers": [
      { "visibility": "off" }
    ]

Les options de style suivantes sont prises en charge :

  • hue (chaîne hexadécimale RVB au format #RRGGBB) indique la couleur de base.

    Remarque : Cette option définit la teinte tout en conservant la saturation et la luminosité spécifiées dans le style Google par défaut (ou dans d'autres options de style que vous avez définies sur la carte). La couleur obtenue dépend du style de la carte de base. Si Google apporte des modifications au style de la carte de base, celles-ci peuvent avoir un impact sur les composants de la carte stylisés avec cette teinte (hue). Il est préférable d'utiliser le styler color absolu, si possible.

  • lightness (valeur de point flottant comprise entre -100 et 100) indique le pourcentage de modification de la luminosité de l'élément. Les valeurs négatives réduisent la luminosité (-100 spécifie le noir) et les valeurs positives l'augmentent (+100 spécifie le blanc).

    Remarque : Cette option définit la luminosité tout en conservant la saturation et la teinte spécifiées dans le style Google par défaut (ou dans d'autres options de style que vous avez définies sur la carte). La couleur obtenue dépend du style de la carte de base. Si Google apporte des modifications au style de la carte de base, celles-ci peuvent avoir un impact sur les composants de la carte stylisés avec cette luminosité (lightness). Il est préférable d'utiliser le styler color absolu, si possible.

  • saturation (valeur de point flottant comprise entre -100 et 100) indique le pourcentage de modification de l'intensité de la couleur de base à appliquer à l'élément.

    Remarque : Cette option définit la saturation tout en conservant la teinte et la luminosité spécifiées dans le style Google par défaut (ou dans d'autres options de style que vous avez définies sur la carte). La couleur obtenue dépend du style de la carte de base. Si Google apporte des modifications au style de la carte de base, celles-ci peuvent avoir un impact sur les composants de la carte stylisés avec cette saturation. Il est préférable d'utiliser le styler color absolu, si possible.

  • gamma (valeur de point flottant comprise entre 0.01 et 10.0, où 1.0 n'applique aucune correction) indique le niveau de correction gamma à appliquer à l'élément. Les corrections gamma modifient la luminosité des couleurs d'une manière non linéaire, sans avoir d'effet sur les valeurs de blanc et de noir. La correction gamma est généralement utilisée pour modifier le contraste de plusieurs éléments. Par exemple, vous pouvez modifier le gamma pour augmenter ou réduire le contraste entre les bords et l'intérieur des éléments.

    Remarque : Cette option ajuste la luminosité du style Google par défaut à l'aide d'une courbe gamma. Si Google apporte des modifications au style de la carte de base, celles-ci peuvent avoir un impact sur les composants de la carte stylisés avec ce gamma. Il est préférable d'utiliser le styler color absolu, si possible.

  • invert_lightness (si true) inverse la luminosité existante. Cela s'avère pratique pour, par exemple, rapidement passer à une carte plus sombre avec du texte en blanc.

    Remarque : Cette option inverse simplement le style Google par défaut. Si Google apporte des modifications au style de la carte de base, celles-ci peuvent avoir un impact sur les composants de la carte stylisés avec invert_lightness. Il est préférable d'utiliser le styler color absolu, si possible.

  • visibility (on, off ou simplified) indique si et comment l'élément apparaît sur la carte. Une visibilité simplified élimine certains éléments de style des composants concernés ; les routes, par exemple, sont simplifiées en lignes plus fines sans contour, tandis que les parcs perdent le texte de leur libellé, mais conservent leur icône de libellé.
  • color (chaîne hexadécimale RVB au format #RRGGBB) définit la couleur du composant.
  • weight (chiffre entier supérieur ou égal à zéro) définit l'épaisseur du composant, en pixels. Définir l'épaisseur sur une valeur élevée peut entraîner un phénomène de rognure près du bord des tuiles.

Les règles de style sont appliquées selon l'ordre que vous spécifiez. Ne combinez pas plusieurs opérations en une seule opération de style. Définissez plutôt chaque opération sous forme d'entrée séparée dans le tableau de styles.

Remarque : L'ordre est important, car certaines opérations sont non commutatives. Les composants et/ou les éléments modifiés via des opérations de style possèdent (généralement) des styles existants. Les opérations agissent sur ces styles existants, le cas échéant.

Modèle teinte, saturation, luminosité

Les cartes stylisées utilisent le modèle teinte, saturation, luminosité (TSL) pour indiquer la couleur dans les opérations de styler. Teinte indique la couleur de base, saturation indique l'intensité de cette couleur et luminosité indique la quantité relative de blanc ou de noir dans la couleur composée.

La correction gamma modifie la luminosité de l'espace chromatique, généralement pour augmenter ou réduire le contraste. En outre, le modèle TSL définit la couleur dans un espace de coordonnées où hue (teinte) indique l'orientation dans une roue chromatique, alors que la saturation et la luminosité indiquent des amplitudes le long de différents axes. Les teintes sont mesurées à l'intérieur d'un espace de couleurs RVB, similaire à la plupart des espaces de couleurs RVB, à l'exception des nuances de blanc et de noir qui sont absentes.

Modèle Teinte, saturation, luminosité

Bien que le paramètre hue nécessite une valeur de couleur hexadécimale HTML, il l'utilise uniquement pour déterminer la couleur de base (son orientation sur la roue chromatique), et non pas sa saturation ou sa luminosité, qui sont indiquées séparément par des modifications de pourcentages.

Par exemple, vous pouvez définir la teinte d'un vert pur comme hue:0x00ff00 ou hue:0x000100. Ces deux teintes sont identiques. Ces deux valeurs renvoient au vert pur dans le modèle de couleurs TSL.

Roue chromatique RVB

Les valeurs hue RVB qui se composent à parts égales de rouge, vert et bleu ne correspondent à aucune teinte, car aucune de ces valeurs n'indique d'orientation dans l'espace de coordonnées TSL. Il s'agit, par exemple, de « #000000 » (noir), « #FFFFFF » (blanc) et de toutes les nuances de gris pur. Pour indiquer du noir, du blanc ou du gris, vous devez supprimer toute la saturation (définissez la valeur sur -100) et ajuster la valeur lightness.

De plus, lors de la modification de composants existants déjà dotés d'un modèle de couleurs, la modification d'une valeur comme hue ne modifie pas les valeurs saturation ou lightness existantes.

Envoyer des commentaires concernant…

Google Maps SDK for iOS
Google Maps SDK for iOS
Besoin d'aide ? Consultez notre page d'assistance.