Context Navigation

← Previous Change
Wiki History
Next Change →

MapCSSImplementation

Timestamp:: (multiple changes)
Author:: (multiple changes)
Comment:: (multiple changes)

Legend:

: Unmodified
: Added
: Removed
: Modified

Help/Styles/MapCSSImplementation

-              v199
+              v268
 * [wikitr:/Help/Action/Search Search dialog]
+Consider installing the [https://marketplace.visualstudio.com/items?itemName=whammo.mapcss-syntax MapCSS Syntax Highlighter] in VS Code to add visual highlighting for MapCSS paint and validator syntax.
 == General Structure ==
 …
     set: class;
     set: .class;
+    /* note that validator rules do not use the colon after set */
+}
 }}}
 …
 === Type selector ===
 {{{#!th valign=top
 '''Selector'''
 …
 Selectors can include a set of conditions. If any of these conditions evaluates to false, the selector doesn't match and the style rule isn't applied.
 An '''attribute condition''' specifies a condition on a tag of an OSM object.
+An '''attribute condition''' specifies a condition on a tag of an OSM object.
 [=#condition_selector_operators]
 {{{#!th valign=top
+{{{#!th valign=top
 '''Operator'''
 }}}
 …
 }}}
 |-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+{{{#!td align=center valign=top
 `=`
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 Exact match of the value.
 }}}
 {{{#!td align=left  valign=top
+{{{
+#!mapcss
+way[highway=residential]                    /* is case sensitive, i.e. does NOT match e.g. highway=Residential or Highway=residential */
+node[name="My name"]                        /* use quotes if key or value includes spaces */
 node["name:ru"="Калининград"]               /* use quotes if key or value includes special characters like colons or unicode characters */
+}}}
+}}}
+|-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+{{{#!td align=left valign=top
+{{{
+#!mapcss
+way[highway=residential]                    /* is case sensitive, i.e. does NOT match e.g. highway=Residential or Highway=residential   */
+node[name="My name"]                        /* use quotes if key or value includes spaces                                               */
+node["name:pl"="Królewiec"]                 /* use quotes if key or value includes special characters like colons or unicode characters */
+}}}
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center valign=top
 `!=`
 }}}
 {{{#!td align=left  valign=top
 Value not equal
+}}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
+Value not equal
+}}}
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 way[highway!=residential]
 node[name!="My name"]
 node["name:ru"!="Калининград"]
+}}}
+}}}
+|-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+node["name:pl"!="Królewiec"]
+}}}
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center valign=top
 `<`, `>`, `<=`, `>=`
 }}}
 {{{#!td align=left  valign=top
 Comparision for numeric values.
+}}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
+Comparison for numeric values.
+}}}
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 node[population >= 50000]                   /* population greater than or equal to 50000 */
+node[ele = 3000]                            /* elevation with exactly 3000 meters */
+}}}
+}}}
+|-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+node[ele = 3000]                            /* elevation with exactly 3000 meters        */
+}}}
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center valign=top
 `^=`
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 Prefix match
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 …
 }}}
 |-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+{{{#!td align=center valign=top
 `$=`
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 Postfix match
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 …
 }}}
 |-----------------------------------------------
 {{{#!td align=center  valign=top
+{{{#!td align=center valign=top
 `*=`
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 Substring match
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 …
 }}}
 |-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+{{{#!td align=center valign=top
 `~=`
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 List membership
 }}}
 {{{#!td align=left  valign=top
+{{{
+#!mapcss
 *[vending~=stamps]                          /* the tag value for the tag 'vending' consists of a list of ;-separated values    */
                                             /* and one of these values is 'stamps'                                             */
+}}}
+}}}
+|-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+{{{#!td align=left valign=top
+{{{
+#!mapcss
+*[vending~=stamps]                          /* the tag value for the tag 'vending' consists of a list of ;-separated values */
+                                            /* and one of these values is 'stamps'                                          */
+}}}
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center valign=top
 `=~`
 }}}
 {{{#!td align=left  valign=top
 [https://download.oracle.com/javase/8/docs/api/java/util/regex/Pattern.html#sum Regular expression] match
+}}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
+[https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/regex/Pattern.html#sum Regular expression] match
+}}}
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 *[name=~/^My_pattern.*/]                    /* the value of the tag 'name' matches with the regular expression '^My_pattern.*' */
                                             /* Note, that reqular expressions have to be enclosed in /.../                     */
+}}}
 Case-insensitive matching can be enabled via the embedded flag expression `(?i)` (see [https://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#CASE_INSENSITIVE Pattern.CASE_INSENSITIVE]).
+{{{
+#!mapcss
 *[name =~ /^(?i)(parking)$/]                 /* matches parking, Parking, PARKING, PaRkInG,... */
 *[name =~ /^(?U)(\p{Lower})+$/]              /* name consists of only lower case unicode characters */
+}}}
+}}}
+|-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+                                            /* Note, that reqular expressions have to be enclosed in /.../                     */
+}}}
+Case-insensitive matching can be enabled via the embedded flag expression `(?i)` (see [https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/regex/Pattern.html#CASE_INSENSITIVE Pattern.CASE_INSENSITIVE]).
+{{{
+#!mapcss
+*[name =~ /^(?i)(parking)$/]                 /* matches parking, Parking, PARKING, PaRkInG,...      */
+*[name =~ /^(?U)(\p{Lower})+$/]              /* name consists of only lower case unicode characters */
+}}}
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center valign=top
 `!~` (since r6455)
 }}}
 {{{#!td align=left  valign=top
 negated [https://download.oracle.com/javase/8/docs/api/java/util/regex/Pattern.html#sum Regular expression] match
+}}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
+negated [https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/regex/Pattern.html#sum Regular expression] match
+}}}
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 …
 }}}
 |-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+{{{#!td align=center valign=top
 `∈` ([https://www.fileformat.info/info/unicode/char/2208/index.htm U+2208], since r6609)
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 element of
 Matches when an object matches the right selector(s) contains at least one element which match the left selector(s).
+}}}
+{{{#!td align=left  valign=top
+}}}
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 …
+}
 }}}
+Finds areas with `amenity=parking` that contain at least one node or area with `amenity=parking`.
+Since r15064 this rule produces one warning for each element on the left when there are multiple matches.
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center  valign=top
+Finds areas with `amenity=parking` that contain at least one node or area with `amenity=parking`. Since r15064 this rule produces one warning for each element on the left when there are multiple matches.
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center valign=top
 `⊆` ([https://www.fileformat.info/info/unicode/char/2286/index.htm U+2286], since r15102)
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 Subset of or Equal To
 Synonym for `∈`.
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 …
 }}}
 |-------------------------------------------------------------------------------
 {{{#!td align=center  valign=top
+{{{#!td align=center valign=top
 `⊇` ([https://www.fileformat.info/info/unicode/char/2287/index.htm U+2287], since r15102)
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 Superset of or Equal To
 Matches when an object matches the right selector(s) and is contained in one or more elements which match the left selectors.
+}}}
+{{{#!td align=left  valign=top
+{{{
+#!mapcss
+area[amenity=parking] ⊇ *[amenity=parking]
+}}}
+{{{#!td align=left valign=top
+{{{
+#!mapcss
+area[amenity=parking] ⊇ *[amenity=parking]
 }}}
 finds nodes or areas with `amenity=parking` inside areas with `amenity=parking`. Slower than `⊆` and thus not useful in validator rules, but can be useful in the search dialog.
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center  valign=top
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center valign=top
 `⊈` ([https://www.fileformat.info/info/unicode/char/2288/index.htm U+2288], since r15102)
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 Neither a Subset of nor Equal To
 Matches when an object matches the right selector(s) and does not contain any element which matches the left selectors.
+}}}
+{{{#!td align=left  valign=top
+}}}
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 *[highway=street_lamp] ⊈ area:closed2[amenity=parking][lit=yes]
 }}}
+finds areas amenity=parking that have lit=yes but don't contain a lamp.
+Always add `:closed2` to avoid false positives as unclosed areas never contain something.
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center  valign=top
+finds areas amenity=parking that have lit=yes but don't contain a lamp. Always add `:closed2` to avoid false positives as unclosed areas never contain something.
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center valign=top
 `⊉` ([https://www.fileformat.info/info/unicode/char/2289/index.htm U+2289], since r15102)
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 Neither a Superset of nor Equal To
 Matches when an object matches the right selector(s) and is not contained in any area which matches the left selectors.
+}}}
+{{{#!td align=left  valign=top
+}}}
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 area[landuse=residential] ⊉ *[building]
 }}}
+finds buildings which are not inside any landuse=residential area. Note that this operator is likely to produce false positives
+when you have `landuse=residential`areas which don't match `:closed2`.
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center  valign=top
+finds buildings which are not inside any landuse=residential area. Note that this operator is likely to produce false positives when you have `landuse=residential`areas which don't match `:closed2`.
+}}}
+|-------------------------------------------------------------------------------
+{{{#!td align=center valign=top
 `⧉` ([https://www.fileformat.info/info/unicode/char/29c9/index.htm U+29C9], since r6613)
 }}}
 {{{#!td align=left  valign=top
+{{{#!td align=left valign=top
 crossing
+}}}
+{{{#!td align=left  valign=top
+}}}
+{{{#!td align=left valign=top
 {{{
 #!mapcss
 …
 |-------------------------------------------------------------------------------
 {{{#!td align=left  valign=top
 Presence of tag by [https://download.oracle.com/javase/8/docs/api/java/util/regex/Pattern.html#sum Regular expression] match (since r6547)
+Presence of tag by [https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/regex/Pattern.html#sum Regular expression] match (since r6547)
 }}}
 {{{#!td align=left  valign=top
 …
 {{{
 #!mapcss
 way[oneway?]                  /* matches any way with a truth value in the tag 'oneway'  */
+way[oneway?]                   /* matches any way with a truth value in the tag 'oneway' */
 }}}
 }}}
 …
 {{{
 #!mapcss
 way[oneway?!]                  /* matches any way with a false value in the tag 'oneway'  */
+way[oneway?!]                  /* matches any way with a false value in the tag 'oneway' */
 }}}
 }}}
 …
 === Zoom selector ===
 You can decorate a type selector with a '''zoom selector'''. The zoom selector restricts the range of zoom levels at which the respective MapCSS rule is applied.
+{{{#!th align=center valign=top
+'''Example'''
+}}}
+{{{#!th align=center valign=top
+'''Description'''
+}}}
+|-------------------------------------------------------------------------------
+|| `way|z12 {...} ` || At zoom level 12 ||
+|| `way|z13-15 {...} ` || From 13 to 15 ||
+|| `way|z16- {...} ` || 16 and above ||
+|| `way|z-12 {...} ` || 12 and below ||
+|| `way {...} ` || any zoom level ||
+||= '''Example 1''' =||= '''Example 2''' =||= '''Example 3''' =||= '''Description''' =||
+|| `way|z12 {...}` || `node|z12 {...}` || `node|z12[...] {...}` || At zoom level 12 ||
+|| `way|z13-15 {...}` || `node|z13-15 {...}` || `way|z13-15[...] {...}` ||From 13 to 15 ||
+|| `way|z16- {...}` || `node|z16- {...}` || `node|z16-[...] {...}` || 16 and above ||
+|| `way|z-12 {...}` || `node|z-12 {...}` || `node|z-12[...] {...}` || 12 and below ||
+|| `way {...}` || `node{...}` || `way[...] {...}` || any zoom level ||
 The 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''.
 …
 See [/doc/org/openstreetmap/josm/gui/mappaint/mapcss/ConditionFactory.PseudoClasses.html Javadoc] for the up-to-date list of pseudo classes supported by JOSM's MapCSS implementation.
 ||= Class =||= Description =||
+||= '''Class''' =||= '''Description''' =||
 || `:closed` || true for ways where the first node is the same as the last and for any (completely downloaded) multipolygon relation ||
 || `:closed2` || same as above, but this one ignores if a multipolygon is downloaded completely (since r9099) ||
 …
 || `:unconnected` || true for nodes that are not used by any way (since r6687) ||
 || `:tagged` || What JOSM considers tagged, i.e. an object that with a tag key other than the following: `source*`, `source_ref`, `note`, `comment`, `converted_by`, `created_by`, `watch*`, `fixme`, `FIXME`, `description`, `attribution` (version r4008; in this list, `*` is a glob)
+|| `:area-style` || true if the object has an area style ||
 || `:righthandtraffic` || true if there is right-hand traffic at the current location (since r7193); see [wikitr:/left-right-hand-traffic left-right-hand-traffic] for screenshot of areas ||
 || `:clockwise` || Whether the way is closed and oriented clockwise, or non-closed and the 1st, 2nd and last node are in clockwise order. ||
 …
 || `:in-downloaded-area` || true if an object is within source area and false if in the hatched area (since r8495). ||
 || `:selected` || true if an object is selected in the editor (since r9341). ||
+|| `:highlighted` || true if the object is highlighted ||
 || `:modified` || changed and new objects (since r7193). ||
 You can also negate pseudo classes. E.g. `!:new` for all old objects.
 …
 way::A { a; }
 way::B { b; }
+way::* { c; }
+way::* { c; }  /* overrides all existing subparts */
 }}}
 is equivalent to
 …
 way::A { a; }
 way::B { b; }
+way::A { c; }
+way::B { c; }
+way::A { c; } /* overrides a with c all existing subparts */
+way::B { c; } /* overrides b with c all existing subparts */
 }}}
 And it initializes new subparts. In other words:
 …
 }}}
 You can also negate classes. E.g. `way!.path` for all ways, which are not part of the class ''.path''.
+=== Classes and Layer together ===
+If you want to use layer and classes together, please note that you have to identify the class via is_prop_set.
+{{{#!mapcss
+node[railway=signal] { set sgnl; }
+/* it doesn't work */
+node.sgnl::layer_signal_icon  { z-index: 1000; ... icon: icon/signal-icon.svg; ... }
+node.sgnl::layer_signal_text  { z-index: 1010; ... text: concat("Name of signal: ", tag("ref")); ..... )
+/* use instead: is_prop_set("...", "default") */
+node[is_prop_set("sgnl", "default")]::layer_signal_icon  { z-index: 1000; ... icon: icon/signal-icon.svg; ... }
+node[is_prop_set("sgnl", "default")]::layer_signal_text  { z-index: 1010; ... text: concat("Name of signal: ", tag("ref")); ..... )
+}}}
 === @supports Conditional Processing  ===
 …
 }}}
+Settings groups are displayed as sub-menus from the style settings menu. If at least two settings belong to a group, a special "Toggle all settings" menu item allows to quickly switch on/off all settings from this group at once. Usage example: [wiki:/Styles/MapWithAI MapWithAI].
+Settings groups are displayed as sub-menus from the style settings menu. If at least two settings belong to a group, a special "Toggle all settings" menu item allows to quickly switch on/off all settings from this group at once. Usage example: [wikitr:/Styles/MapWithAI MapWithAI].
 …
 || `icon-offset-x` || Shift the icon in horizontal direction (positive values to the right) (since r8085) || ''Number'' ||  0  ||
 || `icon-offset-y` || Shift the icon in vertical direction (positive values downwards) (since r8085) || ''Number'' ||  0  ||
+|| `icon-rotation` || Rotate the icon clockwise or anti clockwise (negative value)(since r8260) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` ([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) or a cardinal direction (e.g. `northeast` or `sw`); See also the functions `degree_to_radians`, `cardinal_to_radians`. ||  -  ||
+|| `icon-rotation` || Rotate the icon clockwise or anti clockwise (negative value)(since r8260) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` ([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) \\ or a cardinal direction (e.g. `northeast` or `sw`); \\ or `way` to rotate the icon in the direction of the parent way. \\ See also the functions `degree_to_radians`, `cardinal_to_radians`. \\Since version 18678 function parent_way_angle() is an alternativ to way: e.g. {{{ way > node[...]::layer_x { ... icon-rotation: parent_way_angle(); ... } }}}  ||  -  ||
 || `icon-position` || Define the position of the icon for areas. Same as `text-position` (since r11730). || `center`, `inside`, `line` ||  `center`  ||
 || `symbol-shape` || Display a symbol at the position of the node || `square`, `circle`, `triangle`, `pentagon`, `hexagon`, `heptagon`, `octagon`, `nonagon`, `decagon` ||  -  ||
 …
 || `symbol-fill-color` || fill color for the shape || ''Color'' || `blue`, unless either `symbol-stroke-width` or `symbol-stroke-color` is set ||
 || `symbol-fill-opacity` || fill opacity || ''Opacity'' ||  1.0  ||
+|| `text-...`, `font-...` ||||||  general text & font properties  ||
+|| `text-anchor-horizontal` || horizontal text label placement || `left`, `center`, `right` ||  `right`  ||
+|| `text-anchor-vertical` || vertical text label placement || `above`, `top`, `center`, `bottom`, `below` ||  `bottom`  ||
+|| `text-rotation` || Rotate the text clockwise or anti clockwise (negative value) (since r16253) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` ([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) or a cardinal direction (e.g. `northeast` or `sw`); See also the functions `degree_to_radians`, `cardinal_to_radians`. (Note that the direction means where the upper edge of the text faces. That means with the default direction of north the text flows to east (with a left to right language). So if you want to flow it to e.g. south you need to set east.) ||  -  ||
+|| `text-...`, `font-...` ||||||  see general '''Text & Font properties''' ||
 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.
+=== Line styles ===
+=== Line styles ===#LineStyles
 ||=  '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =||
 || `width` || Line width || ''Width'' ||  -  ||
 || `color` || Line color || ''Color'' ||  value of `fill-color` or (if unset) JOSM's default untagged color (`#808080`) ||
+|| `color` || Line color || ''Color'' ||  value of `fill-color` or\\(if unset) JOSM's default \\untagged color (`#808080`) ||
 || `opacity` || How transparent the line is. || ''Opacity'' ||  1.0  ||
 || `dashes` || An array of alternating on/off lengths || list of numbers, e.g. \\> 15, 5 \\ \\may be written as expression: \\ > `list(3, 4, 5, 6)` \\ \\or the keyword `none` \\to turn dashes off ||  -  ||
 …
 || `linecap` || Shape at the end of the line (see [https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty here]) || `none`, `round`, `square` ||  `none`  ||
 || `linejoin` || Shape at the line corners || `round`, `miter`, `bevel` ||  `round`  ||
+|| `miterlimit` || Applies for `linejoin: miter`. Sets the maximum overshoot when line segments meet at a very small angle || ''Number'' (>= 1.0) ||  10.0  ||
 || `offset` || Move line to the left or right (when looking in way direction). This could be used to draw multiple lanes for one way or mark left and right side of a way differently. || ''Number'' (positive value moves line to the left, negative to the right) ||  0  ||
+|| `miterlimit` || Applies for `linejoin: miter`. \\Sets the maximum overshoot when line segments meet at a very small angle || ''Number'' (>= 1.0) ||  10.0  ||
+|| `offset` || Move line to the left or right (when looking in way direction). \\This could be used to draw multiple lanes for one way or mark left and right side of a way differently. || ''Number'' (positive value moves line to the left,\\negative to the right) ||  0  ||
 || `text-position` || set to `line`, if text should be drawn along the line || `line`, `center` ||  -  ||
 || `text-...`, `font-...` ||||||  general text & font properties  ||
+|| `text-...`,\\`font-...` |||||| see general '''Text & Font properties  ||
 || `repeat-image` || repeated image along a line ''(since r5801)'' || ''Image'' ||  -  ||
 || `repeat-image-width` || Width of the image (optional, see `icon-width`) ''(since r5811)'' || ''Number'' ||  -  ||
 || `repeat-image-height` || Height of the image (optional) ''(since r5811)'' || ''Number'' ||  -  ||
 || `repeat-image-align` || Alignment of the image. Top-, bottom edge or the (horizontal) center line of the image will be along the line ''(since r5801)'' || `top`, `center`, `bottom` ||  `center`  ||
+|| `repeat-image-align` || Alignment of the image.\\Top-, bottom edge or the (horizontal) center line of the image will be along the line ''(since r5801)'' || `top`, `center`, `bottom` ||  `center`  ||
 || `repeat-image-offset` || Offset from the line ''(since r5801)'' || ''Number'' ||  0  ||
 || `repeat-image-spacing` || Spacing between repeated images ''(since r5801)'' || ''Number'' ||  0  ||
 …
 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.
 ||=  '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =||
+|| `casing-width` || Width of the border on both sides of the main line. In JOSM < 5214: Total width of the casing || ''Width'' (revers to `width` if relative width is specified) ||  -  ||
+|| `casing-color` || Casing color || ''Color'' ||  value of `fill-color` or (if unset) JOSM's default untagged color (`#808080`) ||
+|| `casing-width` || Width of the border on both sides of the main line. \\In JOSM < 5214: Total width of the casing || ''Width'' (revers to `width` if relative width is specified) ||  -  ||
+|| `casing-color` || Casing color || ''Color'' ||  value of `fill-color` or (if unset) \\JOSM's default untagged color (`#808080`) ||
 || `casing-opacity` || How transparent the casing is. || ''Opacity'' ||  1.0  ||
 || `casing-`... || ... || ... ||  ...  ||
 Similar to `casing-`, there is also the `left-casing-` and `right-casing-` prefix. It draws additional lines to the left and to the right of the main line.
+=== Area styles ===
 ||=  '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =||
+=== Area styles ===#AreaStyles
+||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =||
 || `fill-color` || Color in which to fill the area. Until 11700, the alpha component was set to 50 to create a transparency effect. || ''Color'' ||  -  ||
 || `fill-image` || Image pattern || ''Image'' ||  -  ||
 || `fill-extent` || Set this property, to draw only the outline of the area. The number specifies, how far to fill from the border of the area towards the center. (If unset, the area will be filled completely) ''(since r9008)'' || ''Number'' ||  -  ||
 || `fill-extent-threshold` || Set this property, to draw full area when the given percentage of coverage is reached. Can be greater than 100% as the covered area is estimated as **perimeter * extent**. || ''Number'' ||  -  ||
+|| `fill-opacity` || How transparent the fill is; applies to both color and image || ''Opacity'' || 0.2 ''(since r11700, 1.0 before that)'' (can be changed with the `mappaint.fillalpha` and `mappaint.fill-image-alpha` preferences)  ||
+|| `fill-opacity` || How transparent the fill is; applies to both color and image || ''Opacity'' || 0.2 ''(since r11700, 1.0 before that)'' \\(can be changed with the `mappaint.fillalpha` and \\`mappaint.fill-image-alpha` preferences)  ||
 || `text-position` || set to `center`, if text should be drawn in the center of the area. Set to `inside` to place the text completely inside the area. ''(since r11722)'' || `line`, `center`, `inside` ||  -  ||
+|| `text-...`, `font-...` ||||||  general text & font properties  ||
+|| `text-...`, `font-...` ||||||  see general text & font properties  ||
 Required properties to create an Area style: `fill-color` or `fill-image`
 …
 }}}
 {{{#!td align=left  valign=top
 How to find the label text. No label is displayed, unless this instruction is present.
+How to find the label text.\\No label is displayed, unless this instruction is present.
 }}}
 {{{#!td align=left  valign=top
 `auto`
    Derive the text automatically. The default name tags are: "`name:`"+''<LANG>'', "`name`", "`int_name`", "`ref`", "`operator`", "`brand`" and "`addr:housenumber`".
    Configure a list of tag names in the preference "`mappaint.nameOrder`" in order to change this list. (After changing the list, a restart of JOSM is required.)
+  Derive the text automatically. The default name tags are: "`name:`"+''<LANG>'', \\"`name`", "`int_name`", "`ref`", "`operator`", "`brand`" and "`addr:housenumber`".
+  Configure a list of tag names in the preference "`mappaint.nameOrder`" in order \\ to change this list. (After changing the list, a restart of JOSM is required.)
 ''String''
    Denotes the key of the tag whose value is used as text.
+  Denotes the key of the tag whose value is used as text.
 ''Expressions''
   You can enter an expression to compute the text to be displayed. Examples:
   * `eval("this is a static text")` - renderes a static text
+  * `eval(concat(tag("first"), "-", tag("second")))` - displays the concatenated tags "first" and "second"
+  * `eval(concat(tag("first"), "-", tag("second")))` - displays \\ the concatenated tags "first" and "second"
 `""`
 …
 }}}
 |-------------------------------------------------------------------------------
 || `text-color` || the text color || ''Color'' ||  `white` for lines and nodes, `#c0c0c0` for areas (JOSM "`text`" and "`areatext`" color preferences) ||
+|| `text-color` || the text color || ''Color'' ||  `white` for lines and nodes,\\`#c0c0c0` for areas \\(JOSM "`text`" and "`areatext`"\\color preferences) ||
 || `text-opacity` || how transparent the text is || ''Opacity'' ||  1.0  ||
+|| `text-offset-x` || shift the text horizontally, (not supported for text along line) || ''Number'' ||  0  ||
 || `text-offset-y` (can also be written as `text-offset`)  || shift the text vertically, positive values shift the text in upwards direction  || ''Number'' ||  0  ||
+|| `text-halo-radius` || size of text background border (to make text visible on background with a similar color) || ''Number'' ||  -  ||
+|| `text-offset-x` || shift the text horizontally, \\(not supported for text along line) || ''Number'' ||  0  ||
+|| `text-offset-y`\\(can also be written as\\`text-offset`)  || shift the text vertically, positive values shift the text in upwards direction  || ''Number'' ||  0  ||
+|| `text-halo-radius` || size of text background border \\(to make text visible on background \\with a similar color) || ''Number'' ||  -  ||
 || `text-halo-color` || color of the text halo || ''Color'' ||  complement of the text color  ||
 || `text-halo-opacity` || transparency for the text halo || ''Opacity'' ||  1.0  ||
+|| `font-family` || font family || ''String'' ||  "Droid Sans" \\(JOSM preference "mappaint.font")  ||
+|| `font-size` || font size || ''Number'' ||  8 \\(JOSM preference "mappaint.fontsize")  ||
+|| `text-anchor-horizontal` || horizontal text label placement || `left`, `center`, `right` ||  `right`  ||
+|| `text-anchor-vertical` || vertical text label placement || `above`, `top`, `center`, `bottom`, `below` ||  `bottom`  ||
+|| `text-rotation` || Rotate the text clockwise or anti clockwise (negative value)\\(since r16253) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` \\([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) or a cardinal direction (e.g. `northeast` or `sw`); \\ or `way` to rotate the text in the direction of the parent way. \\See also the functions `degree_to_radians`, `cardinal_to_radians`. \\Since version 18678 function parent_way_angle() is an alternativ to way: e.g. {{{ way > node[...]::layer_x { ... text-rotation: parent_way_angle(); ... } }}} \\(Note that the direction means where the upper edge of the text faces.\\That means with the default direction of north the text flows to east\\(with a left to right language). \\So if you want to flow it to e.g. south you need to set east.) ||  -  ||
+|| `text-position` |||||| see [#AreaStyles Area styles] and [#LineStyles Line styles] ||
+|| `font-family` || font family || ''String'' ||  "Droid Sans" \\(JOSM preference "`mappaint.font`")  ||
+|| `font-size` || font size || ''Number'' ||  8 \\(JOSM preference "`mappaint.fontsize`")  ||
 || `font-weight` || bold or not || `bold`, `normal` ||  `normal`  ||
 || `font-style` || italic or not || `italic`, `normal` ||  `normal`  ||
 …
 * In [wikitr:/Rules Validator rules] they must be prefixed by a `-`, e.g.: `-osmoseItemClassLevel: "1210/1/1";`
+=== Property values explanations ===
+=== Property values explanations === #Propertyvaluesexplanations
 '' '''Width''' ''
  - 14.0 (any positive number)
 …
  * '''`rgba(/*r*/, /*g*/, /*b*/, /*alpha*/)`''' - rgb value with alpha
  * '''`hsb_color(/*hue*/, /*saturation*/, /*brightness*/)`''' - color from HSB color space
+ * if the color is prefixed with a name and #, e.g. `color: highway_track#6e541c;` it will appear in the [wikitr:/Help/Preferences/ColorPreference Color Preference] and end users can adjust the color there themself
 '' '''Opacity''' ''
 …
   comparison operators
  asin, atan, atan2, ceil, cos, cosh, exp, floor, log, max, min, mod (since r17759), random, round, signum, sin, sinh, sqrt, tan, tanh::
   the usual meaning, [https://download.oracle.com/javase/8/docs/api/java/lang/Math.html details]
+  the usual meaning, [https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/lang/Math.html details]
  cond(b, fst, snd)::
  b ? fst : snd::
 …
   assemble the strings to one
  join(''sep'', ''str1'', ''str2'', ...)::
   join strings, whith ''sep'' as separator [''since r6737'']
+  join strings, with ''sep'' as separator [''since r6737'']
  join_list(''sep'', ''list_name'')::
    joins the elements of the list ''list_name'' to one string separated by the separator ''sep'' [''since r8775'']
 …
   return the substring of ''str'', starting at index ''idx'' (0-indexed) [''since r6534'']
  substring(str, start, end)::
+  return the substring of ''str'', starting at index ''start'' (inclusive) up to ''end'' (exclusive) (0-indexed) [''since r6534'']
+  return the substring of ''str'', starting at index ''start'' (inclusive) up to ''end'' (exclusive) (0-indexed) [''since r6534''], a negative end index counts from the string end [''since r19259'']
  replace(string, old, new)::
    Replaces any occurrence of the substring ''old'' within the string ''string'' with the text ''new''
 …
  CRC32_checksum(''str'')::
   calculate the CRC32 checksum of a string (result is an integer from 0 to 2^32^-1) [''since r6908'']
+ siunit_length(''str'')::
+   convert length units to meter (fault tolerant, ignoring white space) [''since r19089'']
  is_right_hand_traffic()::
   Check if there is left-hand or right-hand traffic at the current location. [''since r7193'']
 …
  sort(''str1'', ''str2'', ''str3'', ''...'')::
   sorts an array of strings [''since r15279'']
+ sort_list()::
+ sort_list(''list_name'')::
   sorts a list of strings [''since r15279'']
  tag_regex(''regex'')::
   returns a list of values that match the regex [''since r15317'']
+  returns a list containing the values of keys that match the regex [''since r15317'']
  to_boolean(''str'')::
   returns the string argument as a boolean [''since r16110'']
 …
  uniq(''str1'', ''str2'', ''str3'', ''...'')::
   returns a list of strings that only have unique values from an array of strings [''since r15323'']
+ uniq_list()::
+  returns a list of strings that only have unique values from a list of strings [''since r15353'']
+ uniq_list(''list_name'')::
+  returns a list of strings that only have unique values from a list of strings [''since r15323'']
+ parent_way_angle()::
+  returns the angle of the parent way as a double in rad [''since r18664''] (see: text-rotation or icon-rotation)
+ convert_primitive_to_string(''PrimitiveId'')::
+  returns the primitive id as a string [''since r18829'']
+ convert_primitives_to_string(''PrimitiveId'', ''PrimitiveId'', ''...'')::
+  returns a list of primitive ids converted to strings [''since r18829'']
+ parent_osm_primitives(''optional key'', ''optional value'')::
+  returns a list of primitive ids which match the key and value (if present) [''since r18829'']
 === Examples ===
 …
 }}}
+* casing on inside of area
+{{{
+#!mapcss
+area[building]:clockwise {
+    right-casing-width: 10;
+}
+area[building]:anticlockwise {
+    left-casing-width: 10;
+}
+/* or */
+area[building][is_clockwise()] {
+    right-casing-width: 10;
+}
+area[building][is_anticlockwise()] {
+    left-casing-width: 10;
+}
+}}}
+* case insensitive selector. This matches: `Name=Main Street`, but also `naMe=MAIN STREET`
+{{{
+#!mapcss
+way[/(?i)^name$/ =~ /(?i)^Main Street$/] {
+}
+}}}
 == Compatibility notes ==