FR:Overpass turbo/MapCSS

From OpenStreetMap Wiki
Jump to: navigation, search
Langues disponibles — Overpass turbo/MapCSS
· Afrikaans · Alemannisch · aragonés · asturianu · azərbaycanca · Bahasa Indonesia · Bahasa Melayu · Bân-lâm-gú · Basa Jawa · Baso Minangkabau · bosanski · brezhoneg · català · čeština · dansk · Deutsch · eesti · English · español · Esperanto · estremeñu · euskara · français · Frysk · Gaeilge · Gàidhlig · galego · Hausa · hrvatski · Igbo · interlingua · Interlingue · isiXhosa · isiZulu · íslenska · italiano · Kiswahili · Kreyòl ayisyen · kréyòl gwadloupéyen · Kurdî · latviešu · Lëtzebuergesch · lietuvių · magyar · Malagasy · Malti · Nederlands · Nedersaksies · norsk bokmål · norsk nynorsk · occitan · Oromoo · oʻzbekcha/ўзбекча · Plattdüütsch · polski · português · português do Brasil · română · shqip · slovenčina · slovenščina · Soomaaliga · suomi · svenska · Tiếng Việt · Türkçe · Vahcuengh · vèneto · Wolof · Yorùbá · Zazaki · српски / srpski · беларуская · български · қазақша · македонски · монгол · русский · тоҷикӣ · українська · Ελληνικά · Հայերեն · ქართული · नेपाली · मराठी · हिन्दी · অসমীয়া · বাংলা · ਪੰਜਾਬੀ · ગુજરાતી · ଓଡ଼ିଆ · தமிழ் · తెలుగు · ಕನ್ನಡ · മലയാളം · සිංහල · ไทย · မြန်မာဘာသာ · ລາວ · ភាសាខ្មែរ · ⵜⴰⵎⴰⵣⵉⵖⵜ · አማርኛ · 한국어 · 日本語 · 中文(简体)‎ · 吴语 · 粵語 · 中文(繁體)‎ · ייִדיש · עברית · اردو · العربية · پښتو · سنڌي · فارسی · ދިވެހިބަސް
Overpass turbo · API Overpass · Référence du langage · Exemples de requêtes · Guide du langage · Exemples avancés · Édition clairsemée · FAQ · MapCSS · plus : Overpass turbo français · Overpass API français

Overpass turbo supporte MapCSS pour les fonctionnalités de personnalisation. Il s'agit ci-dessous d'une introduction à l'usage de MapCSS dans turbo, d' exemples et d'une liste de fonctionnalités de MapCSS supportées.

Une introduction plus générale peut être aussi trouvée ici sur le blog de Martin Raifer.

Comment utiliser

MapCSS peut être attaché à une requête avec un tag "mustache" spécial : Vous écrivez {{style: et tout ce qui vient après jusqu'au premier }} est interprété comme une feuille de style MapCSS.

<osm-script>
  ... votre requête overpass ici ...
</osm-script>
{{style:
  ... votre feuille de style mapcss ici ...
}}

Exemples

Marqueurs avec texte

Overpass-turbo MapCSS marker text.png

Vous pouvez à présent utiliser MapCSS pour afficher le texte des marqueurs sur la carte. C'est très utile pour montrer les noms des éléments affichés. La déclaration MapCSS suivante ajoute des marqueurs textuels à chaque nœud, chemin ou relation sur la carte et affiche tout ce qui se trouve dans le tag name:

{{style:
  node, way relation {
    text: name;
  }
}}

Styles de lignes try it yourself in overpass-turbo

Turbo-mapcss-ex1.png
way
{ color:black; width:4; opacity:1; }

way[tunnel][tunnel!=no]
{ opacity:0.3; }

way[highway=motorway]
{ width:12; }

... 

way[highway=track][tracktype=grade5]
{ color:brown; width:3; dashes:1,10,1,10; }

way[highway=path]
{ color:black; width:1; dashes:5,5; }

Codage couleur try it yourself in overpass-turbo

Turbo-mapcss-ex2.png
node, area
{ color:white; fill-color:white; }

node[amenity=drinking_water],
node[amenity=fountain],
area[amenity=fountain]
{ color:blue; fill-color:blue; }

node[amenity=place_of_worship],
area[amenity=place_of_worship]
{ color:grey; fill-color:grey; }

node[amenity=restaurant],
area[amenity=restaurant]
{ color:red; fill-color:red; }

...

Icônes pour points d'intérêts try it yourself in overpass-turbo

Turbo-mapcss-ex3.png
node[amenity=cafe] {
  icon-image: url('icons/maki/cafe-18.png');
  icon-width: 18;
}

MapCSS

L’implémentation de MapCSS suit les spécifications de l'ébauche de MapCSS/0.2.

Sélecteurs

Les éléments peuvent être sélectionnés par leur type OSM (nœud/chemin/relation) et/ou par leur géométrie (nœud/ligne/zone).

Les pseudo-classes suivantes sont disponibles:

  • :active - sélectionne l'élément de la carte qui vient juste d'être cliqué (et qui affiche la fenêtre pop-up)
  • :tainted - sélectionne les éléments qui ont des géométries incomplètes (ex: des chemins avec des noeuds manquant ou des multipolygones incomplets)
  • :mp_outline - sélectionne les chemins qui appartiennent a un multipolygone[1]
  • :tagged - sélectionne les éléments qui ont des tags intéressants (n'importe quel tag autre que created_by=* ou source=*)
  • :untagged - sélectionne les éléments qui n'ont pas de tags intéressants (opposé de :tagged)
  • :placeholder - sélectionne les points qui sont des espaces réservés pour une ligne ou une zone.

Classes fonctionne comme spécifié via la syntaxe "set .my_class".

  1. déprécié, utiliser à la place des sélécteurs-enfants

Propriétés

Les propriétés suivantes peuvent être utilisées pour styler les éléments de la carte:

Propriétés de la ligne

  • color - couleur de la ligne
  • opacity - opacité de la ligne
  • width - largeur de la ligne
  • dashes - spécifie les lignes en pointillés: an array of alternating on/off lengths (e.g. 5,8)

Propriétés de la zone

  • fill-color - la couleur du remplissage de la zone
  • fill-opacity - l'opacité du remplissage de la zone
  • casing-* - (notez que le casing (?)pour les lignes n'est pas encore supporté et que les propriétés de casing (?) pour les zones peuvent également être définies par les propriétés de ligne sans préfixes respectives)

Propriétés du point

  • symbol-shape - spécifie le symbole qui devrait apparaître à l'endroit du point d'intérêt. Actuellement seul '"circle" est supporté.
  • symbol-size - la taille du symbole à afficher (ex: le rayon du cercle)
  • symbol-* - règle les propriétés du symbole à afficher: symbol-stroke-width, symbol-stroke-color, symbol-stroke-opacity, symbol-fill-color, symbol-fill-opacity (notez que les propriétés du symbole peuvent également être définies par les propriétés de ligne sans préfixes respectives)
  • icon-image - si réglé une icône sera affiché pour le point d'intérêt. (notez que les valeurs icon_width et icon_height doivent être renseignées si l'on veut que l'icône soit centrée autour du point)
  • icon-width - la largeur de l'icône
  • icon-height - la hauteur de l'icône

Quelques restrictions

  • La stratification (usage des calques) n'est pas supportée (ni par ::layername subparts ni z-index sublayers). Seul le calque "default" (subpart) est traité. Les autres calques aussi bien que le z-index sont ignorés.
  • Les sélecteurs "enfants" descendants fonctionnent seulement pour les relations comme parents. I.e. "relation node" fonctionnera mais "way node" ne fonctionnera pas.
  • Le support Eval est actuellement un peu expérimental. Attendez-vous à quelques tracas (ex :la fonction incluse prop() n'est pas encore implémentée). Un usage simple (comme eval('tag("population")/100000');) devrait être bon.
  • La syntaxe set ne supporte pas encore les déclarations eval.
  • Les sélecteurs de niveau de zoom (ex: |z12) ne sont pas supportés (en fait ils sont toujours évalués pour un niveau de zoom 18, indépendamment de l'état de la carte actuelle).
  • Le sélecteur de type "wild-card" "*" n'est pas encore implémenté.

Sets d'icônes

Turbo est fourni avec deux jeux d'icônes pour la carte: maki et "osm mapnik". Vous pouvez les utiliser en vous référant respectivement à icons/maki/***.png ou icons/mapnik/***.png. Alternativement il est aussi possible d'utiliser des icônes avec des urls externes.

Plus d'exemples

Overpass turbo - Style par défaut

Ceci est la feuille de style [MapCSS]] par défaut des éléments de la carte dans Overpass turbo:

/* point features */
node {
  color:#03f;
  width:2;
  opacity:0.7;
  fill-color:#fc0;
  fill-opacity:0.3;
}
/* line features */
line {
  color:#03f;
  width:5;
  opacity:0.6;
}
/* polygon features */
area {
  color:#03f;
  width:2;
  opacity:0.7;
  fill-color:#fc0;
  fill-opacity:0.3;
}
/* style modifications */
/* objects in relations */
relation node, relation way, relation relation {
  color:#d0f;
}
/* tainted objects */
way:tainted, relation:tainted {
  dashes:5,8;
}
/* placeholder points */
way:placeholder, relation:placeholder {
  fill-color:red;
}
/* highlighted features */
node:active, way:active, relation:active {
  color:#f50;
  fill-color:#f50;
}