Changes between Version 31 and Version 32 of Help/Styles/MapCSSImplementation


Ignore:
Timestamp:
2013-12-29T14:32:07+01:00 (12 years ago)
Author:
simon04
Comment:

+secion on classes, use syntax highlighting

Legend:

Unmodified
Added
Removed
Modified

  • Help/Styles/MapCSSImplementation

    v31 v32  
    44A MapCSS style sheet has rules of the form
    55{{{
     6#!mapcss
    67selector {
    78    prop: value;
    8     ...
     9    /* ... */
    910    prop: value;
     11    /* and/or */
     12    set: class;
     13    set: .class;
    1014}
    1115}}}
    … …  
    2630Some basic examples:
    2731{{{
    28 #!html
    29 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     32#!mapcss
    3033/* applied to ways with a tag highway=residential */
    3134way[highway=residential] {  /*  the styles */}
    … …  
    3942area[amenity=parking][access=public], area[amenity=parking][!access] {...}
    4043relation[type=route][route=foot] > way::relation_underlay {..}
    41 </pre>
    4244}}}
    4345
    … …  
    7577Matches with any area regardless of whether the area border is only modelled with a single way or with a set of ways glued together with a relation.
    7678{{{
    77 #!html
    78 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     79#!mapcss
    7980area[natural=beach] {...}
    8081/* ... is equal to ... */
    8182way[natural=beach], relation[type=multipolygon][natural=beach] {...}
    82 </pre>
    8383}}}
    8484Note 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.
    … …  
    9191The {{{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.
    9292{{{
    93 #!html
    94 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     93#!mapcss
    9594meta {
    9695    title: "Parking lanes";   /* title shown in the menu */
    9796    icon: "images/logo.png";  /* small icon shown in the menu next to the title */
    9897}
    99 </pre>
    10098}}}
    10199}}}
    … …  
    107105Some style information not specific to nodes, ways or relations.
    108106{{{
    109 #!html
    110 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     107#!mapcss
    111108canvas {
    112109    background-color: #ffffea;
    … …  
    114111    default-lines: false;
    115112}
    116 </pre>
    117113}}}
    118114{{{#!th
    … …  
    177173Example:
    178174{{{
    179 #!html
    180 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     175#!mapcss
    181176/*
    182177 * only matches for a way which is a child of a relation with tags
    … …  
    184179 */
    185180relation[type=route][route=foot] > way {...}
    186 </pre>
    187181}}}
    188182
    … …  
    202196Example:
    203197{{{
    204 #!html
    205 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     198#!mapcss
    206199/*
    207200 * matches for a highway which has at least one node tagged as traffic_calming=*
    208201 */
    209202node[traffic_calming] < way[highway] {...}
    210 </pre>
    211203}}}
    212204
    … …  
    236228{{{#!td align=left  valign=top   
    237229{{{
    238 #!html
    239 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     230#!mapcss
    240231way[highway=residential]                   /* without quotes always case insensitive */
    241232node[name="My name"]                       /* use quotes for if value includes spaces or if case sensitive matching is important */
    … …  
    243234node["ÖPVN"=tram]                          /* use quotes for tag keys with special characters */
    244235                                           /*   note that these are not common in OSM at the moment */
    245 </pre>
    246236}}}
    247237}}}
    … …  
    255245{{{#!td align=left  valign=top   
    256246{{{
    257 #!html
    258 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     247#!mapcss
    259248way[highway!=residential]                   /* without quotes always case insensitive */
    260249node[name!="My name"]                       /* use quotes if value includes spaces or if case sensitive matching is important */
    261250node["MY_Special_TAG"!="another value"]     /* use quotes for tag names if case sensitive matching is required */
    262251node["name:fr"!="mon nome"]                 /* use quotes for tag names with special characters like colons*/
    263 </pre>
    264252}}}
    265253}}}
    … …  
    274262{{{#!td align=left  valign=top   
    275263{{{
    276 #!html
    277 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     264#!mapcss
    278265node[population > 50000]                    /* without quotes always case insensitive */
    279266node[ele <= 3000]                           /* use quotes for if value includes spaces or if case sensitive matching is important */
    280 </pre>
    281267}}}
    282268}}}
    … …  
    290276{{{#!td align=left  valign=top   
    291277{{{
    292 #!html
    293 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     278#!mapcss
    294279node[name ^= "myprefix"]                    /* value starts with 'myprefix' */
    295 </pre>
    296280}}}
    297281}}}
    … …  
    305289{{{#!td align=left  valign=top   
    306290{{{
    307 #!html
    308 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     291#!mapcss
    309292node[name $= "mypostfix"]                    /* value ends with 'mypostfix' */
    310 </pre>
    311293}}}
    312294}}}
    … …  
    320302{{{#!td align=left  valign=top   
    321303{{{
    322 #!html
    323 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     304#!mapcss
    324305node[name *= "my substring"]                  /* value contains the substring 'my substring' */
    325 </pre>
    326306}}}
    327307}}}
    … …  
    335315{{{#!td align=left  valign=top   
    336316{{{
    337 #!html
    338 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     317#!mapcss
    339318*[vending~=stamps]                          /* the tag value for the tag 'vending' consists of a list of ;-separated values    */
    340319                                            /* and one of these values is 'stamps'                                             */
    341 </pre>
    342320}}}
    343321}}}
    … …  
    352330{{{#!td align=left  valign=top   
    353331{{{
    354 #!html
    355 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     332#!mapcss
    356333name[name=~/^My_pattern.*/]                 /* the value of the tag 'name' matches with the regular expression '^My_pattern.*' */
    357334                                            /* Note, that reqular expressions have to be enclosed in /.../                     */                 
    358 </pre>
    359335}}}
    360336}}}
    … …  
    369345{{{#!td align=left  valign=top   
    370346{{{
    371 #!html
    372 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
    373 *[surface!~/paved|unpaved/]</pre>
     347#!mapcss
     348*[surface!~/paved|unpaved/]
    374349}}}
    375350}}}
    … …  
    389364{{{#!td align=left  valign=top   
    390365{{{
    391 #!html
    392 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     366#!mapcss
    393367way[highway]                     /* matches any way with a tag 'highway'                                              */
    394368way["VALSOU"]                    /* use quotes if case sensitive matching is required                                 */
    395369way["name:fr"]                   /* use quotes if the tag name includes special caracters (white space, colons, etc.) */
    396 </pre>
    397370}}}
    398371}}}
    … …  
    403376{{{#!td align=left  valign=top   
    404377{{{
    405 #!html
    406 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     378#!mapcss
    407379way[!highway]                     /* matches any way which does not have a tag 'highway'                                              */
    408380way[!"VALSOU"]                    /* use quotes if case sensitive matching is required                                 */
    409381way[!"name:fr"]                   /* use quotes if the tag name includes special caracters (white space, colons, etc.) */
    410 </pre>
    411382}}}
    412383}}}
    … …  
    434405{{{#!td align=left  valign=top   
    435406{{{
    436 #!html
    437 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     407#!mapcss
    438408way[oneway?]                  /* matches any way with a truth value in the tag 'oneway'  */
    439 </pre>
    440409}}}
    441410}}}
    … …  
    446415{{{#!td align=left  valign=top   
    447416{{{
    448 #!html
    449 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     417#!mapcss
    450418way[oneway?!]                  /* matches any way with a false value in the tag 'oneway'  */
    451 </pre>
    452419}}}
    453420}}}
    … …  
    458425If the parent is a relation, you can formulate conditions for the ''role'' a member objects has in this relation.
    459426{{{
    460 #!html
    461 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     427#!mapcss
    462428relation[type=route] >[role="link"] way {  /* matches any way which is a member of route relation with role 'link' */
    463429   color: blue;
    464430}
    465 </pre>
    466431}}}
    467432
    … …  
    484449{{{#!td align=left  valign=top   
    485450{{{
    486 #!html
    487 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     451#!mapcss
    488452relation >[role=residential] way           /* without quotes always case insensitive */
    489453relation >[role="My name"]   way           /* use quotes for if the role value includes spaces or if case sensitive matching is important */
    490 </pre>
    491454}}}
    492455}}}
    … …  
    498461
    499462{{{
    500 #!html
    501 <pre class="mapcss" style="text-align: left; font: Courier; font-size: 10pt; background:rgb(242,243,210); border-style: dotted; border-width:1pt; border-color:darkGray; padding: 5pt">
     463#!mapcss
    502464relation[type=route] >[index=1] way {  /* matches the first way which is a member of route relation  */
    503465   color: blue;
    504466}
    505 </pre>
    506467}}}
    507468
    … …  
    540501Layers can be used to create more than one style for a single object. Here is an example:
    541502{{{
     503#!mapcss
    542504way[highway=secondary] {
    543505    width: 3;
    … …  
    574536 It overrides all existing subparts, so
    575537{{{
     538#!mapcss
    576539way::A { a; }
    577540way::B { b; }
    … …  
    580543 is equivalent to
    581544{{{
     545#!mapcss
    582546way::A { a; }
    583547way::B { b; }
    … …  
    587551 And it initializes new subparts. In other words:
    588552{{{
     553#!mapcss
    589554way::* { a; }
    590555way::A { b; }
    … …  
    592557 is equivalent to
    593558{{{
     559#!mapcss
    594560way::A {}
    595561way::* { a; }
    … …  
    598564 which is in turn the same as
    599565{{{
     566#!mapcss
    600567way::A { a; }
    601568way::A { b; }
    … …  
    603570 or
    604571{{{
     572#!mapcss
    605573way::A { a; b; }
    606574}}}
    … …  
    611579Rules with common declaration block can be grouped into one:
    612580{{{
     581#!mapcss
    613582area[landuse=forest] { color: green;   width: 2; }
    614583area[natural=wood] { color: green;   width: 2; }
    … …  
    616585is the same as
    617586{{{
     587#!mapcss
    618588area[landuse=forest], area[natural=wood] { color: green;   width: 2; }
    619589}}}
    620590
    621 
     591=== Classes ===
     592You may assign classes to matched elements, and define other selectors using those classes:
     593
     594{{{
     595#!mapcss
     596/* assigning classes */
     597selector {
     598  set class;
     599  /* or equivalently */
     600  set .class;
     601}
     602
     603/* matching classes */
     604way.class, node[foo=bar].class {
     605  /* ... */
     606}
     607}}}
     608
     609
     610Example for assigning/matching a class named `path`:
     611{{{
     612#!mapcss
     613way[highway=footway] { set path; color: #FF6644; width: 2; }
     614way[highway=path]    { set path; color: brown; width: 2; }
     615way.path { text:auto; text-color: green; text-position: line; text-offset: 5; }
     616}}}
    622617
    623618
    … …  
    859854* circle symbol for house number with size depending of the number of digits
    860855{{{
     856#!mapcss
    861857node[addr:housenumber] {
    862858    symbol-shape: circle;
    … …  
    879875* invert colors
    880876{{{
     877#!mapcss
    881878*::* {
    882879    color: eval(rgb(1 - red(prop(color)), 1 - green(prop(color)), 1 - blue(prop(color))));
    … …  
    886883* random stuff
    887884{{{
     885#!mapcss
    888886way {
    889887    width: eval(random() * 20);
    … …  
    894892* regexp matching example: change "nameXXXsubname" to "name::subname"
    895893{{{
     894#!mapcss
    896895*[name=~/.+XXX.+/]
    897896{
    … …  
    912911 * JOSM MapCSS is not liberal with white spaces in the selector, they are only permitted before and after ''comma'' and ''greater sign'' (Grouping and Child combinator).
    913912 * {{{way[oneway=yes]}}} does not have any magic, you can use {{{way[oneway?]}}} instead
    914  * {{{set}}} is not supported, instead of
    915 {{{
    916 way[highway=footway] { set path; color: #FF6644; width: 2; }
    917 way[highway=path]    { set path; color: brown; width: 2; }
    918 way.path { text:auto; text-color: green; text-position: line; text-offset: 5; }
    919 }}}
    920   you can write
    921 {{{
    922 way[highway=footway] { path-set : true; color: #FF6644; width: 2; }
    923 way[highway=path]    { path-set : true; color: brown; width: 2; }
    924 way[eval(prop(path-set))] { text:auto; text-color: green; text-position: line; text-offset: 5; }
    925 }}}
    926913 * no stacking of declaration blocks, you have to provide explicit layer names
    927914 * no {{{@import}}}
    … …  
    945932 * Text label is placed in the center of the icon. For compatibility with Halcyon put
    946933{{{
     934#!mapcss
    947935node { text-anchor-vertical: center; text-anchor-horizontal: center; }
    948936}}}