| | 1 | This page documents details on JOSM's [http://wiki.openstreetmap.org/wiki/MapCSS/0.2 MapCSS] implementation. At the moment (Feb-2011) it is under active development and anything may change without warning. |
| | 2 | |
| | 3 | == General Structure == |
| | 4 | A MapCSS style sheet has rules of the form |
| | 5 | {{{ |
| | 6 | selector { |
| | 7 | prop: value; |
| | 8 | ... |
| | 9 | prop: value; |
| | 10 | } |
| | 11 | }}} |
| | 12 | The algorithm to find the styles for a given object is like this: |
| | 13 | {{{ |
| | 14 | - for each rule: |
| | 15 | if the selector applies, set the properties from the { } block |
| | 16 | - analyze the final list of properties and generate styles from it |
| | 17 | }}} |
| | 18 | |
| | 19 | == Selectors == |
| | 20 | Examples for selectors are |
| | 21 | {{{ |
| | 22 | way[highway=residential] {...} |
| | 23 | way|z11-14[amenity=parking][access=public]:closed:new::layer_1 {...} |
| | 24 | area[amenity=parking][access=public], area[amenity=parking][!access] {...} |
| | 25 | relation[type=route][route=foot] > way::relation_underlay {..} |
| | 26 | }}} |
| | 27 | The different elements ('''type'''-, '''zoom'''- , '''condition''' selector, '''pseudo classes''', '''layer identifier''', '''grouping''' and '''child combinator''') are explained below. |
| | 28 | |
| | 29 | === Type selector === |
| | 30 | {{{node}}}, {{{way}}}, {{{relation}}}:: |
| | 31 | applies to the osm objects of the given type |
| | 32 | *:: |
| | 33 | accepts any object |
| | 34 | {{{area}}}:: |
| | 35 | The "{{{area}}}" type selector is a convenient way to select areas, e.g. |
| | 36 | {{{ |
| | 37 | area[natural=beach] {...} |
| | 38 | }}} |
| | 39 | is the same as |
| | 40 | {{{ |
| | 41 | way[natural=beach], relation[type=multipolygon][natural=beach] {...} |
| | 42 | }}} |
| | 43 | Note that {{{area}}} selects unclosed ways as well, so it may be useful to add the {{{:closed}}} pseudo class. The JOSM Validator will give a warning for unclosed ways that have an area style. |
| | 44 | meta:: |
| | 45 | The {{{meta}}} selector starts a special rule that should stand at the beginning of the file. It gives some general information on the style sheet. All software that supports MapCSS should be able to parse this sections without errors, so do not use exotic syntax extensions in this part. |
| | 46 | {{{ |
| | 47 | meta { |
| | 48 | title: "Parking lanes"; /* title shown in the menu */ |
| | 49 | icon: "images/logo.png"; /* small icon shown in the menu next to the title */ |
| | 50 | } |
| | 51 | }}} |
| | 52 | {{{canvas}}}:: |
| | 53 | Some style information not specific to nodes, ways or relations. |
| | 54 | {{{ |
| | 55 | canvas { |
| | 56 | background-color: #ffffea; |
| | 57 | } |
| | 58 | }}} |
| | 59 | |
| | 60 | === Zoom selector === |
| | 61 | You can restrict the scale at that the a given rule applies. |
| | 62 | || {{{way|z12 {...}}}} || At zoom level 12 || |
| | 63 | || {{{way|z13-15 {...}}}} || From 13 to 15 || |
| | 64 | || {{{way|z16- {...}}}} || 16 and above || |
| | 65 | || {{{way|z-12 {...}}}} || 12 and below || |
| | 66 | || {{{way {...}}}} || any zoom level || |
| | 67 | The precise definition of scale ranges for each zoom level may change in future. By rule of thumb you can expect to be approximately at zoom level ''n'' when imagery displays slippymap tiles of level ''n''. |
| | 68 | |
| | 69 | === Condition selector === |
| | 70 | You can add any number of conditions, which must all be fulfilled, otherwise the block of declarations will not be executed for that object. Possible conditions are: |
| | 71 | |
| | 72 | || {{{way[building]}}} || way with building tag set || |
| | 73 | || {{{way[!building]}}} || way with building tag not set || |
| | 74 | || {{{way[oneway?]}}} || way with oneway set to {{{yes}}}, {{{true}}} or 1 || |
| | 75 | || {{{way[highway=residential]}}} || way with tag {{{highway=residential}}} || |
| | 76 | || {{{way[highway!=residential]}}} || way that doesn't have the tag {{{highway=residential}}} || |
| | 77 | || {{{node[place=city][population<50000]}}} || city-node with population less than 50000 || |
| | 78 | || {{{*[amenity=vending_machine][vending~=stamps]}}} || any object, that is a vending machine and offers stamps (assumes that the value is a list of semicolon delimited entries) || |
| | 79 | || {{{way[highway][name*="straße"]}}} || any highway where the string "straße" is contained somewhere in the value of the {{{name}}} tag. (Quotes are required if characters other than "a"-"z", underscore or dash are used.) || |
| | 80 | In addition, eval expressions can be used in the brackets, e.g. |
| | 81 | || {{{way[eval(prop("opacity")<0.2)]}}} || any way where the current value of the {{{opacity}}} property is less then 0.2 || |
| | 82 | || {{{node[eval(JOSM_search("role:forward_stop | role:backward_stop"))]}}} || JOSM search expression - in this case any node that is member of a relation as {{{forward_stop}}} or {{{backward_stop}}} || |
| | 83 | |
| | 84 | === Pseudo Classes === |
| | 85 | |
| | 86 | || {{{:closed}}} || true for ways where the first node is the same as the last and for any multipolygon relation || |
| | 87 | || {{{:new}}} || all new objects || |
| | 88 | || {{{:connection}}} || true for nodes that are used by more than one way || |
| | 89 | {{{#!comment |
| | 90 | || {{{:modified}}} || changed objects (Note that the styles are not updated when you move a node, so you have to switch the style sheet on and off to get an updated view.) || |
| | 91 | }}} |
| | 92 | === Layer Identifier === |
| | 93 | |
| | 94 | Layers can be used to create more than one style for a single object. Here is an example: |
| | 95 | {{{ |
| | 96 | way[highway=secondary] { |
| | 97 | width: 3; |
| | 98 | color: yellow; |
| | 99 | } |
| | 100 | |
| | 101 | way[highway=tertiary] { |
| | 102 | width: 2; |
| | 103 | color: orange; |
| | 104 | } |
| | 105 | |
| | 106 | way[access][access!=public]::non_public_access_layer { |
| | 107 | width: +2; |
| | 108 | color:red; |
| | 109 | dashes: 2; |
| | 110 | object-z-index:-1.0; |
| | 111 | } |
| | 112 | |
| | 113 | way[bridge]::bridge_layer { |
| | 114 | width: +3; |
| | 115 | color:#000080; |
| | 116 | opacity:0.5; |
| | 117 | object-z-index:1.0; |
| | 118 | } |
| | 119 | }}} |
| | 120 | This draws all secondary and tertiary roads in yellow and orange respectively. Any road with an access tag other than public will get an extra line style below ('''{{{object-z-index:-1.0;}}}''') the main line. If that part of the street happens to be a bridge, it will also get a half transparent blue overlay. The relative width value ('''{{{width: +2;}}}''') refers to the width on the default layer (2 or 3 in this case). |
| | 121 | |
| | 122 | The name for the layer can be any identifier. |
| | 123 | |
| | 124 | default:: |
| | 125 | If you omit the layer in the selector, this is the same as using {{{::default}}}. |
| | 126 | *:: |
| | 127 | In addition, you can use the * layer to override and initialize all layers.[[br]] |
| | 128 | It overrides all existing subparts, so |
| | 129 | {{{ |
| | 130 | way::A { a; } |
| | 131 | way::B { b; } |
| | 132 | way::* { c; } |
| | 133 | }}} |
| | 134 | is equivalent to |
| | 135 | {{{ |
| | 136 | way::A { a; } |
| | 137 | way::B { b; } |
| | 138 | way::A { c; } |
| | 139 | way::B { c; } |
| | 140 | }}} |
| | 141 | And it initializes new subparts. In other words: |
| | 142 | {{{ |
| | 143 | way::* { a; } |
| | 144 | way::A { b; } |
| | 145 | }}} |
| | 146 | is equivalent to |
| | 147 | {{{ |
| | 148 | way::A {} |
| | 149 | way::* { a; } |
| | 150 | way::A { b; } |
| | 151 | }}} |
| | 152 | which is in turn the same as |
| | 153 | {{{ |
| | 154 | way::A { a; } |
| | 155 | way::A { b; } |
| | 156 | }}} |
| | 157 | or |
| | 158 | {{{ |
| | 159 | way::A { a; b; } |
| | 160 | }}} |
| | 161 | |
| | 162 | == Child combinator == |
| | 163 | You can select nodes that are part of specific ways and any object that is member of a certain relation: |
| | 164 | {{{ |
| | 165 | relation[type=route][route=foot] > way|z12-::relation_underlay {...} |
| | 166 | }}} |
| | 167 | Zoom selector and Layer identifier are only relevant for the part right of the ">" sign. |
| | 168 | |
| | 169 | == Grouping == |
| | 170 | |
| | 171 | Rules with common declaration block can be grouped into one: |
| | 172 | {{{ |
| | 173 | area[landuse=forest] { color: green; width: 2; } |
| | 174 | area[natural=wood] { color: green; width: 2; } |
| | 175 | }}} |
| | 176 | is the same as |
| | 177 | {{{ |
| | 178 | area[landuse=forest], area[natural=wood] { color: green; width: 2; } |
| | 179 | }}} |
| | 180 | |
| | 181 | |
| | 182 | |
| | 183 | = Properties = |
| | 184 | |
| | 185 | == General properties == |
| | 186 | |
| | 187 | ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| |
| | 188 | || {{{z-index}}} || specify the order the objects are drawn: The objects with higher z-index are drawn on top of objects with lower z-index || ''Number'' (can be negative) || 0 || |
| | 189 | {{{#!comment |
| | 190 | |
| | 191 | Do not document these yet, as I'm not sure they are needed at all: |
| | 192 | |
| | 193 | || {{{object-z-index}}} || You can multiple styles for one object (e.g. a normal line and a highlight). In case of equal {{{z-index}}}, the {{{object-z-index}}} decides the order of painting. || ''Number'' (can be negative) || 0 || |
| | 194 | |
| | 195 | |
| | 196 | || {{{modifier}}} || Whether the current layer is a proper main style ({{{modifier=false}}}) or just a decoration for the object ({{{modifier=true}}}). JOSM draws a default line / node symbol if it doesn't find any main node / line style. || {{{false}}} or {{{true}}} || {{{false}}} for the default layer and {{{true}}} for any other layer || |
| | 197 | |
| | 198 | }}} |
| | 199 | |
| | 200 | == Icon and symbol styles == |
| | 201 | |
| | 202 | ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| |
| | 203 | || {{{icon-image}}} || The icon at node position || ''Image'' || - || |
| | 204 | || {{{icon-opacity}}} || Opacity of the icon image || ''Opacity'' || 1.0 || |
| | 205 | || {{{symbol-shape}}} || Display a symbol at the position of the node || {{{square}}}, {{{circle}}} || - || |
| | 206 | || {{{symbol-size}}} || Size of the symbol || ''Number'' || 10 || |
| | 207 | || {{{symbol-stroke-width}}} || outline line width || ''Number'' || 1.0 if {{{symbol-stroke-color}}} is set || |
| | 208 | || {{{symbol-stroke-color}}} || line color || ''Color'' || {{{#FFC800}}} if {{{symbol-stroke-width}}} is set || |
| | 209 | || {{{symbol-stroke-opacity}}} || line opacity || ''Opacity'' || 1.0 || |
| | 210 | || {{{symbol-fill-color}}} || fill color for the shape || ''Color'' || {{{blue}}}, unless either {{{symbol-stroke-width}}} or {{{symbol-stroke-color}}} is set || |
| | 211 | || {{{symbol-fill-opacity}}} || fill opacity || ''Opacity'' || 1.0 || |
| | 212 | || {{{text-...}}}, {{{font-...}}} |||||| general text & font properties || |
| | 213 | || {{{text-anchor-horizontal}}} || horizontal text label placement || {{{left}}}, {{{center}}}, {{{right}}} || {{{right}}} || |
| | 214 | || {{{text-anchor-vertical}}} || vertical text label placement || {{{above}}}, {{{top}}}, {{{center}}}, {{{bottom}}}, {{{below}}} || {{{bottom}}} || |
| | 215 | |
| | 216 | Do not rely on the default values for {{{symbol-...}}} properties (except for {{{opacity}}}). They are intended for "quick & dirty" style sheets and should be set to an explicit value. |
| | 217 | |
| | 218 | |
| | 219 | |
| | 220 | |
| | 221 | |
| | 222 | == Line styles == |
| | 223 | ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| |
| | 224 | || {{{width}}} || Line width || ''Width'' || - || |
| | 225 | || {{{color}}} || Line color || ''Color'' || value of {{{fill-color}}} or (if unset) JOSM's default untagged color ({{{#808080}}}) || |
| | 226 | || {{{opacity}}} || How transparent the line is. || ''Opacity'' || 1.0 || |
| | 227 | || {{{dashes}}} || An array of alternating on/off lengths || list of numbers, e.g. [[br]]> 15, 5 [[br]][[br]]or written as expression: [[br]] > {{{list(3, 4, 5, 6)}}} || - || |
| | 228 | || {{{dashes-offset}}} || shift the dash pattern by a certain amount || ''Number'' (>= 0) || 0 || |
| | 229 | || {{{dashes-background-color}}} || The color to use in between the dashes (optional) || ''Color'' || - || |
| | 230 | || {{{dashes-background-opacity}}} || Opacity value for the dashes background || ''Opacity'' || value of {{{opacity}}} || |
| | 231 | || {{{linecap}}} || Shape at the end of the line (see [http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty here]) || {{{none}}}, {{{round}}}, {{{square}}} || {{{none}}} || |
| | 232 | || {{{linejoin}}} || Shape at the line corners || {{{round}}}, {{{miter}}}, {{{bevel}}} || {{{round}}} || |
| | 233 | || {{{miterlimit}}} || Applies for {{{linejoin: miter}}}. Sets the maximum overshoot when line segments meet at a very small angle || ''Number'' (>= 1.0) || 10.0 || |
| | 234 | || {{{text-position}}} || set to {{{line}}}, if text should be drawn along the line || {{{line}}}, {{{center}}} || - || |
| | 235 | || {{{text-...}}}, {{{font-...}}} |||||| general text & font properties || |
| | 236 | All these properties (except for {{{text-...}}} and {{{font-...}}}) exist also with the {{{casing-}}} prefix. The casing is a second independent line element, that is drawn below the normal line and can be used to draw a thin frame around the line in another color. |
| | 237 | ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| |
| | 238 | || {{{casing-width}}} || Casing width || ''Width'' (revers to {{{width}}} if relative width is specified) || - || |
| | 239 | || {{{casing-color}}} || Casing color || ''Color'' || value of {{{fill-color}}} or (if unset) JOSM's default untagged color ({{{#808080}}}) || |
| | 240 | || {{{casing-opacity}}} || How transparent the casing is. || ''Opacity'' || 1.0 || |
| | 241 | || {{{casing-}}}... || ... || ... || ... || |
| | 242 | |
| | 243 | == Area styles == |
| | 244 | ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| |
| | 245 | || {{{fill-color}}} || Color in which to fill the area || ''Color'' || - || |
| | 246 | || {{{fill-image}}} || Image pattern || ''Image'' || - || |
| | 247 | || {{{fill-opacity}}} || How transparent the fill is; applies to both color and image || ''Opacity'' || 1.0 || |
| | 248 | || {{{text-position}}} || set to {{{center}}}, if text should be drawn in the center of the area || {{{line}}}, {{{center}}} || - || |
| | 249 | || {{{text-...}}}, {{{font-...}}} |||||| general text & font properties || |
| | 250 | Required properties to create an Area style: {{{fill-color}}} or {{{fill-image}}} |
| | 251 | |
| | 252 | == Text & Font properties == |
| | 253 | |
| | 254 | ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| |
| | 255 | || {{{text}}} || how to find the label text; no label is displayed, unless this property is set || > {{{auto}}} [[br]]derive the text 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}}}"[[br]][[br]]> ''String'' [[br]]use as key to look up the value || - || |
| | 256 | || {{{text-color}}} || the text color || ''Color'' || {{{white}}} for lines and nodes, {{{#c0c0c0}}} for areas (JOSM "{{{text}}}" and "{{{areatext}}}" color preferences) || |
| | 257 | || {{{text-offset-x}}} || shift the text horizontally, (not supported for text along line) || ''Number'' || 0 || |
| | 258 | || {{{text-offset-y}}} (can also be written as {{{text-offset}}}) || shift the text vertically, positive values shift the text in upwards direction || ''Number'' || 0 || |
| | 259 | || {{{font-family}}} || font family || ''String'' || "Helvetica"[[br]](JOSM preference "mappaint.font") || |
| | 260 | || {{{font-size}}} || font size || ''Number'' || 8[[br]](JOSM preference "mappaint.fontsize") || |
| | 261 | || {{{font-wheight}}} || bold or not || {{{bold}}}, {{{normal}}} || {{{normal}}} || |
| | 262 | || {{{font-style}}} || italic or not || {{{italic}}}, {{{normal}}} || {{{normal}}} || |
| | 263 | |
| | 264 | '' '''Width''' '' |
| | 265 | - 14.0 (any positive number) |
| | 266 | - {{{default}}} (use JOSM's default line width, which is 2, but can be configured) |
| | 267 | - {{{thinnest}}} (draws the line as thin as possible) |
| | 268 | - +3 (with plus sign in front) adds the amount to the width on the default layer. This applies only for styles that are not on the default layer, e.g. highlights. Another way to write this would be {{{prop("width","default")+3}}}. For {{{casing-width}}}, this refers to the {{{width}}} value on the same layer. |
| | 269 | |
| | 270 | '' '''Color''' '' |
| | 271 | * named color as found in [http://www.w3.org/TR/css3-color/#svg-color this] list |
| | 272 | * html style: '''{{{#ff0000}}}''' |
| | 273 | * '''{{{rgb(0.0, 1.0 , 0.2)}}}''' - rgb value with arguments from 0.0 to 1.0 |
| | 274 | |
| | 275 | '' '''Opacity''' '' |
| | 276 | * from 0.0 (transparent) to 1.0 (opaque) |
| | 277 | |
| | 278 | '' '''String''' '' |
| | 279 | * any character sequence, in quotes, e.g. {{{"images/fill.png"}}}. If the string is an identifier, quotes are optional. (Quote and backslash sign can be escaped.) |
| | 280 | |
| | 281 | '' '''Number''' '' |
| | 282 | * integer or floating point (in simple form e.g. 0.3). In general can be negative, but most properties do not support negative numbers |
| | 283 | * has a special meaning if you put a "+" sign in front (relative width) |
