Changes between Version 3 and Version 4 of Help/Styles/MapCSSImplementation
- Timestamp:
- 2011-03-07T16:12:38+01:00 (15 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
Help/Styles/MapCSSImplementation
v3 v4 1 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 = 2 [[TOC(inline)]] 3 == General Structure == 4 4 A MapCSS style sheet has rules of the form 5 5 {{{ … … 17 17 }}} 18 18 19 = Selectors = 19 == Selectors == 20 20 Examples for selectors are 21 21 {{{ … … 27 27 The different elements ('''type'''-, '''zoom'''- , '''condition''' selector, '''pseudo classes''', '''layer identifier''', '''grouping''' and '''child combinator''') are explained below. 28 28 29 == Type selector == 29 === Type selector === 30 30 {{{node}}}, {{{way}}}, {{{relation}}}:: 31 31 applies to the osm objects of the given type … … 58 58 }}} 59 59 60 == Zoom selector == 60 === Zoom selector === 61 61 You can restrict the scale at that the a given rule applies. 62 62 || {{{way|z12 {...}}}} || At zoom level 12 || … … 67 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 68 69 == Condition selector == 69 === Condition selector === 70 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 71 … … 85 85 || {{{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}}} || 86 86 87 == Pseudo Classes == 87 === Pseudo Classes === 88 88 89 89 || {{{:closed}}} || true for ways where the first node is the same as the last and for any multipolygon relation || … … 93 93 || {{{: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.) || 94 94 }}} 95 == Layer Identifier == 95 === Layer Identifier === 96 96 97 97 Layers can be used to create more than one style for a single object. Here is an example: … … 163 163 }}} 164 164 165 == Child combinator == 165 === Child combinator === 166 166 You can select nodes that are part of specific ways and any object that is member of a certain relation: 167 167 {{{ … … 170 170 Zoom selector and Layer identifier are only relevant for the part right of the ">" sign. 171 171 172 == Grouping == 172 === Grouping === 173 173 174 174 Rules with common declaration block can be grouped into one: … … 186 186 187 187 188 = Properties = 189 190 191 192 == General properties == 188 == Properties == 189 190 191 192 === General properties === 193 193 194 194 ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| … … 208 208 209 209 210 == Icon and symbol styles == 210 === Icon and symbol styles === 211 211 212 212 ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| … … 230 230 231 231 232 == Line styles == 232 === Line styles === 233 233 ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| 234 234 || {{{width}}} || Line width || ''Width'' || - || … … 251 251 || {{{casing-}}}... || ... || ... || ... || 252 252 253 == Area styles == 253 === Area styles === 254 254 ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| 255 255 || {{{fill-color}}} || Color in which to fill the area || ''Color'' || - || … … 260 260 Required properties to create an Area style: {{{fill-color}}} or {{{fill-image}}} 261 261 262 == Text & Font properties == 262 === Text & Font properties === 263 263 264 264 ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| … … 296 296 297 297 298 = Eval expressions = 298 == Eval expressions == 299 299 300 300 … … 345 345 346 346 347 == Examples == 347 === Examples === 348 348 349 349 * circle symbol for house number with size depending of the number of digits … … 387 387 388 388 389 = Compatibility notes = 390 == MapCSS 0.2 == 391 392 === Grammar === 389 == Compatibility notes == 390 === MapCSS 0.2 === 391 392 ==== Grammar ==== 393 393 394 394 * descendant combinator is not supported, use child combinator instead. … … 411 411 * JOSM does not require {{{eval(...)}}} to be wrapped around expressions, but for compatibility with other MapCSS implementations you should write it out. 412 412 413 === Properties === 413 ==== Properties ==== 414 414 At the moment, JOSM does not support the following properties: 415 415 canvas: :: … … 426 426 JOSM uses the MapCSS 0.1 way to specify {{{casing-width}}}, i.e. '''{{{casing-width: 9;}}}''' is an absolute value. You can write '''{{{casing-width: +4;}}}''' to specify a 2px casing on both sides. 427 427 428 == Halcyon (Potlatch 2) == 428 === Halcyon (Potlatch 2) === 429 429 430 430 * Text label is placed in the center of the icon. For compatibility with Halcyon put … … 436 436 * '''{{{image: circle;}}}''' corresponds to '''{{{symbol-shape: circle;}}}''' 437 437 438 == Kothic==438 === Kothic === 439 439 440 440 * Kothic has support for eval, which probably differs from JOSM's eval. … … 442 442 * The extrusion features are not available in JOSM 443 443 444 == Ceyx==444 === Ceyx === 445 445 446 446 * seems to have {{{[tunnel=1]}}} instead of {{{[tunnel=yes]}}} (Halcyon) or {{{[tunnel?]}}} (JOSM)
