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.
  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-, ou un intervalle, comme z3-9. Dans le second cas, la règle s’applique aux niveaux 3 à 8 inclus.
  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. [!ref] sélectionne au contraire les objets sans balise ref.

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]) {
    }
}

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;
}

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

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

  • Theme {Light, Dark} – thème actuel de l’application ;
  • Style {Default, Outdoor} – style de carte actuel ;
  • SubStyle {Car, Hike, Bike}
    • Car est utilisé en voiture ;
    • Hike pour la randonnée ;
    • Bike pour le vélo.

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

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.

Couleur​

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

Texte​

Une chaîne placée entre guillemets simples ou doubles est considérée comme du texte :

'string'
"another string"

Paramètres d’ordre de dessin​

layer​

Le numéro de couche sépare les différents niveaux d’altitude 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 de la ligne, généralement utilisé pour les routes.

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

dashes​

Définit la longueur des segments dessinés et des espaces. La somme des nombres doit être une puissance de deux, par exemple 4, 8, 16, 32 ou 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, notamment pour les sentiers, escaliers et limites.

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, miter, bevel, auto.

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 : bolder, bold, normal, light, lighter.

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-size​

Taille de la police.

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

Largeur et couleur du contour de la police.

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

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-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 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'));
}

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(). 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 be, cs, da, de, en, es, fr, it, ja, ko, nl, pl, ru, sv, uk, zh. Utilisez locTag() pour ces langues et explicitement tag() pour les autres.

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 les opérateurs de comparaison <, >, == et ~= pour rechercher une sous-chaîne.