Changes between Version 11 and Version 12 of Help/Styles/MapCSSImplementation


Ignore:
Timestamp:
2011-04-11T12:05:43+02:00 (15 years ago)
Author:
Gubaer
Comment:

updated documentation

Legend:

Unmodified
Added
Removed
Modified

  • Help/Styles/MapCSSImplementation

    v11 v12  
    1818
    1919== Selectors ==
    20 Examples for selectors are
    21 {{{
    22 way[highway=residential] {...}
     20''Selectors'' denote the filter expressions of a MapCSS rule. The rule is only applied to a map object, if its selectors match
     21with the object.
     22
     23Selectors in MapCSS are different from standard CSS for the web. MapCSS only supports a subset of the standard CSS selectors, but
     24extends them with additional selectors required for OSM data.
     25
     26Some basic examples:
     27{{{
     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">
     30/* applied to ways with a tag highway=residential */
     31way[highway=residential] {  /*  the styles */}
     32
     33/* applied to new, closed ways on layer 1, provided they have the tag amenity=parking and access=parking, and provided
     34 * the zoom level is between 11 and 14
     35 */
    2336way|z11-14[amenity=parking][access=public]:closed:new::layer_1 {...}
     37
     38
    2439area[amenity=parking][access=public], area[amenity=parking][!access] {...}
    2540relation[type=route][route=foot] > way::relation_underlay {..}
    26 }}}
     41</pre>
     42}}}
     43
     44
    2745The different elements ('''type'''-, '''zoom'''- , '''condition''' selector, '''pseudo classes''', '''layer identifier''', '''grouping''' and '''child combinator''') are explained below.
    2846
     47
    2948=== 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 {{{
     49
     50{{{#!th align=left valign=top
     51'''Selector'''
     52}}}
     53{{{#!th align=left valign=top
     54'''Description'''
     55}}}
     56|-------------------------------------------------------------------------------
     57{{{#!td align=left  valign=top
     58*
     59}}}
     60{{{#!td align=left  valign=top   
     61Matches with any object
     62}}}
     63|-------------------------------------------------------------------------------
     64{{{#!td align=left  valign=top
     65{{{node}}}, {{{way}}}, {{{relation}}}
     66}}}
     67{{{#!td align=left  valign=top   
     68Matches with the osm objects of the given type.
     69}}}
     70|-------------------------------------------------------------------------------
     71{{{#!td align=left  valign=top
     72{{{area}}}
     73}}}
     74{{{#!td align=left  valign=top   
     75Matches 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.
     76{{{
     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">
    3779area[natural=beach] {...}
    38 }}}
    39   is the same as
    40 {{{
     80/* ... is equal to ... */
    4181way[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 {{{
     82</pre>
     83}}}
     84Note 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.
     85}}}
     86|-------------------------------------------------------------------------------
     87{{{#!td align=left  valign=top
     88{{{meta}}}
     89}}}
     90{{{#!td align=left  valign=top   
     91The {{{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.
     92{{{
     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">
    4795meta {
    4896    title: "Parking lanes";   /* title shown in the menu */
    4997    icon: "images/logo.png";  /* small icon shown in the menu next to the title */
    5098}
    51 }}}
    52  {{{canvas}}}::
    53   Some style information not specific to nodes, ways or relations.
    54 {{{
     99</pre>
     100}}}
     101}}}
     102|-------------------------------------------------------------------------------
     103{{{#!td align=left  valign=top
     104{{{canvas}}}
     105}}}
     106{{{#!td align=left  valign=top   
     107Some style information not specific to nodes, ways or relations.
     108{{{
     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">
    55111canvas {
    56112    background-color: #ffffea;
    57113}
    58 }}}
     114</pre>
     115}}}
     116}}}
     117
     118=== Child selector ===
     119If a node is part of a way, we say that it is a ''child'' of this way. Similarly, if a node, a way, or a relation is a member
     120of a relation, we say, that it is a ''child'' of this relation.
     121
     122In MapCSS you can use a '''child selector''' which matches only if both the parent and the child object match.
     123
     124Example:
     125{{{
     126#!html
     127<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">
     128/*
     129 * only matches for a way which is a child of a relation with tags
     130 * type=route and route=foot
     131 */
     132relation[type=route][route=foot] > way {...}
     133</pre>
     134}}}
     135
     136Notes:
     137* Zoom selector and Layer identifier are only relevant for the part to the right of the > sign.
     138
     139
     140=== Parent selector ===
     141In addition to child selectors, JOSMs supports the the notion of a '''parent selector'''. Note, that parent selectors are a
     142JOSM-specific extension of MapCSS not present in other MapCSS implementations.
     143
     144Similar to a child selector, a parent selector only matches if if both the parent and the child object match. In contrast to
     145to the child selector, the character < is used. In contrast to the child selector, the right hand side of the selector expression
     146denotes the selector for the parent object.
     147
     148Example:
     149{{{
     150#!html
     151<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">
     152/*
     153 * only matches for a way which is a child of a relation with tags
     154 * type=route and route=foot
     155 */
     156way < relation[type=route][route=foot] {...}
     157</pre>
     158}}}
     159
     160=== Condition selector ===
     161Selectors can include a set of conditions. If any of these conditions evaluates to false, the selector doesn't match and the style
     162rule isn't applied.
     163
     164An '''attribute selector''' specifies a condition on a tag of an OSM object.
     165
     166[=#condition_selector_operators]
     167{{{#!th align=left valign=top
     168'''Operator'''
     169}}}
     170{{{#!th align=left valign=top
     171'''Description'''
     172}}}
     173{{{#!th align=left valign=top
     174'''Example'''
     175}}}
     176|-------------------------------------------------------------------------------
     177{{{#!td align=left  valign=top
     178=
     179}}}
     180{{{#!td align=left  valign=top   
     181Exact match of the value.
     182}}}
     183{{{#!td align=left  valign=top   
     184{{{
     185#!html
     186<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">
     187way[highway=residential]                   /* without quotes always case insensitive */
     188node[name="My name"]                       /* use quotes for if value includes spaces or if case sensitive matching is important */
     189node["MY_Special_TAG"="another value"]     /* use quotes for tag names if case sensitive matching is required */
     190node["name:fr"="mon nome"]                 /* use quotes for tag names with special characters like colons*/
     191</pre>
     192}}}
     193}}}
     194|-------------------------------------------------------------------------------
     195{{{#!td align=left  valign=top
     196!=
     197}}}
     198{{{#!td align=left  valign=top   
     199Value not equal
     200}}}
     201{{{#!td align=left  valign=top   
     202{{{
     203#!html
     204<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">
     205way[highway!=residential]                   /* without quotes always case insensitive */
     206node[name!="My name"]                       /* use quotes if value includes spaces or if case sensitive matching is important */
     207node["MY_Special_TAG"!="another value"]     /* use quotes for tag names if case sensitive matching is required */
     208node["name:fr"!="mon nome"]                 /* use quotes for tag names with special characters like colons*/
     209</pre>
     210}}}
     211}}}
     212|-------------------------------------------------------------------------------
     213{{{#!td align=left  valign=top
     214<,>, <=, >=
     215}}}
     216{{{#!td align=left  valign=top   
     217Comparision for numeric values.
     218
     219}}}
     220{{{#!td align=left  valign=top   
     221{{{
     222#!html
     223<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">
     224node[population > 50000]                    /* without quotes always case insensitive */
     225node[ele <= 3000]                           /* use quotes for if value includes spaces or if case sensitive matching is important */
     226</pre>
     227}}}
     228}}}
     229|-------------------------------------------------------------------------------
     230{{{#!td align=left  valign=top
     231^=
     232}}}
     233{{{#!td align=left  valign=top   
     234Prefix match
     235}}}
     236{{{#!td align=left  valign=top   
     237{{{
     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">
     240node[name ^= "myprefix"]                    /* value starts with 'myprefix' */
     241</pre>
     242}}}
     243}}}
     244|-------------------------------------------------------------------------------
     245{{{#!td align=left  valign=top
     246$=
     247}}}
     248{{{#!td align=left  valign=top   
     249Postfix match
     250}}}
     251{{{#!td align=left  valign=top   
     252{{{
     253#!html
     254<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">
     255node[name $= "mypostfix"]                    /* value ends with 'mypostfix' */
     256</pre>
     257}}}
     258}}}
     259|-----------------------------------------------
     260{{{#!td align=left  valign=top
     261*=
     262}}}
     263{{{#!td align=left  valign=top   
     264Substring match
     265}}}
     266{{{#!td align=left  valign=top   
     267{{{
     268#!html
     269<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">
     270node[name *= "my substring"]                  /* value contains the substring 'my substring' */
     271</pre>
     272}}}
     273}}}
     274|-------------------------------------------------------------------------------
     275{{{#!td align=left  valign=top
     276=~
     277}}}
     278{{{#!td align=left  valign=top   
     279* List membership
     280* [http://download.oracle.com/javase/6/docs/api/java/util/regex/Pattern.html#sum Regular expression] match
     281
     282}}}
     283{{{#!td align=left  valign=top   
     284{{{
     285#!html
     286<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">
     287
     288*[vending~=stamps]                          /* the tag value for the tag 'vending' consists of a list of ;-separated values    */
     289                                            /* and one of these values is 'stamps'                                             */
     290                                           
     291name[name=~/^My_pattern.*/]                 /* the value of the tag 'name' matches with the regular expression '^My_pattern.*' */
     292                                            /* Note, that reqular expressions have to be enclosed in /.../                     */                 
     293</pre>
     294}}}
     295}}}
     296
     297In addition, you can test whether a tag is present or not:
     298
     299{{{#!th align=left valign=top
     300'''Condition'''
     301}}}
     302{{{#!th align=left valign=top
     303'''Example'''
     304}}}
     305|-------------------------------------------------------------------------------
     306{{{#!td align=left  valign=top
     307Presence of tag
     308}}}
     309{{{#!td align=left  valign=top   
     310{{{
     311#!html
     312<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">
     313way[highway]                     /* matches any way with a tag 'highway'                                              */
     314way["VALSOU"]                    /* use quotes if case sensitive matching is required                                 */
     315way["name:fr"]                   /* use quotes if the tag name includes special caracters (white space, colons, etc.) */
     316</pre>
     317}}}
     318}}}
     319|-------------------------------------------------------------------------------
     320{{{#!td align=left  valign=top
     321Absence of tag
     322}}}
     323{{{#!td align=left  valign=top   
     324{{{
     325#!html
     326<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">
     327way[!highway]                     /* matches any way which does not have a tag 'highway'                                              */
     328way[!"VALSOU"]                    /* use quotes if case sensitive matching is required                                 */
     329way[!"name:fr"]                   /* use quotes if the tag name includes special caracters (white space, colons, etc.) */
     330</pre>
     331}}}
     332}}}
     333
     334You can test whether the the value of a tag is logical truth value. The value is evaluated to true, if it is either
     335"yes", "true", or "1". All other values are evaluated to false.
     336
     337{{{#!th align=left valign=top
     338'''Condition'''
     339}}}
     340{{{#!th align=left valign=top
     341'''Example'''
     342}}}
     343|-------------------------------------------------------------------------------
     344{{{#!td align=left  valign=top
     345Testing for truth value
     346}}}
     347{{{#!td align=left  valign=top   
     348{{{
     349#!html
     350<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">
     351way[oneway?]                  /* matches any way with a truth value in the tag 'oneway'  */
     352</pre>
     353}}}
     354}}}
     355
     356=== Link selector ===
     357In a child selector, you can formulate conditions on the link between a parent and a child object.
     358
     359If the parent is a relation, you can formulate conditions for the ''role'' a member objects has in this relation.
     360{{{
     361#!html
     362<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">
     363relation[type=route] >[role="link"] way {  /* matches any way which is a member of route relation with role 'link' */
     364   color: blue;
     365}
     366</pre>
     367}}}
     368
     369{{{#!th align=left valign=top
     370'''Operator'''
     371}}}
     372{{{#!th align=left valign=top
     373'''Description'''
     374}}}
     375{{{#!th align=left valign=top
     376'''Example'''
     377}}}
     378|-------------------------------------------------------------------------------
     379{{{#!td align=left  valign=top
     380=
     381}}}
     382{{{#!td align=left  valign=top   
     383Exact match of the role name. The name name {{{role}}} is compulsory in this context.
     384}}}
     385{{{#!td align=left  valign=top   
     386{{{
     387#!html
     388<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">
     389relation >[role=residential] way           /* without quotes always case insensitive */
     390relation >[role="My name"]   way           /* use quotes for if the role value includes spaces or if case sensitive matching is important */
     391</pre>
     392}}}
     393}}}
     394
     395The operators {{{!=, ^=, $=, *=, and ~=}}} are supported too. Please refer to [#condition_selector_operators condition selector operators].
     396
     397Nodes in ways and members in relations are ordered. You can formulate conditions on the position of a node in a way or a member
     398object in a relation.
     399
     400{{{
     401#!html
     402<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">
     403relation[type=route] >[index=1] way {  /* matches the first way which is a member of route relation  */
     404   color: blue;
     405}
     406</pre>
     407}}}
     408
    59409
    60410=== Zoom selector ===
    61 You can restrict the scale at which a given rule applies.
     411You can decorate a type selector with a '''zoom selector'''. The zoom selector restricts the range of zoom levels
     412at which the respective MapCSS rule is applied.
     413
     414{{{#!th align=left valign=top
     415'''Example'''
     416}}}
     417{{{#!th align=left valign=top
     418'''Description'''
     419}}}
     420|-------------------------------------------------------------------------------
    62421|| {{{way|z12 {...}}}} || At zoom level 12 ||
    63422|| {{{way|z13-15 {...}}}} || From 13 to 15 ||
    … …  
    65424|| {{{way|z-12 {...}}}} || 12 and below ||
    66425|| {{{way {...}}}} || any zoom level ||
     426
    67427The precise definition of scale ranges for each zoom level may change in the future. By rule of thumb you can expect to be approximately at zoom level ''n'' when imagery displays slippymap tiles of level ''n''.
    68428
    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 || {{{*[name=~/.../]}}} || [http://download.oracle.com/javase/6/docs/api/java/util/regex/Pattern.html#sum Regex] ||
    81 
    82 
    83 In addition, eval expressions can be used in the brackets, e.g.
    84 || {{{way[eval(prop("opacity")<0.2)]}}} || any way where the current value of the {{{opacity}}} property is less then 0.2 ||
    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}}} ||
    86429
    87430=== Pseudo Classes ===
    … …  
    164507}}}
    165508
    166 === Child combinator ===
    167 You can select nodes that are part of specific ways and any object that is member of a certain relation:
    168 {{{
    169 relation[type=route][route=foot] > way|z12-::relation_underlay {...}
    170 }}}
    171 Zoom selector and Layer identifier are only relevant for the part right of the ">" sign.
    172509
    173510=== Grouping ===
    … …  
    188525
    189526== Properties ==
    190 
    191 
    192527
    193528=== General properties ===