| 346 | | {{{#!td align=left valign=top |
| 347 | | [http://download.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#sum Regular expression] match |
| 348 | | |
| 349 | | }}} |
| 350 | | {{{#!td align=left valign=top |
| 351 | | {{{ |
| 352 | | #!mapcss |
| 353 | | name[name=~/^My_pattern.*/] /* the value of the tag 'name' matches with the regular expression '^My_pattern.*' */ |
| 354 | | /* Note, that reqular expressions have to be enclosed in /.../ */ |
| 355 | | }}} |
| 356 | | Case-insensitive matching can be enabled via the embedded flag expression `(?i)` (see [http://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#CASE_INSENSITIVE Pattern.CASE_INSENSITIVE]). |
| 357 | | }}} |
| 358 | | |------------------------------------------------------------------------------- |
| 359 | | {{{#!td align=left valign=top |
| | 344 | {{{#!td align=left valign=top |
| | 345 | [https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/regex/Pattern.html#sum Regular expression] match |
| | 346 | |
| | 347 | }}} |
| | 348 | {{{#!td align=left valign=top |
| | 349 | {{{ |
| | 350 | #!mapcss |
| | 351 | *[name=~/^My_pattern.*/] /* the value of the tag 'name' matches with the regular expression '^My_pattern.*' */ |
| | 352 | /* Note, that reqular expressions have to be enclosed in /.../ */ |
| | 353 | }}} |
| | 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]). |
| | 355 | {{{ |
| | 356 | #!mapcss |
| | 357 | *[name =~ /^(?i)(parking)$/] /* matches parking, Parking, PARKING, PaRkInG,... */ |
| | 358 | *[name =~ /^(?U)(\p{Lower})+$/] /* name consists of only lower case unicode characters */ |
| | 359 | }}} |
| | 360 | }}} |
| | 361 | |------------------------------------------------------------------------------- |
| | 362 | {{{#!td align=center valign=top |
| 387 | | }}} |
| 388 | | |------------------------------------------------------------------------------- |
| 389 | | {{{#!td align=left valign=top |
| 390 | | `⧉` ([http://www.fileformat.info/info/unicode/char/29c9/index.htm U+29C9], since r6613) |
| 391 | | }}} |
| 392 | | {{{#!td align=left valign=top |
| | 391 | 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. |
| | 392 | }}} |
| | 393 | |------------------------------------------------------------------------------- |
| | 394 | {{{#!td align=center valign=top |
| | 395 | `⊆` ([https://www.fileformat.info/info/unicode/char/2286/index.htm U+2286], since r15102) |
| | 396 | }}} |
| | 397 | {{{#!td align=left valign=top |
| | 398 | Subset of or Equal To |
| | 399 | |
| | 400 | Synonym for `∈`. |
| | 401 | }}} |
| | 402 | {{{#!td align=left valign=top |
| | 403 | {{{ |
| | 404 | #!mapcss |
| | 405 | *[amenity=parking] ⊆ area[amenity=parking] { |
| | 406 | throwWarning: tr("{0} inside {1}", "amenity=parking", "amenity=parking"); |
| | 407 | } |
| | 408 | }}} |
| | 409 | |
| | 410 | }}} |
| | 411 | |------------------------------------------------------------------------------- |
| | 412 | {{{#!td align=center valign=top |
| | 413 | `⊇` ([https://www.fileformat.info/info/unicode/char/2287/index.htm U+2287], since r15102) |
| | 414 | }}} |
| | 415 | {{{#!td align=left valign=top |
| | 416 | Superset of or Equal To |
| | 417 | |
| | 418 | Matches when an object matches the right selector(s) and is contained in one or more elements which match the left selectors. |
| | 419 | }}} |
| | 420 | {{{#!td align=left valign=top |
| | 421 | {{{ |
| | 422 | #!mapcss |
| | 423 | area[amenity=parking] ⊇ *[amenity=parking] |
| | 424 | }}} |
| | 425 | 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. |
| | 426 | }}} |
| | 427 | |------------------------------------------------------------------------------- |
| | 428 | {{{#!td align=center valign=top |
| | 429 | `⊈` ([https://www.fileformat.info/info/unicode/char/2288/index.htm U+2288], since r15102) |
| | 430 | }}} |
| | 431 | {{{#!td align=left valign=top |
| | 432 | Neither a Subset of nor Equal To |
| | 433 | |
| | 434 | Matches when an object matches the right selector(s) and does not contain any element which matches the left selectors. |
| | 435 | }}} |
| | 436 | {{{#!td align=left valign=top |
| | 437 | {{{ |
| | 438 | #!mapcss |
| | 439 | *[highway=street_lamp] ⊈ area:closed2[amenity=parking][lit=yes] |
| | 440 | }}} |
| | 441 | 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. |
| | 442 | }}} |
| | 443 | |------------------------------------------------------------------------------- |
| | 444 | {{{#!td align=center valign=top |
| | 445 | `⊉` ([https://www.fileformat.info/info/unicode/char/2289/index.htm U+2289], since r15102) |
| | 446 | }}} |
| | 447 | {{{#!td align=left valign=top |
| | 448 | Neither a Superset of nor Equal To |
| | 449 | |
| | 450 | Matches when an object matches the right selector(s) and is not contained in any area which matches the left selectors. |
| | 451 | }}} |
| | 452 | {{{#!td align=left valign=top |
| | 453 | {{{ |
| | 454 | #!mapcss |
| | 455 | area[landuse=residential] ⊉ *[building] |
| | 456 | }}} |
| | 457 | 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`. |
| | 458 | }}} |
| | 459 | |------------------------------------------------------------------------------- |
| | 460 | {{{#!td align=center valign=top |
| | 461 | `⧉` ([https://www.fileformat.info/info/unicode/char/29c9/index.htm U+29C9], since r6613) |
| | 462 | }}} |
| | 463 | {{{#!td align=left valign=top |
| 486 | | way[oneway?!] /* matches any way with a false value in the tag 'oneway' */ |
| 487 | | }}} |
| 488 | | }}} |
| 489 | | |
| 490 | | === Link selector === |
| | 555 | way[oneway?!] /* matches any way with a false value in the tag 'oneway' */ |
| | 556 | }}} |
| | 557 | }}} |
| | 558 | |
| | 559 | === Territory selector === #Territoryselector |
| | 560 | You can test whether an object is located inside or outside of a specific territory. JOSM has an internal database for this. The [source:/trunk/resources/data/boundaries.osm territories file] can be downloaded and opened in JOSM to investigate it [attachment:boundaries.png (screenshot preview)]. It contains borders of all countries of the world. Due to performance reasons the borders are simplified. They can be refined for special cases on request. The territories are "tagged" with their [https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 ISO_3166-1_alpha-2 codes]. USA, Canada, China, India and Australia have additional boundaries for their subdivisions. See the following examples on how to use the territory selectors. Territory selectors are less useful in mappaint styles and can be very resource heavy there. However they are much more useful for [wikitr:/Help/Validator/MapCSSTagChecker mapcss based validator rules]. To select territories with left-hand-traffic or right-hand-traffic, there is a simpler way, see [#PseudoClasses Pseudo Classes]. See #10387 for main implementation of this feature. |
| | 561 | |
| | 562 | {{{ |
| | 563 | #!mapcss |
| | 564 | /* matches any node located … */ |
| | 565 | node[inside("FR")] /* … inside of France (includes the overseas territories) */ |
| | 566 | node[inside("FX")] /* … inside of Metropolitan France (i.e. only the |
| | 567 | mainland part with its near islands including Corse) */ |
| | 568 | node[inside("EU")] /* … inside of the European Union */ |
| | 569 | node[inside("FR,DE")] /* … inside of France __OR__ inside of Germany */ |
| | 570 | node[inside("US-FL")] /* … inside of the US state Florida */ |
| | 571 | |
| | 572 | node[outside("FR")] /* … outside of France */ |
| | 573 | node[outside("FR,DE")] /* … outside of France __AND__ outside of Germany */ |
| | 574 | node[inside("US")][outside("US-FL")] /* … inside of the USA except the state Florida */ |
| | 575 | }}} |
| | 576 | |
| | 577 | === Link selector ===#LinkSelector |
| 548 | | You can decorate a type selector with a '''zoom selector'''. The zoom selector restricts the range of zoom levels |
| 549 | | at which the respective MapCSS rule is applied. |
| 550 | | |
| 551 | | {{{#!th align=left valign=top |
| 552 | | '''Example''' |
| 553 | | }}} |
| 554 | | {{{#!th align=left valign=top |
| 555 | | '''Description''' |
| 556 | | }}} |
| 557 | | |------------------------------------------------------------------------------- |
| 558 | | || {{{way|z12 {...} }}} || At zoom level 12 || |
| 559 | | || {{{way|z13-15 {...} }}} || From 13 to 15 || |
| 560 | | || {{{way|z16- {...} }}} || 16 and above || |
| 561 | | || {{{way|z-12 {...} }}} || 12 and below || |
| 562 | | || {{{way {...} }}} || any zoom level || |
| | 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. |
| | 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 || |
| 566 | | |
| 567 | | === Pseudo Classes === |
| 568 | | See [https://josm.openstreetmap.de/doc/org/openstreetmap/josm/gui/mappaint/mapcss/Condition.PseudoClasses.html Javadoc] for the up-to-date list of pseudo classes supported by JOSM's MapCSS implementation. |
| 569 | | |
| 570 | | || {{{:closed}}} || true for ways where the first node is the same as the last and for any multipolygon relation || |
| 571 | | || {{{:new}}} || all new objects || |
| 572 | | || {{{:connection}}} || true for nodes that are used by more than one way || |
| 573 | | || {{{:unconnected}}} || true for nodes that are not used by any way (since r6687) || |
| 574 | | || {{{: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) |
| 575 | | || {{{:righthandtraffic}}} || true if there is right-hand traffic at the current location (since r7193); see [[left-right-hand-traffic]] for screenshot of areas || |
| 576 | | || {{{:unclosed_multipolygon}}} || true for fully loaded unclosed multipolygon relations (since r8252) || |
| 577 | | || {{{:open_end}}} || to select end nodes of unclosed multipolygon relations with `relation:unclosed_multipolygon >:open_end node` (since r8252) || |
| 578 | | || {{{:in-downloaded-area}}} || true if an object is within source area and false if in the hatched area (since 8495). || |
| 579 | | {{{#!comment |
| 580 | | || {{{:modified}}} || changed objects (Note that the styles are not updated when you move a node, so you have to switch the style sheet on and off to get an updated view.) (since r7193) || |
| 581 | | }}} |
| 582 | | You can also negate pseudo classes. E.g. {{{!:new}}} for all old objects. |
| | 643 | === Pseudo Classes ===#PseudoClasses |
| | 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. |
| | 645 | |
| | 646 | ||= '''Class''' =||= '''Description''' =|| |
| | 647 | || `:closed` || true for ways where the first node is the same as the last and for any (completely downloaded) multipolygon relation || |
| | 648 | || `:closed2` || same as above, but this one ignores if a multipolygon is downloaded completely (since r9099) || |
| | 649 | || `:completely_downloaded` || true for a relation whose members are all downloaded (since r9099) || |
| | 650 | || `:new` || all new objects || |
| | 651 | || `:connection` || true for nodes that are used by more than one way || |
| | 652 | || `:unconnected` || true for nodes that are not used by any way (since r6687) || |
| | 653 | || `: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) |
| | 654 | || `:area-style` || true if the object has an area style || |
| | 655 | || `: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 || |
| | 656 | || `:clockwise` || Whether the way is closed and oriented clockwise, or non-closed and the 1st, 2nd and last node are in clockwise order. || |
| | 657 | || `:anticlockwise` || Whether the way is closed and oriented anticlockwise, or non-closed and the 1st, 2nd and last node are in anticlockwise order. || |
| | 658 | || `:unclosed_multipolygon` || true for fully loaded unclosed multipolygon relations (since r8252) || |
| | 659 | || `:open_end` || to select end nodes of unclosed multipolygon relations with `relation:unclosed_multipolygon >:open_end node` (since r8252) || |
| | 660 | || `:in-downloaded-area` || true if an object is within source area and false if in the hatched area (since r8495). || |
| | 661 | || `:selected` || true if an object is selected in the editor (since r9341). || |
| | 662 | || `:highlighted` || true if the object is highlighted || |
| | 663 | || `:modified` || changed and new objects (since r7193). || |
| | 664 | You can also negate pseudo classes. E.g. `!:new` for all old objects. |
| 617 | | default:: |
| 618 | | If you omit the layer in the selector, this is the same as using {{{::default}}}. |
| 619 | | *:: |
| 620 | | In addition, you can use the * layer to override and initialize all layers.[[br]] |
| 621 | | It overrides all existing subparts, so |
| | 698 | If you omit the layer in the selector, this is the same as using `::default`. |
| | 699 | |
| | 700 | One more example: |
| | 701 | {{{ |
| | 702 | #!mapcss |
| | 703 | node[amenity=parking] { |
| | 704 | icon-image: "presets/vehicle/parking/parking.svg"; /* displays the josm internal parking icon in the default layer */ |
| | 705 | text: ref; /* displays the value of the key ref as text in the default layer */ |
| | 706 | } |
| | 707 | |
| | 708 | node[amenity=parking][fee=yes]::fee { |
| | 709 | icon-image: "presets/money/exchange.svg"; /* displays the josm internal exchange icon in the fee layer */ |
| | 710 | icon-offset-x: 14; /* shift the icon */ |
| | 711 | icon-offset-y: -12; /* shift the icon */ |
| | 712 | text: charge; /* displays the value of the key charge as text in the fee layer */ |
| | 713 | text-offset-x: 16; /* shift the text */ |
| | 714 | text-offset-y: 17; /* shift the text */ |
| | 715 | } |
| | 716 | }}} |
| | 717 | The result looks this way: |
| | 718 | |
| | 719 | [[Image(multiple_icons_and_texts.png,link=)]] |
| | 720 | |
| | 721 | In addition, you can use the * layer to override and initialize all layers. \\ |
| | 722 | It overrides all existing subparts, so |
| | 723 | |
| 702 | | You can also negate classes. E.g. {{{way!.path}}} for all ways, which are not part of the class ''.path''. |
| 703 | | |
| 704 | | == @supports rule for conditional processing [''since 8087''] == |
| 705 | | |
| 706 | | @supports rules are used to skip a section of the style under certain conditions. Typically you want to use a feature which is introduced in a newer version of JOSM, but like to have a fall back style for users of older JOSM clients. Example: |
| | 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 | }}} |
| | 818 | |
| | 819 | === @supports Conditional Processing === |
| | 820 | @supports rules are used to skip a section of the style under certain conditions. Typically you want to use a feature which is introduced in a newer version of JOSM, but like to have a fall back style for users of older JOSM clients. This feature came with r8087. Example: |
| 800 | | == Media queries [''since 6970''] (deprecated) == |
| 801 | | |
| 802 | | {{{#!td style="background-color: #faa" |
| 803 | | Note: media queries are deprecated. You should use @supports rules instead (see above). |
| 804 | | }}} |
| 805 | | Media queries are used to skip a section of the style under certain conditions. Typically you want to use a feature which is introduced in a newer version of JOSM, but like to have a fall back style for users of older JOSM clients. Example: |
| 806 | | {{{ |
| 807 | | #!mapcss |
| 808 | | @media (min-josm-version: 9789) { |
| 809 | | way[highway] { |
| 810 | | width: 4; |
| 811 | | color: orange; |
| 812 | | } |
| 813 | | /* fancy new stuff */ |
| 814 | | /* ... */ |
| 815 | | } |
| 816 | | |
| 817 | | @media (max-josm-version: 9788) { |
| 818 | | way[highway] { |
| 819 | | width: 4; |
| 820 | | color: blue; |
| 821 | | } |
| 822 | | /* fall back mode, using more simple features */ |
| 823 | | /* ... */ |
| 824 | | } |
| 825 | | }}} |
| 826 | | |
| 827 | | The syntax closely matches the official [http://www.w3.org/TR/css3-mediaqueries/#syntax css syntax]. The following conditions are supported: |
| 828 | | |
| 829 | | {{{#!th |
| 830 | | '''Media condition''' |
| 831 | | }}} |
| 832 | | {{{#!th |
| 833 | | '''Description''' |
| 834 | | }}} |
| 835 | | |- |
| 836 | | {{{#!td |
| 837 | | (min-josm-version: ''<number>'') |
| 838 | | }}} |
| 839 | | {{{#!td |
| 840 | | Only include {{{@media}}} section when the current version of JOSM is greater than or equal to the specified number. |
| 841 | | }}} |
| 842 | | |- |
| 843 | | {{{#!td |
| 844 | | (max-josm-version: ''<number>'') |
| 845 | | }}} |
| 846 | | {{{#!td |
| 847 | | Only include {{{@media}}} section when the current version of JOSM is lower than or equal to the specified number. |
| 848 | | }}} |
| 849 | | |- |
| 850 | | {{{#!td |
| 851 | | (user-agent: ''<string>'') |
| 852 | | }}} |
| 853 | | {{{#!td |
| 854 | | Only include {{{@media}}} section when the name of the editor / renderer matches the given string. In JOSM, the only accepted value is {{{josm}}}. |
| 855 | | }}} |
| 856 | | |
| 857 | | Conditions can be combined with {{{and}}}: |
| 858 | | |
| 859 | | {{{ |
| 860 | | #!mapcss |
| 861 | | @media (min-josm-version: 6970) and (max-josm-version: 7014) { |
| 862 | | /* only for JOSM versions 6970 to 7014 */ |
| 863 | | } |
| 864 | | }}} |
| 865 | | |
| 866 | | Multiple combined conditions can be chained with a comma (logical ''or''): |
| 867 | | |
| 868 | | {{{ |
| 869 | | #!mapcss |
| 870 | | @media (min-josm-version: 6970) and (max-josm-version: 7014), (user-agent: myEditor) { |
| 871 | | /* for JOSM version 6970 to 7014 and for the editor called "myEditor" */ |
| 872 | | } |
| 873 | | }}} |
| 874 | | |
| 875 | | Since media queries are only supported in JOSM 6970 and later, you should also specify this as minimum JOSM version in the meta selector: |
| 876 | | |
| 877 | | {{{ |
| 878 | | #!mapcss |
| 879 | | meta { |
| 880 | | min-josm-version: "6970"; /* This style uses media queries */ |
| 881 | | /* ... */ |
| 882 | | } |
| 883 | | }}} |
| 884 | | |
| 885 | | |
| 886 | | {{{#!comment |
| 887 | | There is also the {{{not}}} keyword (see the linked css doc for details). |
| 888 | | This is implemented, but probably not very useful. Feel free to add documentation. |
| 889 | | }}} |
| 913 | | == Properties == |
| 914 | | |
| | 942 | === Settings of type `double` === |
| | 943 | Create a setting of type `double`: |
| | 944 | {{{ |
| | 945 | #!mapcss |
| | 946 | setting::place_font_size { |
| | 947 | type: double; |
| | 948 | label: tr("Set place name font size..."); |
| | 949 | default: 11; |
| | 950 | } |
| | 951 | }}} |
| | 952 | |
| | 953 | Use a setting of type `double`: |
| | 954 | {{{ |
| | 955 | #!mapcss |
| | 956 | node.place, way.place, area.place { |
| | 957 | font-size: setting("place_font_size"); |
| | 958 | } |
| | 959 | }}} |
| | 960 | |
| | 961 | === Settings of type `string` === |
| | 962 | Create a setting of type `string`: |
| | 963 | {{{ |
| | 964 | #!mapcss |
| | 965 | setting::textdisplay { |
| | 966 | type: string; |
| | 967 | label: tr("key used for displaying"); |
| | 968 | default: "name"; /* examples for usage: alt_name, old_name, addr:housename, ref, operator, ... */ |
| | 969 | } |
| | 970 | }}} |
| | 971 | |
| | 972 | Use a setting of type `string`: |
| | 973 | {{{ |
| | 974 | #!mapcss |
| | 975 | way { |
| | 976 | text: tag(setting("textdisplay")); |
| | 977 | } |
| | 978 | }}} |
| | 979 | |
| | 980 | === Settings of type `color` === |
| | 981 | Create a setting of type `color`. The `default` color can be any color as understood under [wikitr:/Help/Styles/MapCSSImplementation#Propertyvaluesexplanations Property values explanations]: |
| | 982 | {{{ |
| | 983 | #!mapcss |
| | 984 | setting::colordisplay { |
| | 985 | type: color; |
| | 986 | label: tr("key used for displaying"); |
| | 987 | default: colorDisplayCustomPref#FF00FF; |
| | 988 | } |
| | 989 | }}} |
| | 990 | |
| | 991 | Use a setting of type `color`: |
| | 992 | {{{ |
| | 993 | #!mapcss |
| | 994 | way { |
| | 995 | color: setting("colordisplay"); |
| | 996 | } |
| | 997 | }}} |
| | 998 | |
| | 999 | === Grouping settings === |
| | 1000 | Similar settings can be grouped together by defining ''settings groups'' (since r15289): |
| | 1001 | |
| | 1002 | {{{ |
| | 1003 | #!mapcss |
| | 1004 | settings::my_group { |
| | 1005 | label: tr("my wonderful group"); |
| | 1006 | icon: "my_beautiful_icon"; |
| | 1007 | } |
| | 1008 | }}} |
| | 1009 | |
| | 1010 | Label is mandatory, icon is optional. |
| | 1011 | |
| | 1012 | Once a setting group is defined, it can be referenced from all settings belonging to it: |
| | 1013 | |
| | 1014 | {{{ |
| | 1015 | #!mapcss |
| | 1016 | setting::hide_icons { |
| | 1017 | type: boolean; |
| | 1018 | label: tr("Hide icons at low zoom"); |
| | 1019 | default: true; |
| | 1020 | group: "my_group"; |
| | 1021 | } |
| | 1022 | }}} |
| | 1023 | |
| | 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]. |
| | 1025 | |
| | 1026 | |
| | 1027 | == Properties ==#Properties |
| 918 | | || {{{z-index}}} || Specify the order the objects are drawn: The objects with higher z-index are drawn on top of objects with lower z-index || ''Number'' (can be negative) || 0 || |
| 919 | | || {{{major-z-index}}} || Similar to {{{z-index}}}, but it has higher priority than {{{z-index}}}. So if one object has a higher {{{major-z-index}}} than the other, it is drawn on top. If the {{{major-z-index}}} is the same, {{{z-index}}} decides. || ''Number'' (can be negative) || Depends on style element: area: 1, casing: 2, left-/right-casing: 2.1, line-pattern: 2.9, line: 3, point: 4, default-point: 4.1, line-text: 4.9, point-text: 5 || |
| 920 | | || {{{object-z-index}}} || Similar to {{{z-index}}}, but has lower priority. Controls the painting order for overlapping objects. E.g. for two crossing ways with text: Use {{{z-index}}} or {{{major-z-index}}} if you first want to draw the two lines and then the two captions. Use {{{object-z-index}}} if one of the ways should be completely on top of the other. || ''Number'' (can be negative) || 0 || |
| 921 | | || {{{modifier}}} || Better control, whether a default line / node symbol is generated by JOSM. This happens when there is no proper style ({{{modifier=false}}}) found on any layer. || {{{false}}} or {{{true}}} || {{{false}}} for the default layer and {{{true}}} for any other layer || |
| 922 | | |
| 923 | | |
| | 1031 | || `z-index` || Specify the order the objects are drawn: The objects with higher z-index are drawn on top of objects with lower z-index || ''Number'' (can be negative) || 0 || |
| | 1032 | || `major-z-index` || Similar to `z-index`, but it has higher priority than `z-index`. So if one object has a higher `major-z-index` than the other, it is drawn on top. If the `major-z-index` is the same, `z-index` decides. || ''Number'' (can be negative) || Depends on style element: area: 1, casing: 2, left-/right-casing: 2.1, line-pattern: 2.9, line: 3, point: 4, default-point: 4.1, line-text: 4.9, point-text: 5 || |
| | 1033 | || `object-z-index` || Similar to `z-index`, but has lower priority. Controls the painting order for overlapping objects. E.g. for two crossing ways with text: Use `z-index` or `major-z-index` if you first want to draw the two lines and then the two captions. Use `object-z-index` if one of the ways should be completely on top of the other. || ''Number'' (can be negative) || 0 || |
| | 1034 | || `modifier` || Better control, whether a default line / node symbol is generated by JOSM. This happens when there is no proper style (`modifier=false`) found on any layer. || `false` or `true` || `false` for the default layer and `true` for any other layer || |
| | 1035 | |
| | 1036 | Note that due to performance reasons the values for the three z-indexes are limited to 24 bit float values with max. 5 decimal digits. Currently the internal mappaint style uses values with max. 2 digits before and after the decimal separator. To avoid problems use values of z-indexes between -99.999 and +99.999. (See also #14485) |
| 934 | | || `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`. || - || |
| 935 | | || {{{symbol-shape}}} || Display a symbol at the position of the node || {{{square}}}, {{{circle}}}, {{{triangle}}}, {{{pentagon}}}, {{{hexagon}}}, {{{heptagon}}}, {{{octagon}}}, {{{nonagon}}}, {{{decagon}}} || - || |
| 936 | | || {{{symbol-size}}} || Size of the symbol || ''Number'', can be relative ("+4") || 10 || |
| 937 | | || {{{symbol-stroke-width}}} || outline stroke width || ''Width'' || 1.0 if {{{symbol-stroke-color}}} is set || |
| 938 | | || {{{symbol-stroke-color}}} || line color || ''Color'' || {{{#FFC800}}} if {{{symbol-stroke-width}}} is set || |
| 939 | | || {{{symbol-stroke-opacity}}} || line opacity || ''Opacity'' || 1.0 || |
| 940 | | || {{{symbol-fill-color}}} || fill color for the shape || ''Color'' || {{{blue}}}, unless either {{{symbol-stroke-width}}} or {{{symbol-stroke-color}}} is set || |
| 941 | | || {{{symbol-fill-opacity}}} || fill opacity || ''Opacity'' || 1.0 || |
| 942 | | || {{{text-...}}}, {{{font-...}}} |||||| general text & font properties || |
| 943 | | || {{{text-anchor-horizontal}}} || horizontal text label placement || {{{left}}}, {{{center}}}, {{{right}}} || {{{right}}} || |
| 944 | | || {{{text-anchor-vertical}}} || vertical text label placement || {{{above}}}, {{{top}}}, {{{center}}}, {{{bottom}}}, {{{below}}} || {{{bottom}}} || |
| 945 | | |
| 946 | | 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. |
| 947 | | |
| 948 | | |
| 949 | | |
| 950 | | |
| 951 | | |
| 952 | | === Line styles === |
| | 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(); ... } }}} || - || |
| | 1048 | || `icon-position` || Define the position of the icon for areas. Same as `text-position` (since r11730). || `center`, `inside`, `line` || `center` || |
| | 1049 | || `symbol-shape` || Display a symbol at the position of the node || `square`, `circle`, `triangle`, `pentagon`, `hexagon`, `heptagon`, `octagon`, `nonagon`, `decagon` || - || |
| | 1050 | || `symbol-size` || Size of the symbol || ''Number'', can be relative ("+4") || 10 || |
| | 1051 | || `symbol-stroke-width` || outline stroke width || ''Width'' || 1.0 if `symbol-stroke-color` is set || |
| | 1052 | || `symbol-stroke-color` || line color || ''Color'' || `#FFC800` if `symbol-stroke-width` is set || |
| | 1053 | || `symbol-stroke-opacity` || line opacity || ''Opacity'' || 1.0 || |
| | 1054 | || `symbol-fill-color` || fill color for the shape || ''Color'' || `blue`, unless either `symbol-stroke-width` or `symbol-stroke-color` is set || |
| | 1055 | || `symbol-fill-opacity` || fill opacity || ''Opacity'' || 1.0 || |
| | 1056 | || `text-...`, `font-...` |||||| see general '''Text & Font properties''' || |
| | 1057 | |
| | 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. |
| | 1059 | |
| | 1060 | === Line styles ===#LineStyles |
| 954 | | || {{{width}}} || Line width || ''Width'' || - || |
| 955 | | || {{{color}}} || Line color || ''Color'' || value of {{{fill-color}}} or (if unset) JOSM's default untagged color ({{{#808080}}}) || |
| 956 | | || {{{opacity}}} || How transparent the line is. || ''Opacity'' || 1.0 || |
| 957 | | || {{{dashes}}} || An array of alternating on/off lengths || list of numbers, e.g. [[br]]> 15, 5 [[br]][[br]]may be written as expression: [[br]] > {{{list(3, 4, 5, 6)}}} [[br]][[br]]or the keyword {{{none}}}[[br]]to turn dashes off || - || |
| 958 | | || {{{dashes-offset}}} || shift the dash pattern by a certain amount || ''Number'' (>= 0) || 0 || |
| 959 | | || {{{dashes-background-color}}} || The color to use in between the dashes (optional) || ''Color'' || - || |
| 960 | | || {{{dashes-background-opacity}}} || Opacity value for the dashes background || ''Opacity'' || value of {{{opacity}}} || |
| 961 | | || {{{linecap}}} || Shape at the end of the line (see [http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty here]) || {{{none}}}, {{{round}}}, {{{square}}} || {{{none}}} || |
| 962 | | || {{{linejoin}}} || Shape at the line corners || {{{round}}}, {{{miter}}}, {{{bevel}}} || {{{round}}} || |
| 963 | | || {{{miterlimit}}} || Applies for {{{linejoin: miter}}}. Sets the maximum overshoot when line segments meet at a very small angle || ''Number'' (>= 1.0) || 10.0 || |
| 964 | | || {{{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 || |
| 965 | | || {{{text-position}}} || set to {{{line}}}, if text should be drawn along the line || {{{line}}}, {{{center}}} || - || |
| 966 | | || {{{text-...}}}, {{{font-...}}} |||||| general text & font properties || |
| 967 | | || `repeat-image` || repeated image along a line ''[since 5801]'' || ''Image'' || - || |
| 968 | | || `repeat-image-width` || Width of the image (optional, see `icon-width`) ''[since 5811]'' || ''Number'' || - || |
| 969 | | || `repeat-image-height` || Height of the image (optional) ''[since 5811]'' || ''Number'' || - || |
| 970 | | || `repeat-image-align` || Alignment of the image. Top-, bottom edge or the (horizontal) center line of the image will be along the line ''[since 5801]'' || `top`, `center`, `bottom` || `center` || |
| 971 | | || `repeat-image-offset` || Offset from the line ''[since 5801]'' || ''Number'' || 0 || |
| 972 | | || `repeat-image-spacing` || Spacing between repeated images ''[since 5801]'' || ''Number'' || 0 || |
| 973 | | || `repeat-image-phase` || Initial spacing at the beginning of the line ''[since 5812]'' || ''Number'' || 0 || |
| 974 | | |
| 975 | | 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. |
| | 1062 | || `width` || Line width || ''Width'' || - || |
| | 1063 | || `color` || Line color || ''Color'' || value of `fill-color` or\\(if unset) JOSM's default \\untagged color (`#808080`) || |
| | 1064 | || `opacity` || How transparent the line is. || ''Opacity'' || 1.0 || |
| | 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 || - || |
| | 1066 | || `dashes-offset` || shift the dash pattern by a certain amount || ''Number'' (>= 0) || 0 || |
| | 1067 | || `dashes-background-color` || The color to use in between the dashes (optional) || ''Color'' || - || |
| | 1068 | || `dashes-background-opacity` || Opacity value for the dashes background || ''Opacity'' || value of `opacity` || |
| | 1069 | || `linecap` || Shape at the end of the line (see [https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty here]) || `none`, `round`, `square` || `none` || |
| | 1070 | || `linejoin` || Shape at the line corners || `round`, `miter`, `bevel` || `round` || |
| | 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 || |
| | 1073 | || `text-position` || set to `line`, if text should be drawn along the line || `line`, `center` || - || |
| | 1074 | || `text-...`,\\`font-...` |||||| see general '''Text & Font properties || |
| | 1075 | || `repeat-image` || repeated image along a line ''(since r5801)'' || ''Image'' || - || |
| | 1076 | || `repeat-image-width` || Width of the image (optional, see `icon-width`) ''(since r5811)'' || ''Number'' || - || |
| | 1077 | || `repeat-image-height` || Height of the image (optional) ''(since r5811)'' || ''Number'' || - || |
| | 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` || |
| | 1079 | || `repeat-image-offset` || Offset from the line ''(since r5801)'' || ''Number'' || 0 || |
| | 1080 | || `repeat-image-spacing` || Spacing between repeated images ''(since r5801)'' || ''Number'' || 0 || |
| | 1081 | || `repeat-image-phase` || Initial spacing at the beginning of the line ''(since r5812)'' || ''Number'' || 0 || |
| | 1082 | || `repeat-image-opacity` || Opacity of the repeated image ''(since r16700)'' || ''Number'' || 1.0 || |
| | 1083 | |
| | 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. |
| 977 | | || {{{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) || - || |
| 978 | | || {{{casing-color}}} || Casing color || ''Color'' || value of {{{fill-color}}} or (if unset) JOSM's default untagged color ({{{#808080}}}) || |
| 979 | | || {{{casing-opacity}}} || How transparent the casing is. || ''Opacity'' || 1.0 || |
| 980 | | || {{{casing-}}}... || ... || ... || ... || |
| 981 | | 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. |
| 982 | | |
| 983 | | === Area styles === |
| 984 | | ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| |
| 985 | | || {{{fill-color}}} || Color in which to fill the area || ''Color'' || - || |
| 986 | | || {{{fill-image}}} || Image pattern || ''Image'' || - || |
| 987 | | || {{{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 9008]'' || ''Number'' || - || |
| 988 | | || {{{fill-opacity}}} || How transparent the fill is; applies to both color and image || ''Opacity'' || 1.0 || |
| 989 | | || {{{text-position}}} || set to {{{center}}}, if text should be drawn in the center of the area || {{{line}}}, {{{center}}} || - || |
| 990 | | || {{{text-...}}}, {{{font-...}}} |||||| general text & font properties || |
| 991 | | Required properties to create an Area style: {{{fill-color}}} or {{{fill-image}}} |
| 992 | | |
| | 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`) || |
| | 1088 | || `casing-opacity` || How transparent the casing is. || ''Opacity'' || 1.0 || |
| | 1089 | || `casing-`... || ... || ... || ... || |
| | 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. |
| | 1091 | |
| | 1092 | === Area styles ===#AreaStyles |
| | 1093 | ||= '''Key''' =||= '''Description''' =||= '''Value Format''' =||= '''Default Value''' =|| |
| | 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'' || - || |
| | 1095 | || `fill-image` || Image pattern || ''Image'' || - || |
| | 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'' || - || |
| | 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'' || - || |
| | 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) || |
| | 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` || - || |
| | 1100 | || `text-...`, `font-...` |||||| see general text & font properties || |
| | 1101 | Required properties to create an Area style: `fill-color` or `fill-image` |
| 1035 | | || {{{text-color}}} || the text color || ''Color'' || {{{white}}} for lines and nodes, {{{#c0c0c0}}} for areas (JOSM "{{{text}}}" and "{{{areatext}}}" color preferences) || |
| 1036 | | || {{{text-opacity}}} || how transparent the text is || ''Opacity'' || 1.0 || |
| 1037 | | || {{{text-offset-x}}} || shift the text horizontally, (not supported for text along line) || ''Number'' || 0 || |
| 1038 | | || {{{text-offset-y}}} (can also be written as {{{text-offset}}}) || shift the text vertically, positive values shift the text in upwards direction || ''Number'' || 0 || |
| 1039 | | || {{{text-halo-radius}}} || size of text background border (to make text visible on background with a similar color) || ''Number'' || - || |
| 1040 | | || {{{text-halo-color}}} || color of the text halo || ''Color'' || complement of the text color || |
| 1041 | | || {{{text-halo-opacity}}} || transparency for the text halo || ''Opacity'' || 1.0 || |
| 1042 | | || {{{font-family}}} || font family || ''String'' || "Helvetica"[[br]](JOSM preference "mappaint.font") || |
| 1043 | | || {{{font-size}}} || font size || ''Number'' || 8[[br]](JOSM preference "mappaint.fontsize") || |
| 1044 | | || {{{font-weight}}} || bold or not || {{{bold}}}, {{{normal}}} || {{{normal}}} || |
| 1045 | | || {{{font-style}}} || italic or not || {{{italic}}}, {{{normal}}} || {{{normal}}} || |
| 1046 | | |
| | 1144 | || `text-color` || the text color || ''Color'' || `white` for lines and nodes,\\`#c0c0c0` for areas \\(JOSM "`text`" and "`areatext`"\\color preferences) || |
| | 1145 | || `text-opacity` || how transparent the text is || ''Opacity'' || 1.0 || |
| | 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'' || - || |
| | 1149 | || `text-halo-color` || color of the text halo || ''Color'' || complement of the text color || |
| | 1150 | || `text-halo-opacity` || transparency for the text halo || ''Opacity'' || 1.0 || |
| | 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`") || |
| | 1157 | || `font-weight` || bold or not || `bold`, `normal` || `normal` || |
| | 1158 | || `font-style` || italic or not || `italic`, `normal` || `normal` || |
| | 1159 | |
| | 1160 | === User defined properties === |
| | 1161 | * In [wikitr:/Styles Mappaint styles] you can define any custom property, e.g.: `crc: CRC32_checksum(tag(name))/429496.7296;` |
| | 1162 | * In [wikitr:/Rules Validator rules] they must be prefixed by a `-`, e.g.: `-osmoseItemClassLevel: "1210/1/1";` |
| | 1163 | |
| | 1164 | === Property values explanations === #Propertyvaluesexplanations |
| 1057 | | * named color as found in [http://www.w3.org/TR/css3-color/#svg-color this] list |
| 1058 | | * html style: '''{{{#RRGGBB}}}''', '''{{{#RGB}}}''', '''{{{#RRGGBBAA}}}''' |
| 1059 | | * '''{{{rgb(/*r*/, /*g*/, /*b*/)}}}''' - rgb value with arguments from 0.0 to 1.0 |
| 1060 | | * '''{{{rgba(/*r*/, /*g*/, /*b*/, /*alpha*/)}}}''' - rgb value with alpha |
| 1061 | | * '''{{{hsb_color(/*hue*/, /*saturation*/, /*brightness*/)}}}''' - color from HSB color space |
| | 1175 | * named color as found in [https://www.w3.org/TR/css3-color/#svg-color this] list |
| | 1176 | * html style: '''`#RRGGBB`''', '''`#RGB`''', '''`#RRGGBBAA`''' |
| | 1177 | * '''`rgb(/*r*/, /*g*/, /*b*/)`''' - rgb value with arguments from 0.0 to 1.0 |
| | 1178 | * '''`rgba(/*r*/, /*g*/, /*b*/, /*alpha*/)`''' - rgb value with alpha |
| | 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 |
| 1084 | | asin, atan, atan2, ceil, cos, cosh, exp, floor, log, max, min, random, round, signum, sin, sinh, sqrt, tan, tanh:: |
| 1085 | | the usual meaning, [http://download.oracle.com/javase/7/docs/api/java/lang/Math.html details] |
| | 1202 | asin, atan, atan2, ceil, cos, cosh, exp, floor, log, max, min, mod (since r17759), random, round, signum, sin, sinh, sqrt, tan, tanh:: |
| | 1203 | the usual meaning, [https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/lang/Math.html details] |
| 1158 | | calculate the CRC32 checksum of a string (result is an integer from 0 to 2^32^-1) [''since 6908''] |
| 1159 | | is_right_hand_traffic() [''since 7193'']:: |
| 1160 | | Check if there is left-hand or right-hand traffic at the current location. |
| 1161 | | number_of_tags() [''since 7237'']:: |
| 1162 | | returns the number of tags for the current OSM object |
| 1163 | | print(o) [''since 7237'']:: |
| 1164 | | prints a string representation of `o` to the command line (for debugging) |
| 1165 | | println(o) [''since 7237'']:: |
| 1166 | | prints a string representation of `o` to the command line, followed by a new line (for debugging) |
| 1167 | | JOSM_pref(''key'', ''default'') [''since 7238, with restrictions since 3856'']:: |
| 1168 | | Get value from the JOSM advanced preferences. This way you can offer certain options to the user and make the style customizable. It works with strings, numbers, colors and boolean values. [[br]][This function exists since version 3856, but with some restrictions. `JOSM_pref` always returns a string, but in version 7237 and earlier, the automatic conversion of string to boolean and color was not working. You can use the following workarounds for boolean values and color in version 7237 and earlier: `cond(JOSM_pref("myprefkey", "true")="true", "X", "O")` and `html2color(JOSM_pref("mycolor", "#FF345611"))`. These explicit conversions should be no longer necessary in version 7238 and later. Automatic conversion to a number works in any version.] |
| 1169 | | setting() [''since 7450'']:: |
| 1170 | | to use a [[Help/Styles/MapCSSImplementation#Stylesettings|style setting]] |
| 1171 | | degree_to_radians() [''since 8260'']:: |
| 1172 | | returns a in degree given direction in radians |
| 1173 | | cardinal_to_radians() [''since 8260'']:: |
| 1174 | | returns a cardinal direction in radians |
| 1175 | | waylength() [''since 8253'']:: |
| 1176 | | returns the length of the way in metres |
| 1177 | | areasize() [''since 8253'']:: |
| 1178 | | returns the area of a closed way in square meters |
| 1179 | | |
| 1180 | | |
| | 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''] |
| | 1303 | is_right_hand_traffic():: |
| | 1304 | Check if there is left-hand or right-hand traffic at the current location. [''since r7193''] |
| | 1305 | number_of_tags():: |
| | 1306 | returns the number of tags for the current OSM object [''since r7237''] |
| | 1307 | print(o):: |
| | 1308 | prints a string representation of `o` to the command line (for debugging) [''since r7237''] |
| | 1309 | println(o):: |
| | 1310 | prints a string representation of `o` to the command line, followed by a new line (for debugging) [''since r7237''] |
| | 1311 | JOSM_pref(''key'', ''default''):: |
| | 1312 | Get value from the JOSM advanced preferences. This way you can offer certain options to the user and make the style customizable. It works with strings, numbers, colors and boolean values. \\[This function exists since version r3856, but with some restrictions. `JOSM_pref` always returns a string, but in version r7237 and earlier, the automatic conversion of string to boolean and color was not working. You can use the following workarounds for boolean values and color in version r7237 and earlier: `cond(JOSM_pref("myprefkey", "true")="true", "X", "O")` and `html2color(JOSM_pref("mycolor", "#FF345611"))`. These explicit conversions should be no longer necessary in version r7238 and later. Automatic conversion to a number works in any version. Furthermore, in version r16590, can be used to set color properties. So `* { set_color: JOSM_pref("pref", #000000); }` will create a color property now.] |
| | 1313 | setting():: |
| | 1314 | to use a [wikitr:/Help/Styles/MapCSSImplementation#Stylesettings style setting] [''since r7450''] |
| | 1315 | degree_to_radians():: |
| | 1316 | returns a in degree given direction in radians [''since r8260''] |
| | 1317 | cardinal_to_radians():: |
| | 1318 | returns a cardinal direction in radians [''since r8260''] |
| | 1319 | waylength():: |
| | 1320 | returns the length of the way in metres [''since r8253''] |
| | 1321 | areasize():: |
| | 1322 | returns the area of a closed way in square meters [''since r8253''] |
| | 1323 | at(lat,lon):: |
| | 1324 | returns true if the object centroid lies at given ''lat''/''lon'' coordinates, e.g. to check for nodes at "null island" `node[at(0.0,0.0)]` [''since r12514''] |
| | 1325 | is_similar(''str1'', ''str2''):: |
| | 1326 | returns true if the two strings are similar, but not identical, i.e., have a Levenshtein distance of 1 or 2. Example: `way[highway][name][is_similar(tag(name), "Main Street")]` checks for streets with a possible typo in the name (e.g. Main Streeg). [''since r14371''] |
| | 1327 | gpx_distance():: |
| | 1328 | returns the lowest distance between the OSM object and a GPX point [''since r14802''] |
| | 1329 | count_roles():: |
| | 1330 | returns the number of primitives in a relation with the specified roles [''since r15275''] |
| | 1331 | sort(''str1'', ''str2'', ''str3'', ''...''):: |
| | 1332 | sorts an array of strings [''since r15279''] |
| | 1333 | sort_list(''list_name''):: |
| | 1334 | sorts a list of strings [''since r15279''] |
| | 1335 | tag_regex(''regex''):: |
| | 1336 | returns a list containing the values of keys that match the regex [''since r15317''] |
| | 1337 | to_boolean(''str''):: |
| | 1338 | returns the string argument as a boolean [''since r16110''] |
| | 1339 | to_byte(''str''):: |
| | 1340 | returns the string argument as a byte [''since r16110''] |
| | 1341 | to_short(''str''):: |
| | 1342 | returns the string argument as a short [''since r16110''] |
| | 1343 | to_int(''str''):: |
| | 1344 | returns the string argument as a int [''since r16110''] |
| | 1345 | to_long(''str''):: |
| | 1346 | returns the string argument as a long [''since r16110''] |
| | 1347 | to_float(''str''):: |
| | 1348 | returns the string argument as a float [''since r16110''] |
| | 1349 | to_double(''str''):: |
| | 1350 | returns the string argument as a double [''since r16110''] |
| | 1351 | uniq(''str1'', ''str2'', ''str3'', ''...''):: |
| | 1352 | returns a list of strings that only have unique values from an array of strings [''since r15323''] |
| | 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''] |
| 1278 | | |
| 1279 | | * seems to have {{{[tunnel=1]}}} instead of {{{[tunnel=yes]}}} (Halcyon) or {{{[tunnel?]}}} (JOSM) |
| 1280 | | |
| 1281 | | == See also == |
| 1282 | | * [wiki:Help/Validator/MapCSSTagChecker MapCSSTagChecker] |
| 1283 | | * [wiki:Styles Styles] |
| | 1480 | * seems to have `[tunnel=1]` instead of `[tunnel=yes]` (Halcyon) or `[tunnel?]` (JOSM) |
| | 1481 | |
| | 1482 | |
| | 1483 | == Media queries (deprecated) == |
| | 1484 | |
| | 1485 | {{{#!td style="background-color: #faa" |
| | 1486 | Note: media queries are deprecated. You should use @supports rules instead (see above). |
| | 1487 | }}} |
| | 1488 | Media queries are used to skip a section of the style under certain conditions. Typically you want to use a feature which is introduced in a newer version of JOSM, but like to have a fall back style for users of older JOSM clients. This feature came with r6970. Example: |
| | 1489 | {{{ |
| | 1490 | #!mapcss |
| | 1491 | @media (min-josm-version: 9789) { |
| | 1492 | way[highway] { |
| | 1493 | width: 4; |
| | 1494 | color: orange; |
| | 1495 | } |
| | 1496 | /* fancy new stuff */ |
| | 1497 | /* ... */ |
| | 1498 | } |
| | 1499 | |
| | 1500 | @media (max-josm-version: 9788) { |
| | 1501 | way[highway] { |
| | 1502 | width: 4; |
| | 1503 | color: blue; |
| | 1504 | } |
| | 1505 | /* fall back mode, using more simple features */ |
| | 1506 | /* ... */ |
| | 1507 | } |
| | 1508 | }}} |
| | 1509 | |
| | 1510 | The syntax closely matches the official [https://www.w3.org/TR/css3-mediaqueries/#syntax css syntax]. The following conditions are supported: |
| | 1511 | |
| | 1512 | {{{#!th |
| | 1513 | '''Media condition''' |
| | 1514 | }}} |
| | 1515 | {{{#!th |
| | 1516 | '''Description''' |
| | 1517 | }}} |
| | 1518 | |- |
| | 1519 | {{{#!td |
| | 1520 | (min-josm-version: ''<number>'') |
| | 1521 | }}} |
| | 1522 | {{{#!td |
| | 1523 | Only include `@media` section when the current version of JOSM is greater than or equal to the specified number. |
| | 1524 | }}} |
| | 1525 | |- |
| | 1526 | {{{#!td |
| | 1527 | (max-josm-version: ''<number>'') |
| | 1528 | }}} |
| | 1529 | {{{#!td |
| | 1530 | Only include `@media` section when the current version of JOSM is lower than or equal to the specified number. |
| | 1531 | }}} |
| | 1532 | |- |
| | 1533 | {{{#!td |
| | 1534 | (user-agent: ''<string>'') |
| | 1535 | }}} |
| | 1536 | {{{#!td |
| | 1537 | Only include `@media` section when the name of the editor / renderer matches the given string. In JOSM, the only accepted value is `josm`. |
| | 1538 | }}} |
| | 1539 | |
| | 1540 | Conditions can be combined with `and`: |
| | 1541 | |
| | 1542 | {{{ |
| | 1543 | #!mapcss |
| | 1544 | @media (min-josm-version: 6970) and (max-josm-version: 7014) { |
| | 1545 | /* only for JOSM versions 6970 to 7014 */ |
| | 1546 | } |
| | 1547 | }}} |
| | 1548 | |
| | 1549 | Multiple combined conditions can be chained with a comma (logical ''or''): |
| | 1550 | |
| | 1551 | {{{ |
| | 1552 | #!mapcss |
| | 1553 | @media (min-josm-version: 6970) and (max-josm-version: 7014), (user-agent: myEditor) { |
| | 1554 | /* for JOSM version 6970 to 7014 and for the editor called "myEditor" */ |
| | 1555 | } |
| | 1556 | }}} |
| | 1557 | |
| | 1558 | Since media queries are only supported in JOSM 6970 and later, you should also specify this as minimum JOSM version in the meta selector: |
| | 1559 | |
| | 1560 | {{{ |
| | 1561 | #!mapcss |
| | 1562 | meta { |
| | 1563 | min-josm-version: "6970"; /* This style uses media queries */ |
| | 1564 | /* ... */ |
| | 1565 | } |
| | 1566 | }}} |
| | 1567 | |
| | 1568 | |
| | 1569 | {{{#!comment |
| | 1570 | There is also the `not` keyword (see the linked css doc for details). |
| | 1571 | This is implemented, but probably not very useful. Feel free to add documentation. |
| | 1572 | }}} |
