Aller au contenu principal

Style de carte

Un fichier de style MapCSS est composé de règles appliquées à chaque objet de haut en bas.

Par exemple, ce style :

node[natural=tree] {
    icon-image: "tree.svg";
}

affiche l’image tree.svg aux points dont la balise natural vaut tree.

Chaque règle comporte deux parties : le filtre node[natural=tree] et les paramètres d’affichage icon-image: tree.svg;. Le filtre détermine les objets auxquels les paramètres s’appliquent.

Les règles peuvent être imbriquées et définir des paramètres à chaque niveau.

|z16- {
    icon-scale: 0.50;
    icon-tint: @color_icon_tint;

    [amenity=bicycle_parking] {
        icon-image: "bike_parking.svg";
    }
    [amenity=bicycle_rental] {
        icon-image: "bike_rental.svg";
    }
    [amenity=bicycle_repair_station] {
        icon-image: "bike_service.svg";
    }
}

Les règles imbriquées gardent le style court et structuré : les paramètres communs ne sont définis qu’une fois au lieu d’être répétés dans plusieurs blocs.

Cette documentation décrit le dialecte MapCSS de Guru Maps. Certains paramètres du langage d’origine ne sont pas implémentés ; en revanche, des macros de préprocesseur, des règles imbriquées et des fonctions supplémentaires pour les expressions calculées sont disponibles. Le style utilisé par Guru Maps se trouve dans son dépôt.

Filtres​

Prenons un filtre complexe :

node,area|z14-[boundary=forest_compartment][ref]

Il est composé de :

  1. Le filtre de type node,area : utilisez node pour les points, line pour les lignes et area pour les polygones. Séparez plusieurs types par une virgule. Avec *, le type n’a pas d’importance. canvas sélectionne le fond de carte.
  2. Le filtre de zoom z14- : il définit les niveaux de zoom auxquels la règle s’applique. Vous pouvez indiquer uniquement un niveau minimal, comme z8-, uniquement un niveau maximal, comme z-9, un seul niveau, comme z12, ou un intervalle, comme z3-9. Les deux bornes d’un intervalle sont incluses : z3-9 s’applique aux niveaux de zoom 3 à 9.
  3. Les filtres de balises [boundary=forest_compartment][ref] : ils ne conservent que les objets dont la balise boundary vaut forest_compartment et dont la balise ref possède une valeur quelconque. Pour conserver les objets sans balise ref, utilisez le filtre [!ref].

Chaque partie est facultative. Un filtre de zoom peut exister seul, comme |z16- dans l’exemple ci-dessus.

Filtres de balises​

FiltreConserve les objets dont
[ref]la balise ref est présente
[!ref]la balise ref est absente
[highway=primary]la valeur est égale à primary
[highway!=primary]la valeur n’est pas primary
[population>100000]la valeur est supérieure ; <, >= et <= fonctionnent de la même façon
[ele%100]la valeur est un multiple de 100
[ref^=E]la valeur commence par E
[name$=Street]la valeur se termine par Street
[name*=Park]la valeur contient Park
[cuisine~=pizza]pizza fait partie des valeurs séparées par ;, comme dans pizza;burger

Les comparaisons >, <, >= et <= comparent des nombres lorsque les deux valeurs sont des nombres, et du texte dans les autres cas.

Placez une valeur entre guillemets doubles si elle contient une apostrophe, un guillemet ou ], ou si elle commence ou se termine par une espace :

[name="McDonald's"],
[ref^="B "] {
    icon-image: "logo.svg";
}

Une valeur entre guillemets ne peut pas contenir {, }, ;, @ ni //.

Regroupement de filtres​

Plusieurs filtres peuvent être séparés par des virgules :

node,area|z14-[boundary=forest_compartment][ref],
node,area|z14-[boundary=forestry_compartment][ref]

Les paramètres communs peuvent être déplacés vers un niveau supérieur :

node,area|z14-[ref] {
    [boundary=forest_compartment],
    [boundary=forestry_compartment] {

    }
}

Pour regrouper plusieurs règles sans ouvrir immédiatement un bloc, placez les filtres entre parenthèses :

node,area|z14-[ref](
    [boundary=forest_compartment],
    [boundary=forestry_compartment]) {
}

Un filtre de zoom peut s’appliquer à tout un groupe :

|z11-([highway=trunk], [highway=primary]) {
    shield-image: "shield.svg";
}

Filtres de relations​

relation[...] conserve les objets qui appartiennent à une relation portant les balises indiquées. Par exemple, les tronçons des itinéraires de randonnée :

relation[type=route][route=hiking] {
    line|z9- {
        color: #0000ff80;
        width: 2pt;
    }
}

La fonction relationTag lit les balises de cette relation, et per-relation dessine un tronçon une fois pour chacune de ses relations.

Macros du préprocesseur​

Le préprocesseur prépare le style avant son analyse. Il remplace des valeurs et active ou désactive des blocs selon les paramètres.

Macros de substitution​

@import​

Insère le contenu d’un fichier :

@import "polygons.mapcss";

@{name}​

Insère la valeur d’une macro à chaque endroit où elle est utilisée :

// Définir la couleur
@color_ground: #EAE3D3;

// puis l’utiliser
canvas
{
    fill-color: @color_ground;
}

Une macro insère son texte tel quel ; elle peut donc contenir une partie d’une expression :

@route_band_width: zlinear(13, 5pt, 7pt, 9pt, 11pt);

line|z13- {
    outline-width: eval(@route_band_width);
}

Une macro dont la valeur commence par eval( est calculée une seule fois, au chargement du style.

Conditions​

@if​

Évalue un paramètre et inclut ou exclut un bloc du style selon le résultat :

@if Theme == Dark
    @import "colors_dark.mapcss";
@else // couleurs par défaut
    @import "colors.mapcss";
@endif

Une condition peut comparer un paramètre avec ==, !=, <, >, <= ou >=. Une valeur est un seul mot composé de lettres, de chiffres et de _. Un paramètre sans comparaison vérifie que le paramètre est activé ; ! vérifie qu’il est désactivé :

@if Food
    // affiché lorsque l’option Restaurants et cafés est activée
@endif
@if !Food
    // affiché lorsqu’elle est désactivée
@endif

Guru Maps fournit les paramètres suivants au préprocesseur :

  • Theme {Light, Dark} – thème actuel de l’application. Dans le thème sombre, le blanc pur #FFFFFF des icônes devient gris foncé ; utilisez #FEFEFE pour un blanc qui doit rester blanc ;
  • Style {City, Outdoor} – style de carte actuel ;
  • SubStyle {Hike, Bike, Ski, Car}
    • Hike, Bike et Ski sont définis par les variantes Outdoor de la carte pour la randonnée, le vélo et le ski ;
    • Car est défini pendant la navigation en voiture, quel que soit le style de carte.
  • Les commutateurs de Éléments de la carte dans les réglages : AllShops, Bar, Beauty, BuildingName, CityService, Culture, Education, Entertaiment, Financial, Food, Hotel, Medical, PistesAndLifts, Postal, PublicTransport, Railway, Shop, Sport. Un commutateur vaut 1 lorsqu’il est activé et 0 lorsqu’il est désactivé. Pendant la navigation en voiture, tous les commutateurs sauf BuildingName sont désactivés.

@else​

Définit le bloc exécuté lorsque la première condition est fausse.

@elif​

Ajoute une autre condition lorsque les précédentes ne sont pas remplies.

@endif​

Ferme le bloc conditionnel actuel.

Commentaires​

// met en commentaire le reste de la ligne ; /* et */ délimitent un commentaire sur plusieurs lignes.

Paramètres d’affichage​

Ces paramètres contrôlent la façon dont les objets sont dessinés sur la carte.

Valeurs des paramètres​

Largeur​

Une largeur de ligne peut être exprimée en pixels (1px), en points (2pt) ou en mètres (3m), ou être calculée par une expression telle que eval( zlinear( 13, 1px,1pt,max(2pt, 4m)) );. Consultez la section Expressions pour en savoir plus. Indiquez toujours l’unité : un nombre sans unité est exprimé en unités internes de la carte.

Couleur​

Les couleurs sont indiquées sous la forme #RGB, #RRGGBB, #RRGGBBAA ou par un nom issu de la liste des couleurs CSS.

fill-color, casing-color, dashes-color, text-color et font-stroke-color n’acceptent qu’une couleur. color, icon-tint, outline-color, shield-color et shield-text-color acceptent aussi une expression.

Texte et guillemets​

Les guillemets simples et doubles sont équivalents. Il n’existe pas de séquences d’échappement : un texte ne peut donc pas contenir le guillemet qui l’entoure. Écrivez "McDonald's" entre guillemets doubles et 'say "hi"' entre guillemets simples. Les exemples de cette page utilisent des guillemets doubles.

Dans eval(), mettez chaque texte entre guillemets. Un nom de balise composé uniquement de lettres latines et de chiffres fonctionne sans guillemets, donc tag(name) équivaut à tag("name"), mais un nom contenant : ou _ exige des guillemets : tag("addr:street"). Les nombres avec unité, comme 2pt, et les couleurs, comme #808080, s’écrivent sans guillemets. Dans cet exemple, la palette est un seul texte, relationTag("colour") lit une balise et #808080 est une couleur :

color: eval(mapColor("red #E53935, green #43A047, blue #1E88E5", relationTag("colour"), #808080));

En dehors d’eval(), les guillemets sont facultatifs : la valeur d’un paramètre est le texte jusqu’au ;, donc icon-image: tree.svg; et icon-image: "tree.svg"; sont équivalents. Les espaces au début et à la fin d’une valeur sont supprimés, même entre guillemets. @import fonctionne de la même manière.

Dans les filtres de balises, mettez entre guillemets toute valeur qui contient une apostrophe, un guillemet ou ], ou qui commence ou se termine par une espace : [name="McDonald's"], [ref^="B "]. Les noms de balises dans les filtres et les valeurs dans les conditions @if ne prennent jamais de guillemets.

Même entre guillemets, une valeur ne peut pas contenir ;, { ni }, qui terminent le paramètre ou ouvrent un bloc, //, qui commence un commentaire, ni @, qui commence une macro.

Bientôt

La prochaine version de Guru Maps lève ces limites. Une barre oblique inverse échappera un guillemet (\", \', \\), ;, {, }, // et @ deviendront des caractères ordinaires entre guillemets, et une valeur entre guillemets gardera ses espaces.

Nombres et commutateurs​

text-priority, icon-scale, icon-offset-x, icon-offset-y et z-index acceptent un nombre simple, pas une expression. Les commutateurs, comme text-allow-overlap, acceptent true ou false.

Paramètres d’ordre de dessin​

layer​

Le numéro de couche permet de séparer les différentes couches de rendu de la carte.

// Pour chaque objet portant la balise 'layer', utiliser sa valeur comme numéro de couche
*|z9-[layer] {
    layer: eval(tag("layer"));
}

z-index​

z-index définit l’ordre de dessin des objets du même type au sein d’une couche.

area|z10-[natural=wood] {
    z-index: -3;
    fill-color: @color_wood;
}

area[natural=oceanwater] {
    z-index: -2;
    fill-color: @color_water;
}

Paramètres des polygones​

fill-color​

Couleur de remplissage d’un polygone.

area|z5-[natural=water] {
    fill-color: @color_water;
}

fill-image​

Image de remplissage d’un polygone.

// Image de remplissage d’une zone militaire au-dessus des autres objets
area|z11- {
    [landuse=military],
    [military=danger_area] {
        z-index: 2;
        fill-image:"forbiddenArea.png";
    }
}

fill-image prend en charge les données Base64 intégrées :

// correspond à arrow.svg
fill-image: eval(data("PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI2IDNoMTBWMWw1IDMtNSAzVjVIMjZ6IiBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii40Ii8+PC9zdmc+Cg=="));

color et width pour les polygones​

Couleur et largeur du contour d’un polygone.

area|z15-[building] {
    z-index: 3;
    width: 1px;
    color: @color_landuse_residential_stroke;
}

Paramètres des lignes​

color et width pour les lignes​

Couleur et largeur d’une ligne.

line|z13-[natural=tree_row] {
    width: 3pt;
    color: @color_wood;
    z-index: -10;
}

casing-color et casing-width​

Couleur et largeur du contour extérieur d’une ligne, généralement utilisées pour les routes. Le contour est ajouté de chaque côté de la ligne ; width est donc nécessaire aussi.

line|z8-[highway=motorway],
line|z11-[highway=motorway_link] {
    color: @color_motorway;
    casing-color: @color_motorway_casing;
    casing-width: 0.5pt;
}

dashes​

Définit tour à tour la longueur des segments dessinés et des espaces. Utilisez jusqu’à 8 nombres dont la somme est inférieure à 64. Chaque nombre indique la longueur d’un segment en points.

line|z15-[highway=cycleway] {
    dashes: 2,2,2,2;
    dashes-color: @color_cycleway_dashes;
}

dashes-color et dashes-width​

Couleur et largeur des tirets, utilisées pour les sentiers, chemins, escaliers et limites. Les tirets ne sont dessinés que si dashes, dashes-color et dashes-width sont tous définis.

line|z15-[highway=steps] {
    dashes-color: @color_footway_dashes;
    dashes-width: eval( zlinear( 16, 3pt, 4pt ) );
}

linecap​

Forme des extrémités de ligne. Valeurs possibles : none, square, round.

linejoin​

Forme des jointures de ligne. Valeurs possibles : round, bevel.

outline-color et outline-width​

Seconde ligne dessinée le long d’une ligne ou du contour d’un polygone, par exemple une bande translucide sous un itinéraire. Contrairement au contour extérieur (casing), elle ne dépend pas de width : outline-width est sa largeur totale.

Un contour translucide marque un itinéraire de randonnée par une large bande, et le chemin reste visible à travers :

relation[type=route][route=hiking] {
    line|z13- {
        outline-width: 7pt;
        outline-color: #1E88E570; // bleu translucide
    }
}

offset​

Décale la ligne latéralement : les valeurs positives vers la gauche du sens de la voie, les valeurs négatives vers la droite. Le décalage s’applique à la ligne, à son contour extérieur, à son contour (outline) et à ses tirets. Il s’utilise surtout avec per-relation, pour dessiner côte à côte plusieurs itinéraires sur un même tronçon ; voir l’exemple ci-dessous.

per-relation​

per-relation: true dessine un tronçon une fois pour chaque relation à laquelle il appartient, avec les paramètres de cette relation. Associé à offset et à la fonction relationSlot, il permet de dessiner côte à côte des itinéraires qui partagent un tronçon :

relation[type=route][route=subway] {
    line|z11- {
        per-relation: true;
        width: 2pt;
        offset: eval(relationSlot() * 2pt);
        color: eval(mapColor("red #E53935, green #43A047, blue #1E88E5", relationTag("colour"), #808080));
    }
}

Paramètres du texte​

text​

Texte dessiné à côté d’un point ou au milieu d’une ligne ou d’un polygone.

node,area|z2-8[place=country] {
    text: eval(locTag("name"));
    // autres paramètres omis
}

font-weight​

Graisse de la police. Valeurs possibles : lighter, light, normal, medium, semibold, bold, bolder.

node,area|z9-[place=town],
node,area|z10-[place=village],
node,area|z12-[place=hamlet] {
    font-weight:light;
    font-size:11;
    font-stroke-width:2px;
    font-stroke-color: @color_label_stroke;
}

font-style​

normal ou italic. Pour un texte en gras, utilisez font-weight.

Sur les cartes, les noms d’eaux s’écrivent traditionnellement en italique, ce qui les distingue des noms de lieux :

line|z15-[waterway=river] {
    text: eval(locTag("name"));
    font-style: italic;
    text-color: #0F4F80;
}

font-size​

Taille de la police, en points. La taille peut varier avec le zoom : écrivez des nombres simples dans zlinear, et le texte grossit progressivement :

node|z10-[place=city] {
    font-size: eval(zlinear(10, 13, 14, 15));
}

font-stroke-width et font-stroke-color​

Largeur et couleur du contour de la police. La largeur peut être une expression.

text-color​

Couleur du texte.

node,area|z2-8[place=country] {
    text: eval(locTag("name"));
    text-color: @color_name_text;
    text-priority: 10;
    // autres balises omises
}

text-letter-spacing​

Espace supplémentaire entre les lettres, en fractions de la taille de la police : 0.1 ajoute un dixième de la taille de la police. Il peut varier avec le zoom grâce à zlinear.

Les capitales espacées distinguent les noms des régions de ceux des villes. Quand on zoome, les lettres s’écartent et le nom occupe une plus grande part de sa région :

node|z6-[place=state] {
    text: eval(uppercase(locTag("name")));
    text-letter-spacing: eval(zlinear(6, 0.1, 0.18, 0.25));
}

text-priority​

Lorsque plusieurs libellés se disputent le même espace, text-priority indique lequel est affiché en premier.

text-allow-overlap​

Autorise le chevauchement des libellés afin que plusieurs textes puissent occuper la même zone.

text-big-padding​

Réserve deux fois plus d’espace autour du texte. Ce paramètre convient aux grandes agglomérations, comme les villes et les banlieues, afin que leurs libellés ne surchargent pas la carte.

Paramètres des icônes​

icon-image​

Nom de l’image affichée sur un point ou au centre d’un polygone.

node,area|z17-[amenity=library] {
    icon-image: "library.svg";
    icon-scale: 0.37;
    icon-tint: @color_icon_tint;
}

icon-image prend en charge les données Base64 intégrées :

// correspond à poi_circle_small.svg
icon-image: eval(data("PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNyA0QzcgNS42NTY4NSA1LjY1Njg1IDcgNCA3QzIuMzQzMTUgNyAxIDUuNjU2ODUgMSA0QzEgMi4zNDMxNSAyLjM0MzE1IDEgNCAxQzUuNjU2ODUgMSA3IDIuMzQzMTUgNyA0WiIgZmlsbD0iIzgwODA4MCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggNEM4IDYuMjA5MTQgNi4yMDkxNCA4IDQgOEMxLjc5MDg2IDggMCA2LjIwOTE0IDAgNEMwIDEuNzkwODYgMS43OTA4NiAwIDQgMEM2LjIwOTE0IDAgOCAxLjc5MDg2IDggNFpNNCA3QzUuNjU2ODUgNyA3IDUuNjU2ODUgNyA0QzcgMi4zNDMxNSA1LjY1Njg1IDEgNCAxQzIuMzQzMTUgMSAxIDIuMzQzMTUgMSA0QzEgNS42NTY4NSAyLjM0MzE1IDcgNCA3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="));

icon-fallback​

Image plus petite affichée à la place de icon-image lorsque l’icône n’a pas assez de place sur la carte, par exemple un point à la place du logo d’un magasin. Dans une rue animée, le lieu reste sur la carte et son logo apparaît quand on zoome :

node|z16-[brand:wikidata=Q38076] {
    icon-image: "logo_mcdonalds.svg";
    icon-fallback: "poi_circle_small.svg";
}

icon-scale​

Redimensionne l’image par rapport à sa taille d’origine.

icon-tint​

icon-tint recolore l’image. #FFF reste blanc, #CCC prend une variante plus claire de la couleur choisie, #888 lui correspond, #444 devient plus sombre et #000 reste noir. Les couleurs intermédiaires sont mélangées progressivement.

icon-offset-x et icon-offset-y​

Décale l’image par rapport à son point d’ancrage. Par défaut, elle est centrée au-dessus du point de la carte. Par exemple, icon-offset-y: 0; aligne le bord inférieur d’une épingle sur le point cible. Les valeurs vont de 0 à 1 ; 0 correspond au bord inférieur ou gauche et 1 au bord supérieur ou droit.

image-allow-overlap​

Autorise le chevauchement des icônes.

Paramètres des plaques routières​

Une plaque affiche un numéro de route sur un écusson le long de la route. Elle est dessinée sur les lignes lorsque shield-image et shield-text sont tous deux définis.

Des écussons aux couleurs des panneaux routiers d’un pays distinguent d’un coup d’œil les routes principales des routes locales. En Biélorussie, par exemple, les numéros des routes principales sont blancs sur rouge, et ceux des routes locales sombres sur blanc :

line|z11-[highway=primary][ref] {
    shield-image: "shield.svg";
    shield-text: eval(listItem(tag("ref"), 0)); // le premier numéro de "М1;E30"
    shield-color: #005387;
    [ref^=М], [ref^=Р] {
        shield-color: #C1121C;
    }
    [ref^=Н] {
        shield-image: "shield_plate.svg";
        shield-color: #FEFEFE;
    }
}

shield-image​

Image de l’écusson.

shield-text​

Texte de l’écusson, en général le numéro de la route.

shield-color​

Teinte l’image de l’écusson comme icon-tint.

shield-text-color​

Couleur du texte. Sans ce paramètre, le texte est sombre sur les écussons clairs et blanc sur les écussons foncés.

shield-fit​

Façon dont l’écusson s’ajuste au texte. stretch (valeur par défaut) étire le milieu de l’image à la largeur du texte et conserve ses extrémités. fixed conserve l’image telle qu’elle est dessinée et ne l’élargit que si le texte n’y tient pas ; utilisez-le pour les écussons ayant une forme particulière, comme les panneaux routiers américains. Pour conserver les couleurs propres de l’image, définissez shield-color: #00000000.

Les routes de Californie sont numérotées dans un cercle pour deux chiffres et dans une ellipse pour trois. Le numéro suit le préfixe du réseau, comme dans CA 1 :

line|z12-[highway=secondary][ref^="CA "] {
    shield-fit: fixed;
    shield-text: eval(listItem(listItem(tag("ref"), 0), 1, " "));
    shield-image: eval(cond(length(listItem(listItem(tag("ref"), 0), 1, " ")) == 3,
        "shield_state_3.svg", "shield_state_2.svg"));
    shield-color: #00000000;
    shield-text-color: #1E1E1E;
}

Paramètres des détails​

details-text et details-description définissent le nom et la description des objets GeoJSON. details-text apparaît comme titre et details-description comme description. Si les deux valeurs sont vides, les interactions avec l’objet sont ignorées. Ces paramètres prennent en charge les expressions.

* {
    details-text: eval(tag("name"));
    details-description: eval(tag("description"));
}

details-enabled: false désactive les appuis sur un objet : Guru Maps n’ouvre pas ses détails. Une relation qui l’utilise, comme un itinéraire, n’apparaît pas non plus parmi les itinéraires d’un tronçon sur lequel on appuie. Utilisez-le pour les objets qui n’ont rien à dire :

node|z15-[amenity=hunting_stand] {
    icon-image: "poi_hunting_stand.svg";
    details-enabled: false;
}

Expressions​

Les filtres et paramètres d’affichage peuvent dépendre de facteurs externes, être calculés par une formule ou varier selon le niveau de zoom.

Les valeurs calculées doivent toujours commencer par la fonction eval().

Fonctions​

Les fonctions suivantes sont disponibles à l’intérieur :

min et max​

Renvoient respectivement la plus petite ou la plus grande valeur. Le nombre de paramètres est illimité.

any​

Renvoie la première valeur de paramètre qui n’est pas null. Le nombre d’arguments est illimité.

data​

Décode une chaîne Base64 et peut être utilisé avec icon-image et fill-image.

tag​

Renvoie la valeur de la balise indiquée, ou null si elle est absente.

locTag​

Renvoie une valeur de balise localisée selon les préférences linguistiques de l’utilisateur. Par exemple, si l’anglais, le russe et la langue locale sont préférés, locTag("name") vérifie successivement name:en, name:ru et name, puis utilise la première valeur trouvée. Guru Maps prend en charge ar, be, cs, da, de, en, es, fr, it, ja, ko, nl, pl, pt, ru, sv, uk, zh. Utilisez locTag() pour ces langues et explicitement tag() pour les autres.

relationTag​

Renvoie la valeur d’une balise de la relation à laquelle appartient l’objet, par exemple la couleur d’un itinéraire : relationTag("colour"). Avec per-relation, elle lit la relation en cours de dessin.

relationSlot​

Avec per-relation, renvoie la position de la relation parmi les itinéraires dessinés sur le tronçon, centrée sur 0 : -0.5 et 0.5 pour deux itinéraires, -1, 0 et 1 pour trois. Multipliez-la par la largeur de la ligne pour placer les itinéraires côte à côte avec offset, comme dans l’exemple de per-relation.

listItem​

Renvoie un élément d’une liste, en comptant à partir de 0. Les éléments sont séparés par ; ou par le caractère indiqué en troisième paramètre.

shield-text: eval(listItem(tag("ref"), 0));             // "E 50" pour "E 50;E 65"
color: eval(listItem(tag("osmc:symbol"), 0, ":"));      // "red" pour "red:white:red_bar"

length​

Renvoie le nombre de caractères du texte, par exemple pour choisir un écusson plus large pour un numéro de route à trois chiffres, comme dans l’exemple de shield-fit.

uppercase, lowercase et capitalize​

Changent la casse du texte. Le deuxième paramètre, facultatif, est une langue dont les règles de casse sont appliquées, comme dans uppercase(locTag("name"), "el").

mapColor​

Choisit une couleur dans une palette. Le premier paramètre est la palette, "name color, name color, ..." ; le deuxième est la valeur à rechercher ; le troisième, facultatif, est le résultat lorsque la valeur est vide. Un nom de couleur de la palette renvoie sa couleur ; toute autre couleur renvoie la couleur la plus proche de la palette.

color: eval(mapColor("red #E53935, green #43A047, blue #1E88E5", relationTag("colour"), #808080));

formatElevation​

Formate une altitude en mètres sous la forme 1234 m ou en pieds, selon les unités choisies dans l’application. Un sommet est affiché avec son nom et son altitude, ou avec l’altitude seule lorsqu’il n’a pas de nom :

node|z13-[natural=peak] {
    text: eval(cond(locTag("name"),
        cond(tag("ele"), locTag("name") . " " . formatElevation(tag("ele")), locTag("name")),
        formatElevation(tag("ele"))));
}

cond​

Évalue une expression logique. Si le premier argument est vrai, la fonction renvoie le deuxième ; sinon, elle renvoie le troisième.

// vérifier addr:housenumber
    text: eval( cond( tag("addr:housenumber"),
    // si le numéro existe, ajouter la condition suivante
        tag("addr:housenumber") . cond( any( locTag("name"), tag("addr:housename") ),
            // placer name ou addr:housename entre parenthèses
            " (" . any( locTag("name"), tag("addr:housename") ) . ")",
            // sinon, chaîne vide
            ""),
    // sans numéro, utiliser name ou addr:housename
    any( locTag("name"), tag("addr:housename") ) ) );

boolean​

Convertit une valeur en booléen. Si elle est absente ou correspond, sans tenir compte de la casse, à 0, No, Off ou False, la fonction renvoie false ; sinon, elle renvoie true.

zlinear​

Fait varier une valeur de manière régulière selon le niveau de zoom. Le premier paramètre est le niveau initial ; les suivants indiquent la valeur de chaque niveau supplémentaire.

line|z13-[highway=residential] {
    width: eval( zlinear( 13, 1px, 1pt, max(2pt, 4m) ) );
    color: @color_small_road;
    linecap: round;
}

Dans cet exemple, la route mesure un pixel de large au niveau 13, un point au niveau 14 et, à partir du niveau 15, prend la plus grande valeur entre deux points et quatre mètres.

metric​

Convertit un paramètre numérique en mètres.

line|z12-[highway=tertiary] {
    width: eval( zlinear( 12, 1px, 1pt, 1pt, max(3pt, metric(any(tag("lanes"),2)*2)) ));
}

Ici, le nombre de voies est multiplié par deux et utilisé comme distance en mètres. max(3pt, metric()) renvoie la plus grande valeur entre la largeur en mètres et celle en points.

Opérateurs d’expression​

Les expressions prennent en charge les opérateurs mathématiques +, -, *, /, l’opérateur . pour concaténer des chaînes et l’opérateur d’égalité == et ~=, qui vérifie que le texte contient une sous-chaîne.