Changes between Version 208 and Version 268 of Help/Styles/MapCSSImplementation
- Timestamp:
- (multiple changes)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
Help/Styles/MapCSSImplementation
v208 v268 8 8 * [wikitr:/Help/Action/Search Search dialog] 9 9 10 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. 10 11 11 12 == General Structure == … … 20 21 set: class; 21 22 set: .class; 23 /* note that validator rules do not use the colon after set */ 22 24 } 23 25 }}} … … 66 68 67 69 === Type selector === 68 69 70 {{{#!th valign=top 70 71 '''Selector''' … … 251 252 way[highway=residential] /* is case sensitive, i.e. does NOT match e.g. highway=Residential or Highway=residential */ 252 253 node[name="My name"] /* use quotes if key or value includes spaces */ 253 node["name: ru"="Калининград"]/* use quotes if key or value includes special characters like colons or unicode characters */254 node["name:pl"="Królewiec"] /* use quotes if key or value includes special characters like colons or unicode characters */ 254 255 }}} 255 256 }}} … … 266 267 way[highway!=residential] 267 268 node[name!="My name"] 268 node["name: ru"!="Калининград"]269 node["name:pl"!="Królewiec"] 269 270 }}} 270 271 }}} … … 342 343 }}} 343 344 {{{#!td align=left valign=top 344 [https://do wnload.oracle.com/javase/8/docs/api/java/util/regex/Pattern.html#sum Regular expression] match345 [https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/regex/Pattern.html#sum Regular expression] match 345 346 346 347 }}} … … 351 352 /* Note, that reqular expressions have to be enclosed in /.../ */ 352 353 }}} 353 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]).354 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]). 354 355 {{{ 355 356 #!mapcss … … 363 364 }}} 364 365 {{{#!td align=left valign=top 365 negated [https://do wnload.oracle.com/javase/8/docs/api/java/util/regex/Pattern.html#sum Regular expression] match366 negated [https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/regex/Pattern.html#sum Regular expression] match 366 367 367 368 }}} … … 507 508 |------------------------------------------------------------------------------- 508 509 {{{#!td align=left valign=top 509 Presence of tag by [https://do wnload.oracle.com/javase/8/docs/api/java/util/regex/Pattern.html#sum Regular expression] match (since r6547)510 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) 510 511 }}} 511 512 {{{#!td align=left valign=top … … 631 632 === Zoom selector === 632 633 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. 633 634 {{{#!th align=center valign=top 635 '''Example''' 636 }}} 637 {{{#!th align=center valign=top 638 '''Description''' 639 }}} 640 |------------------------------------------------------------------------------- 641 || `way|z12 {...} ` || At zoom level 12 || 642 || `way|z13-15 {...} ` || From 13 to 15 || 643 || `way|z16- {...} ` || 16 and above || 644 || `way|z-12 {...} ` || 12 and below || 645 || `way {...} ` || any zoom level || 634 ||= '''Example 1''' =||= '''Example 2''' =||= '''Example 3''' =||= '''Description''' =|| 635 || `way|z12 {...}` || `node|z12 {...}` || `node|z12[...] {...}` || At zoom level 12 || 636 || `way|z13-15 {...}` || `node|z13-15 {...}` || `way|z13-15[...] {...}` ||From 13 to 15 || 637 || `way|z16- {...}` || `node|z16- {...}` || `node|z16-[...] {...}` || 16 and above || 638 || `way|z-12 {...}` || `node|z-12 {...}` || `node|z-12[...] {...}` || 12 and below || 639 || `way {...}` || `node{...}` || `way[...] {...}` || any zoom level || 646 640 647 641 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''. … … 650 644 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. 651 645 652 ||= Class =||=Description =||646 ||= '''Class''' =||= '''Description''' =|| 653 647 || `:closed` || true for ways where the first node is the same as the last and for any (completely downloaded) multipolygon relation || 654 648 || `:closed2` || same as above, but this one ignores if a multipolygon is downloaded completely (since r9099) || … … 732 726 way::A { a; } 733 727 way::B { b; } 734 way::* { c; } 728 way::* { c; } /* overrides all existing subparts */ 735 729 }}} 736 730 is equivalent to … … 739 733 way::A { a; } 740 734 way::B { b; } 741 way::A { c; } 742 way::B { c; } 735 way::A { c; } /* overrides a with c all existing subparts */ 736 way::B { c; } /* overrides b with c all existing subparts */ 743 737 }}} 744 738 And it initializes new subparts. In other words: … … 807 801 }}} 808 802 You can also negate classes. E.g. `way!.path` for all ways, which are not part of the class ''.path''. 803 804 === Classes and Layer together === 805 If you want to use layer and classes together, please note that you have to identify the class via is_prop_set. 806 807 {{{#!mapcss 808 node[railway=signal] { set sgnl; } 809 810 /* it doesn't work */ 811 node.sgnl::layer_signal_icon { z-index: 1000; ... icon: icon/signal-icon.svg; ... } 812 node.sgnl::layer_signal_text { z-index: 1010; ... text: concat("Name of signal: ", tag("ref")); ..... ) 813 814 /* use instead: is_prop_set("...", "default") */ 815 node[is_prop_set("sgnl", "default")]::layer_signal_icon { z-index: 1000; ... icon: icon/signal-icon.svg; ... } 816 node[is_prop_set("sgnl", "default")]::layer_signal_text { z-index: 1010; ... text: concat("Name of signal: ", tag("ref")); ..... ) 817 }}} 809 818 810 819 === @supports Conditional Processing === … … 1013 1022 }}} 1014 1023 1015 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]. 1024 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]. 1016 1025 1017 1026 … … 1036 1045 || `icon-offset-x` || Shift the icon in horizontal direction (positive values to the right) (since r8085) || ''Number'' || 0 || 1037 1046 || `icon-offset-y` || Shift the icon in vertical direction (positive values downwards) (since r8085) || ''Number'' || 0 || 1038 || `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`. || - || 1047 || `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(); ... } }}} || - || 1039 1048 || `icon-position` || Define the position of the icon for areas. Same as `text-position` (since r11730). || `center`, `inside`, `line` || `center` || 1040 1049 || `symbol-shape` || Display a symbol at the position of the node || `square`, `circle`, `triangle`, `pentagon`, `hexagon`, `heptagon`, `octagon`, `nonagon`, `decagon` || - || … … 1045 1054 || `symbol-fill-color` || fill color for the shape || ''Color'' || `blue`, unless either `symbol-stroke-width` or `symbol-stroke-color` is set || 1046 1055 || `symbol-fill-opacity` || fill opacity || ''Opacity'' || 1.0 || 1047 || `text-...`, `font-...` |||||| general text & font properties || 1048 || `text-anchor-horizontal` || horizontal text label placement || `left`, `center`, `right` || `right` || 1049 || `text-anchor-vertical` || vertical text label placement || `above`, `top`, `center`, `bottom`, `below` || `bottom` || 1050 || `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.) || - || 1056 || `text-...`, `font-...` |||||| see general '''Text & Font properties''' || 1051 1057 1052 1058 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. 1053 1059 1054 === Line styles === 1060 === Line styles ===#LineStyles 1055 1061 ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| 1056 1062 || `width` || Line width || ''Width'' || - || 1057 || `color` || Line color || ''Color'' || value of `fill-color` or 1063 || `color` || Line color || ''Color'' || value of `fill-color` or\\(if unset) JOSM's default \\untagged color (`#808080`) || 1058 1064 || `opacity` || How transparent the line is. || ''Opacity'' || 1.0 || 1059 1065 || `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 || - || … … 1063 1069 || `linecap` || Shape at the end of the line (see [https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty here]) || `none`, `round`, `square` || `none` || 1064 1070 || `linejoin` || Shape at the line corners || `round`, `miter`, `bevel` || `round` || 1065 || `miterlimit` || Applies for `linejoin: miter`. Sets the maximum overshoot when line segments meet at a very small angle || ''Number'' (>= 1.0) || 10.0 || 1066 || `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, 1071 || `miterlimit` || Applies for `linejoin: miter`. \\Sets the maximum overshoot when line segments meet at a very small angle || ''Number'' (>= 1.0) || 10.0 || 1072 || `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 || 1067 1073 || `text-position` || set to `line`, if text should be drawn along the line || `line`, `center` || - || 1068 || `text-...`, text & font properties ||1074 || `text-...`,\\`font-...` |||||| see general '''Text & Font properties || 1069 1075 || `repeat-image` || repeated image along a line ''(since r5801)'' || ''Image'' || - || 1070 1076 || `repeat-image-width` || Width of the image (optional, see `icon-width`) ''(since r5811)'' || ''Number'' || - || 1071 1077 || `repeat-image-height` || Height of the image (optional) ''(since r5811)'' || ''Number'' || - || 1072 || `repeat-image-align` || Alignment of the image. 1078 || `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` || 1073 1079 || `repeat-image-offset` || Offset from the line ''(since r5801)'' || ''Number'' || 0 || 1074 1080 || `repeat-image-spacing` || Spacing between repeated images ''(since r5801)'' || ''Number'' || 0 || … … 1078 1084 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. 1079 1085 ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| 1080 || `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) || - || 1081 || `casing-color` || Casing color || ''Color'' || value of `fill-color` or (if unset) JOSM's default untagged color (`#808080`) || 1086 || `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) || - || 1087 || `casing-color` || Casing color || ''Color'' || value of `fill-color` or (if unset) \\JOSM's default untagged color (`#808080`) || 1082 1088 || `casing-opacity` || How transparent the casing is. || ''Opacity'' || 1.0 || 1083 1089 || `casing-`... || ... || ... || ... || 1084 1090 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. 1085 1091 1086 === Area styles === 1087 ||= 1092 === Area styles ===#AreaStyles 1093 ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| 1088 1094 || `fill-color` || Color in which to fill the area. Until 11700, the alpha component was set to 50 to create a transparency effect. || ''Color'' || - || 1089 1095 || `fill-image` || Image pattern || ''Image'' || - || 1090 1096 || `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'' || - || 1091 1097 || `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'' || - || 1092 || `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) || 1098 || `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) || 1093 1099 || `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` || - || 1094 || `text-...`, `font-...` |||||| general text & font properties || 1100 || `text-...`, `font-...` |||||| see general text & font properties || 1095 1101 Required properties to create an Area style: `fill-color` or `fill-image` 1096 1102 … … 1113 1119 }}} 1114 1120 {{{#!td align=left valign=top 1115 How to find the label text. 1121 How to find the label text.\\No label is displayed, unless this instruction is present. 1116 1122 }}} 1117 1123 {{{#!td align=left valign=top 1118 1124 `auto` 1119 1120 1121 1125 Derive the text automatically. The default name tags are: "`name:`"+''<LANG>'', \\"`name`", "`int_name`", "`ref`", "`operator`", "`brand`" and "`addr:housenumber`". 1126 1127 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.) 1122 1128 1123 1129 ''String'' 1124 1130 Denotes the key of the tag whose value is used as text. 1125 1131 1126 1132 ''Expressions'' 1127 1133 You can enter an expression to compute the text to be displayed. Examples: 1128 1134 * `eval("this is a static text")` - renderes a static text 1129 * `eval(concat(tag("first"), "-", tag("second")))` - displays the concatenated tags "first" and "second" 1135 * `eval(concat(tag("first"), "-", tag("second")))` - displays \\ the concatenated tags "first" and "second" 1130 1136 1131 1137 `""` … … 1136 1142 }}} 1137 1143 |------------------------------------------------------------------------------- 1138 || `text-color` || the text color || ''Color'' || `white` for lines and nodes, 1144 || `text-color` || the text color || ''Color'' || `white` for lines and nodes,\\`#c0c0c0` for areas \\(JOSM "`text`" and "`areatext`"\\color preferences) || 1139 1145 || `text-opacity` || how transparent the text is || ''Opacity'' || 1.0 || 1140 || `text-offset-x` || shift the text horizontally, (not supported for text along line) || ''Number'' || 0 || 1141 || `text-offset-y` 1142 || `text-halo-radius` || size of text background border (to make text visible on background with a similar color) || ''Number'' || - || 1146 || `text-offset-x` || shift the text horizontally, \\(not supported for text along line) || ''Number'' || 0 || 1147 || `text-offset-y`\\(can also be written as\\`text-offset`) || shift the text vertically, positive values shift the text in upwards direction || ''Number'' || 0 || 1148 || `text-halo-radius` || size of text background border \\(to make text visible on background \\with a similar color) || ''Number'' || - || 1143 1149 || `text-halo-color` || color of the text halo || ''Color'' || complement of the text color || 1144 1150 || `text-halo-opacity` || transparency for the text halo || ''Opacity'' || 1.0 || 1145 || `font-family` || font family || ''String'' || "Droid Sans" \\(JOSM preference "mappaint.font") || 1146 || `font-size` || font size || ''Number'' || 8 \\(JOSM preference "mappaint.fontsize") || 1151 || `text-anchor-horizontal` || horizontal text label placement || `left`, `center`, `right` || `right` || 1152 || `text-anchor-vertical` || vertical text label placement || `above`, `top`, `center`, `bottom`, `below` || `bottom` || 1153 || `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.) || - || 1154 || `text-position` |||||| see [#AreaStyles Area styles] and [#LineStyles Line styles] || 1155 || `font-family` || font family || ''String'' || "Droid Sans" \\(JOSM preference "`mappaint.font`") || 1156 || `font-size` || font size || ''Number'' || 8 \\(JOSM preference "`mappaint.fontsize`") || 1147 1157 || `font-weight` || bold or not || `bold`, `normal` || `normal` || 1148 1158 || `font-style` || italic or not || `italic`, `normal` || `normal` || … … 1168 1178 * '''`rgba(/*r*/, /*g*/, /*b*/, /*alpha*/)`''' - rgb value with alpha 1169 1179 * '''`hsb_color(/*hue*/, /*saturation*/, /*brightness*/)`''' - color from HSB color space 1180 * 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 1170 1181 1171 1182 '' '''Opacity''' '' … … 1190 1201 comparison operators 1191 1202 asin, atan, atan2, ceil, cos, cosh, exp, floor, log, max, min, mod (since r17759), random, round, signum, sin, sinh, sqrt, tan, tanh:: 1192 the usual meaning, [https://do wnload.oracle.com/javase/8/docs/api/java/lang/Math.html details]1203 the usual meaning, [https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/lang/Math.html details] 1193 1204 cond(b, fst, snd):: 1194 1205 b ? fst : snd:: … … 1263 1274 return the substring of ''str'', starting at index ''idx'' (0-indexed) [''since r6534''] 1264 1275 substring(str, start, end):: 1265 return the substring of ''str'', starting at index ''start'' (inclusive) up to ''end'' (exclusive) (0-indexed) [''since r6534''] 1276 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''] 1266 1277 replace(string, old, new):: 1267 1278 Replaces any occurrence of the substring ''old'' within the string ''string'' with the text ''new'' … … 1288 1299 CRC32_checksum(''str''):: 1289 1300 calculate the CRC32 checksum of a string (result is an integer from 0 to 2^32^-1) [''since r6908''] 1301 siunit_length(''str''):: 1302 convert length units to meter (fault tolerant, ignoring white space) [''since r19089''] 1290 1303 is_right_hand_traffic():: 1291 1304 Check if there is left-hand or right-hand traffic at the current location. [''since r7193''] … … 1318 1331 sort(''str1'', ''str2'', ''str3'', ''...''):: 1319 1332 sorts an array of strings [''since r15279''] 1320 sort_list():: 1333 sort_list(''list_name''):: 1321 1334 sorts a list of strings [''since r15279''] 1322 1335 tag_regex(''regex''):: 1323 returns a list of values that match the regex [''since r15317'']1336 returns a list containing the values of keys that match the regex [''since r15317''] 1324 1337 to_boolean(''str''):: 1325 1338 returns the string argument as a boolean [''since r16110''] … … 1338 1351 uniq(''str1'', ''str2'', ''str3'', ''...''):: 1339 1352 returns a list of strings that only have unique values from an array of strings [''since r15323''] 1340 uniq_list():: 1341 returns a list of strings that only have unique values from a list of strings [''since r15353''] 1353 uniq_list(''list_name''):: 1354 returns a list of strings that only have unique values from a list of strings [''since r15323''] 1355 parent_way_angle():: 1356 returns the angle of the parent way as a double in rad [''since r18664''] (see: text-rotation or icon-rotation) 1357 convert_primitive_to_string(''PrimitiveId''):: 1358 returns the primitive id as a string [''since r18829''] 1359 convert_primitives_to_string(''PrimitiveId'', ''PrimitiveId'', ''...''):: 1360 returns a list of primitive ids converted to strings [''since r18829''] 1361 parent_osm_primitives(''optional key'', ''optional value''):: 1362 returns a list of primitive ids which match the key and value (if present) [''since r18829''] 1342 1363 1343 1364 === Examples ===