Changes between Version 1 and Version 2 of Fr:Help/Styles/MapCSSTutorial


Ignore:
Timestamp:
2021-12-03T10:12:09+01:00 (3 years ago)
Author:
leni
Comment:

adjusted to 13 : remplacé par ` et étoileétoile

Legend:

Unmodified
Added
Removed
Modified
  • Fr:Help/Styles/MapCSSTutorial

    v1 v2  
    1 [[TranslatedPages(revision=12)]]
     1[[TranslatedPages(revision=13)]]
    22= MapCSS Tutorial =
    33
     
    1919</table>
    2020}}}
    21 Cela dessine une icône de restaurant et une étiquette de texte pour chaque nœud étiqueté {{{amenity=restaurant}}}. L'image peut être spécifiée sous l'une des formes suivantes :
     21Cela dessine une icône de restaurant et une étiquette de texte pour chaque nœud étiqueté `amenity=restaurant`. L'image peut être spécifiée sous l'une des formes suivantes :
    2222 * un chemin absolu ''(absolute path)''
    2323 * une URL
    2424 * un chemin relatif au fichier *.mapcss courant
    25  * un chemin relatif qui renvoie à une image intégrée (voir l'exemple 1). Le fichier {{{josm-tested.jar}}} est une simple archive zip ; vous pouvez l'extraire et utiliser tous les fichiers du dossier {{{images}}}.
    26 La déclaration '''{{{text: auto;}}}''' indique à JOSM de déterminer automatiquement le texte de l'étiquette. Au moment de l'écriture, les attributs suivants sont recherchés et le premier qui est trouvé sera utilisé : "{{{name:}}}"+''<LANG>'', "{{{name}}}", "{{{int_name}}}", "{{{ref}}}", "{{{operator}}}", "{{{brand}}}" et "{{{addr:housenumber}}}". Vous pouvez également choisir une balise spécifique, par exemple : '''{{{text: "cuisine";}}}'''.
     25 * un chemin relatif qui renvoie à une image intégrée (voir l'exemple 1). Le fichier `josm-tested.jar` est une simple archive zip ; vous pouvez l'extraire et utiliser tous les fichiers du dossier `images`.
     26La déclaration **`text: auto;`** indique à JOSM de déterminer automatiquement le texte de l'étiquette. Au moment de l'écriture, les attributs suivants sont recherchés et le premier qui est trouvé sera utilisé : "`name:`"+''<LANG>'', "`name`", "`int_name`", "`ref`", "`operator`", "`brand`" et "`addr:housenumber`". Vous pouvez également choisir une balise spécifique, par exemple : **`text: "cuisine";`**.
    2727
    2828=== Exemple 2 ===
     
    4545Ici nous avons toutes les routes résidentielles dessinées en gris clair et avec une épaisseur de ligne de 4 px. La couleur peut être donnée dans l'un des formats suivants :
    4646 * le nom de la couleur tel que trouvé dans [http://www.w3.org/TR/css3-color/#svg-color cette] liste
    47  * le style html : '''{{{#ff0000}}}'''
    48  * '''{{{rgb(0.0, 1.0 , 0.2)}}}''' - La valeur rgb avec des arguments de 0.0 à 1.0
     47 * le style html : **`#ff0000`**
     48 * **`rgb(0.0, 1.0 , 0.2)`** - La valeur rgb avec des arguments de 0.0 à 1.0
    4949 
    5050=== Exemple 3 ===
     
    7373</table>
    7474}}}
    75 Dans la première partie des déclarations, nous définissons un motif de tirets de couleur grise et verte. Laissez de côté le {{{dashes-background-color}}} pour afficher une ligne brisée sans couleur entre les tirets.
     75Dans la première partie des déclarations, nous définissons un motif de tirets de couleur grise et verte. Laissez de côté le `dashes-background-color` ''(couleur de fond des tirets)'' pour afficher une ligne brisée sans couleur entre les tirets.
    7676
    77 Dans la seconde partie, le nom de la rue  ('''{{{text: "name";}}}''') sera affiché le long de la ligne ('''{{{text-position: line;}}}''') avec un décalage vertical de 9 px. Un décalage de 0 rendrait le texte au sommet de la ligne.
     77Dans la seconde partie, le nom de la rue  (**`text: "name";`**) sera affiché le long de la ligne (**`text-position: line;`**) avec un décalage vertical de 9 px. Un décalage de 0 rendrait le texte au sommet de la ligne.
    7878
    7979=== Exemple 4 ===
     
    9494}}}
    9595
    96 Le sélecteur de type '''{{{area}}}''' agit sur les chemins et les relations multipolygones. La condition '''{{{[building]}}}''' s'applique à tous les objets dont la clé {{{building}}} a une valeur quelconque. Notez que le contour du bâtiment est également colorié, bien que nous n'ayons pas spécifié de propriétés de ligne. C'est parce que JOSM dessinera toujours au moins un élément de ligne pour chaque chemin. Si aucune propriété de ligne n'est trouvée, un élément de ligne par défaut est généré.
     96Le sélecteur de type **`area`** agit sur les chemins et les relations multipolygones. La condition **`[building]`** s'applique à tous les objets dont la clé `building` a une valeur quelconque. Notez que le contour du bâtiment est également colorié, bien que nous n'ayons pas spécifié de propriétés de ligne. C'est parce que JOSM dessinera toujours au moins un élément de ligne pour chaque chemin. Si aucune propriété de ligne n'est trouvée, un élément de ligne par défaut est généré.
    9797
    9898=== Exemple 5 ===
     
    118118}}}
    119119
    120 Ceci montre comment vous pouvez lister plusieurs sélecteurs pour une règle. Nous remplissons la zone avec un motif, si elle a l'attribut {{{landuse=forest}}} ou {{{natural=wood}}}. L'opacité est fixée à 0,8, où 1,0 signifie opaque et 0,0 est totalement transparent. Vous pouvez définir l'opacité chaque fois qu'une couleur ou une image est définie. Par exemple, {{{icon-opacity}}} pour {{{icon-image}}} et {{{opacity}}} pour {{{color}}}. Une étiquette pour l'objet est placée au centre de la zone.
     120Ceci montre comment vous pouvez lister plusieurs sélecteurs pour une règle. Nous remplissons la zone avec un motif, si elle a l'attribut `landuse=forest` ou `natural=wood`. L'opacité est fixée à 0,8, où 1,0 signifie opaque et 0,0 est totalement transparent. Vous pouvez définir l'opacité chaque fois qu'une couleur ou une image est définie. Par exemple, `icon-opacity` pour `icon-image` et `opacity` pour `color`. Une étiquette pour l'objet est placée au centre de la zone.
    121121
    122122