Changes between Version 12 and Version 13 of Help/Styles/MapCSSTutorial


Ignore:
Timestamp:
2021-12-02T09:12:57+01:00 (3 years ago)
Author:
leni
Comment:

replace with ` and

Legend:

Unmodified
Added
Removed
Modified

  • Help/Styles/MapCSSTutorial

    v12 v13  
    2020</table>
    2121}}}
    22 This draws a restaurant icon and a text label for each node that is tagged {{{amenity=restaurant}}}. The image can be specified in one of the following forms:
     22This draws a restaurant icon and a text label for each node that is tagged `amenity=restaurant`. The image can be specified in one of the following forms:
    2323 * absolute path
    2424 * URL
    2525 * a path relative to the current *.mapcss file
    26  * relative path that revers to a build-in image (see Example 1). The {{{josm-tested.jar}}} file is a simple zip archive; you can extract it and use all files from the {{{images}}} folder.
    27 The declaration '''{{{text: auto;}}}''' tells JOSM to derive the text for the label automatically. At time of writing, the following tags are searched and the first one that is found will be used: "{{{name:}}}"+''<LANG>'', "{{{name}}}", "{{{int_name}}}", "{{{ref}}}", "{{{operator}}}", "{{{brand}}}" and "{{{addr:housenumber}}}". You can also pick a specific tag e.g. '''{{{text: "cuisine";}}}'''.
     26 * relative path that revers to a build-in image (see Example 1). The `josm-tested.jar` file is a simple zip archive; you can extract it and use all files from the `images` folder.
     27The declaration **`text: auto;`** tells JOSM to derive the text for the label automatically. At time of writing, the following tags are searched and the first one that is found will be used: "`name:`"+''<LANG>'', "`name`", "`int_name`", "`ref`", "`operator`", "`brand`" and "`addr:housenumber`". You can also pick a specific tag e.g. **`text: "cuisine";`**.
    2828
    2929=== Example 2 ===
    … …  
    4646Here we have all residential roads drawn in lightgray and with line width 4 px. Color can be given in one of the following formats:
    4747 * named color as found in [http://www.w3.org/TR/css3-color/#svg-color this] list
    48  * html style: '''{{{#ff0000}}}'''
    49  * '''{{{rgb(0.0, 1.0 , 0.2)}}}''' - rgb value with arguments from 0.0 to 1.0
     48 * html style: **`#ff0000`**
     49 * **`rgb(0.0, 1.0 , 0.2)`** - rgb value with arguments from 0.0 to 1.0
    5050 
    5151=== Example 3 ===
    … …  
    7474</table>
    7575}}}
    76 In the first part of the declarations, we define a dash pattern of gray and green. Leave out the {{{dashes-background-color}}} to display a broken line with no color in between the dashes.
     76In the first part of the declarations, we define a dash pattern of gray and green. Leave out the `dashes-background-color` to display a broken line with no color in between the dashes.
    7777
    78 In the second part, the name of the street ('''{{{text: "name";}}}''') will be displayed along the line ('''{{{text-position: line;}}}''') with a vertical offset of 9 px. An offset of 0 would render the text on top of the line.
     78In the second part, the name of the street (**`text: "name";`**) will be displayed along the line (**`text-position: line;`**) with a vertical offset of 9 px. An offset of 0 would render the text on top of the line.
    7979
    8080=== Example 4 ===
    … …  
    9595}}}
    9696
    97 The '''{{{area}}}''' type selector acts on ways and multipolygon relations. The condition '''{{{[building]}}}''' applies to all objects that have the key {{{building}}} set to any value. Note that the outline of the building is painted as well, although we haven't specified any line properties. This is because JOSM will always draw at least one line element for each way. If no line properties are found, a default line element is generated.
     97The **`area`** type selector acts on ways and multipolygon relations. The condition **`[building]`** applies to all objects that have the key `building` set to any value. Note that the outline of the building is painted as well, although we haven't specified any line properties. This is because JOSM will always draw at least one line element for each way. If no line properties are found, a default line element is generated.
    9898
    9999=== Example 5 ===
    … …  
    119119}}}
    120120
    121 This shows, how you can list multiple selectors for one rule. We fill the area with a pattern, if it is tagged {{{landuse=forest}}} or {{{natural=wood}}}. The opacity is set to 0.8, where 1.0 means opaque and 0.0 is fully transparent. You can set opacity, whenever a color or an image is defined. E.g. {{{icon-opacity}}} for {{{icon-image}}} and {{{opacity}}} for {{{color}}}. A label for the object is placed in the center of the area.
     121This shows, how you can list multiple selectors for one rule. We fill the area with a pattern, if it is tagged `landuse=forest` or `natural=wood`. The opacity is set to 0.8, where 1.0 means opaque and 0.0 is fully transparent. You can set opacity, whenever a color or an image is defined. E.g. `icon-opacity` for `icon-image` and `opacity` for `color`. A label for the object is placed in the center of the area.
    122122
    123123