Vous êtes prêt !

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

Activer Google Static Maps API

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 Static Maps API
  3. Créer les clés appropriées
Continuer

Cartes stylisées

Personnalisez la présentation de la carte Google standard en appliquant votre propre style lorsque vous utilisez Google Static Maps API. Vous pouvez modifier le visuel de composants tels que les routes, les parcs, les zones construites et d'autres points d'intérêt. Vous pouvez changer leur couleur ou leur style pour mettre en valeur un contenu particulier, compléter un contenu environnant sur la page ou même masquer entièrement des composants.

Exemples

L'exemple suivant affiche une carte de Brooklyn, aux États-Unis, avec un style qui fait apparaître les routes locales en vert vif et les zones résidentielles en noir. Il inverse également la luminosité des libellés, de manière à ce qu'ils ressortent mieux sur un fond sombre. Notez que cet exemple de travail utilise l'encodage URL :

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY

L'exemple suivant utilise des opérations de style et des simplifications pour se rapprocher de l'aspect visuel de l'atlas routier américain :

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY

Syntaxe de style

Pour créer une carte stylisée personnalisée, incluez un ou plusieurs paramètres de style dans l'URL de requête.

Chaque déclaration de style peut contenir les arguments suivants, séparés par des barres verticales (« | ») :

  • feature (facultatif) indique les composants à sélectionner pour cette modification de style. Les composants indiquent différents points d'intérêt sur la carte, comme les routes, les parcs, etc. Si aucun argument feature n'est fourni, le style spécifié s'applique à tous les composants.
  • element (facultatif) indique le ou les éléments du composant spécifié à sélectionner pour cette modification du style. Les éléments sont les caractéristiques d'un composant, comme sa géométrie ou ses libellés. Si aucun argument element n'est fourni, le style s'applique à tous les éléments du composant spécifié.
  • Un ensemble de règles de style (obligatoires) à appliquer aux composants ou éléments spécifiés. L'API applique les règles dans l'ordre dans lequel elles apparaissent dans la déclaration de style. Vous pouvez inclure n'importe quel nombre de règles, sous réserve de respecter les limites relatives à la longueur des URL de Google Static Maps API.

Remarque : la déclaration de style doit spécifier les arguments ci-dessus dans l'ordre énoncé. L'exemple suivant donne la syntaxe correcte pour une sélection de composants et d'éléments avec deux règles :

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

Composants

La déclaration de style suivante applique une couleur à toutes les routes sur la carte :

style=feature:road|color:0xffffff

Voici quelques sélections de composants courantes :

  • feature:all (par défaut) sélectionne tous les composants d'une carte.
  • feature:road sélectionne toutes les routes sur la carte.
  • feature:road.local sélectionne toutes les routes locales.

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.

Éléments

La déclaration de style suivante applique une couleur aux libellés de toutes les routes locales :

style=feature:road.local|element:labels|color:0xffffff

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é.

Règles de style

Les règles de style sont des options de mise en forme appliquées aux composants et aux éléments spécifiés dans chaque déclaration de style.

La déclaration de style suivante applique deux règles de style aux routes sur la carte. La première règle applique une couleur aux routes. La deuxième règle simplifie l'affichage des routes, afin que leurs lignes soient plus fines, sans contour :

style=feature:road|color:0xffffff|visibility:simplified

Chaque déclaration de style doit contenir une ou plusieurs opérations séparées par une barre verticale (|). Chaque opération spécifie sa valeur d'argument à l'aide des deux points (:) et toutes les opérations s'appliquent à la sélection dans l'ordre dans lequel vous les spécifiez.

Les options de style suivantes sont prises en charge :

  • hue (chaîne hexadécimale RVB au format 0xRRGGBB) 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 0xRRGGBB) 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 Static Maps API
Besoin d'aide ? Consultez notre page d'assistance.