Modifier l'apparence et les couleurs de la carte avec 'style'

Utiliser le paramètre feature pour modifier l'apparence d'une carte statique

Vous pouvez désormais personnaliser les cartes statiques Google. Autrement dit, il est possible de modifier l'aspect visuel de certains éléments présents sur la carte (route, forêt, constructions, etc.).

Ceci vous permet de mettre l'accent sur un point particulier ou certaines zones de votre carte.

Pour cela, nous allons utiliser les paramètres suivants :

• feature,
• element,
• et des régles de style.

feature

Une carte est composée d'un ensemble de caractéristiques, telles que des routes ou des parcs.

Les différents types de caractéristiques forment une arborescence de catégories, ou feature:all correspondant à la racine.

Certaines caractéristiques communes sont énumérées ci-dessous:

• feature:all (par défaut) sélectionne toutes les caractéristiques de la carte.
• feature:road sélectionne toutes les routes sur la carte.
• feature:landscape sélectionne tous les paysages en arrière-plan sur une carte. Il s'agit, le plus souvent, de la zone située entre les routes par exemple. Dans les villes, le paysage se compose généralement de zones bâties.

La liste complète des caractéristiques pouvant être sélectionnées dans une carte est présentée dans MapTypeStyleFeatureType.

Certaines catégories de caractéristiques contiennent des sous-catégories qui sont spécifiées à l'aide de la notation pointée (Exemple : landscape.natural ou road.local). Si l'élément parent (Exemple : road) est spécifié, alors le style sera appliqué à toutes les routes, y compris ses éléments enfants (pour road il s'agit de road.arterial, road.highway et road.local).

element

En outre, certaines caractéristiques (feature) sur une carte sont constituées généralement de différents éléments (element).

Une route, par exemple, se compose non seulement de la ligne graphique la représentant sur la carte, mais également du texte précisant son nom sur la carte.

Les éléments (element) compris au sein d'une caractéristiques (feature) sont choisis en déclarant un argument element.

Les valeurs de l'argument element suivantes sont supportées :

• element:all (par défaut) sélectionne toutes les éléments (element) de cette caractéristique (feature).
• element:geometry sélectionne uniquement les éléments (element) géométriques de cette caractéristique (feature).
• element:labels sélectionne uniquement les étiquettes textuelles associées à cette caractéristique. (feature)

Si aucun argument element est passé, les styles seront appliqués à tous les éléments (element) de la caractéristique (feature) indépendamment du type d'élément (element).

La déclaration de style suivante sélectionne les étiquettes textuelles pour toutes les routes locales :

style=feature:road.local|element:labels

Régles de style

Les règles de style sont des options de formatage qui sont appliquées aux caractéristiques (feature) et aux éléments (element) spécifiés dans chaque déclaration de style.

Chaque déclaration de style doit contenir une ou plusieurs opérations séparées en utilisant le caractère ("|") pipe.

Chaque opération spécifie sa valeur d'argument en utilisant le caractère deux points (":"), et toutes les opérations sont appliquées à la sélection dans l'ordre dans lequel elles sont indiquées.

Voici une liste des arguments opération et de leurs valeurs actuellement supportés :

• hue: indique la couleur de base à appliquer à la sélection. Il s'agit d'une chaîne hexadécimale RVB (Rouge Vert Bleu) dont le format est : 0xRRVBB.
• lightness: valeur à virgule flottante comprise entre -100 et 100. Elle indique la variation de luminosité, en pourcentage, de l'élément. Les valeurs négative augmentent l'opacité (-100 correspond à noir). Les valeurs positives augmentent la luminosité (100 correspond à blanc).
• saturation: valeur à virgule flottante comprise entre -100 et 100. Elle indique la variation, en pourcentage, de l'intensité de la couleur de base à appliquer à l'élément.
• gamma: valeur à virgule flottante comprise entre 0.01 et 10.0, ou 1.0 applique aucune correction. indique la correction gamma à appliquer à l'élément. Les gammas modifient les nuances de teintes de façon non linéaire, sans affecter les valeurs blanches ou noires. Les gammas sont généralement utilisés pour modifier le contraste de plusieurs éléments. Par exemple, vous pourriez modifier le gamma pour augmenter ou diminuer le contraste entre les bords et l'intérieur des éléments. Des valeurs de gamma basses (<1) augmentent le contraste, tandis que des valeurs élevées (> 1) diminuent le contraste.
• inverse_lightness:true: inverse simplement la luminosité actuelle.
• visibility (on, off, ou simplified): Indique que la carte devrait simplifier la présentation de ces éléments comme il l'entend. (Une structure simplifiée de route peut montrer moins de routes, par exemple.)

Les règles de style doivent être appliquées à des opérations séparées et distinctes, et sont appliquées dans l'ordre où ells apparaissent dans la déclaration de style.

L'ordre est important, car certaines opérations ne sont pas commutatives.

Les caractéristiques (feature) et / ou éléments (element) qui sont modifiés par des opérations de style, ont déjà (en général) des styles existants; les opérations agissent sur ces styles existants, s'ils sont présents.

Notez que Google utilise le modèle (HSL) (H=Hue=Teinte, S=Saturation, L=Lightness=Luminosité) pour désigner la couleur dans les opérations liées au style.

Ces opérations pour définir la couleur sont courantes dans la conception graphique.

Hue indique la teinte de base, la Saturation indique l'intensité de cette couleur, et Lightness indique la quantité relative de blanc ou noir dans la couleur constituante.

Les trois valeurs HSL peuvent être mappées à des valeurs RVB (et vice versa).

La correction Gamma agit afin de modifier la saturation sur l'espace coloré, généralement pour augmenter ou diminuer le contraste.

De plus, le modèle HSL définit la couleur dans un espace de coordonnées où la teinte (hue) indique l'orientation dans une roue chromatique, tandis que la saturation et la luminosité indiquent des amplitudes le long des différents axes.

Les teintes Hue sont mesurées dans un espace colorimétrique RVB, qui est semblable à la plupart des espaces de couleurs RVB, sauf que les nuances de blanc et de noir sont absentes.

Attention :

Tandis que la teinte prend une valeur de couleur RVB hexadécimal, elle utilise uniquement cette valeur pour déterminer la couleur de base (son orientation autour de la roue chromatique), et non pas sa saturation ou sa luminosité, qui sont indiquées séparément, sous forme de variation en pourcentage.

Par exemple, la teinte du vert pur peut être définie ainsi hue: 0x00FF00 ou hue: 0x000100 et les deux teintes seront identiques (Les deux valeurs de point vert pur dans le modèle de couleur HSL.)

Les valeurs de teinte RVB, qui se composent de parties égales Rouge, Vert et Bleu - telles que hue: 0x0000000 (pour le noir) et hue: 0xFFFFFF (pour le blanc) et toutes les nuances de gris pur - n'indiquent pas une couleur que ce soit, car aucun de ces valeurs indiquent une orientation dans le HSL espace de coordonnées.

Pour indiquer noir, blanc ou gris, vous devez supprimer toute saturation (saturation: -100) et ajuster à la place la luminosité lightness.

En outre, en modifiant les caractéristiques (feature) existantes qui ont déjà un jeu de couleurs, le changement d'une valeur telle que la teinte (hue) ne change pas sa saturation (saturation) ou luminosité( lightness) existants.

L'exemple suivant affiche une carte de la ville de Tours où :

• les routes locales ont été modifiées en vert clair,
  • feature:road.local
  • element:geometry
  • hue:0x00ff00
  • saturation:100
• les zones résidentielles ont été changées en noir.
  • feature:landscape
  • element:geometry
  • lightness:-100

http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=640x320&center=Tours,FR&zoom=13&style=feature:road.local|element:geometry|hue:0x00ff00|saturation:100&style=feature:landscape|element:geometry|lightness:-100

L'exemple suivant, plus complexe, utilise plusieurs opérations et simplifications.

Sept règles de style ont été nécessaires pour construire cette carte :

• style=feature:road.highway|element:geometry|hue:0xff0022|saturation:60|lightness:-20
• style=feature:road.arterial|element:all|hue:0x2200ff|lightness:-40:visibility:simplified|saturation:30
• style=feature:road.local|element:all|hue:0xf6ff00|saturation:50|gamma:0.7|visibility:simplified
• style=feature:water|element:geometry|saturation:40|lightness:40
• style=feature:road.highway|element:labels|visibility:on|saturation:98
• style=feature:administrative.locality|element:labels|hue:0x0022ff|saturation:50|lightness:-10|gamma:0.9
• style=feature:transit.line|element:geometry|hue:0xff0000|visibility:on|lightness:-70

http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=640x320&zoom=11&center=Tours,FR&style=feature:road.highway|element:geometry|hue:0xff0022|saturation:60|lightness:-20&style=feature:road.arterial|element:all|hue:0x2200ff|lightness:-40|visibility:simplified|saturation:30&style=feature:road.local|element:all|hue:0xf6ff00|saturation:50|gamma:0.7|visibility:simplified&style=feature:water|element:geometry|saturation:40|lightness:40&style=feature:road.highway|element:labels|visibility:on|saturation:98&style=feature:administrative.locality|element:labels|hue:0x0022ff|saturation:50|lightness:-10|gamma:0.9&style=feature:transit.line|element:geometry|hue:0xff0000|visibility:on|lightness:-70