Changes between Version 2 and Version 3 of Help/Styles/MapCSSImplementation


Ignore:
Timestamp:
2011-02-15T16:14:18+01:00 (14 years ago)
Author:
bastiK
Comment:

expand doc

Legend:

Unmodified
Added
Removed
Modified

  • Help/Styles/MapCSSImplementation

    v2 v3  
    11This page documents details on JOSM's [http://wiki.openstreetmap.org/wiki/MapCSS/0.2 MapCSS] implementation. At the moment (Feb-2011) it is under active development and anything may change without warning.
    22
    3 == General Structure ==
     3= General Structure =
    44A MapCSS style sheet has rules of the form
    55{{{
    … …  
    1717}}}
    1818
    19 == Selectors ==
     19= Selectors =
    2020Examples for selectors are
    2121{{{
    … …  
    2727The different elements ('''type'''-, '''zoom'''- , '''condition''' selector, '''pseudo classes''', '''layer identifier''', '''grouping''' and '''child combinator''') are explained below.
    2828
    29 === Type selector ===
     29== Type selector ==
    3030 {{{node}}}, {{{way}}}, {{{relation}}}::
    3131  applies to the osm objects of the given type
    … …  
    5858}}}
    5959
    60 === Zoom selector ===
     60== Zoom selector ==
    6161You can restrict the scale at that the a given rule applies.
    6262|| {{{way|z12 {...}}}} || At zoom level 12 ||
    … …  
    6767The precise definition of scale ranges for each zoom level may change in future. By rule of thumb you can expect to be approximately at zoom level ''n'' when imagery displays slippymap tiles of level ''n''.
    6868
    69 === Condition selector ===
     69== Condition selector ==
    7070You can add any number of conditions, which must all be fulfilled, otherwise the block of declarations will not be executed for that object. Possible conditions are:
    7171
    … …  
    7878|| {{{*[amenity=vending_machine][vending~=stamps]}}} || any object, that is a vending machine and offers stamps (assumes that the value is a list of semicolon delimited entries) ||
    7979|| {{{way[highway][name*="straße"]}}} || any highway where the string "straße" is contained somewhere in the value of the {{{name}}} tag. (Quotes are required if characters other than "a"-"z", underscore or dash are used.) ||
     80|| {{{*[name=~/.../]}}} || [http://download.oracle.com/javase/6/docs/api/java/util/regex/Pattern.html#sum Regex] ||
     81
     82
    8083In addition, eval expressions can be used in the brackets, e.g.
    8184|| {{{way[eval(prop("opacity")<0.2)]}}} || any way where the current value of the {{{opacity}}} property is less then 0.2 ||
    8285|| {{{node[eval(JOSM_search("role:forward_stop | role:backward_stop"))]}}} || JOSM search expression - in this case any node that is member of a relation as {{{forward_stop}}} or {{{backward_stop}}} ||
    8386
    84 === Pseudo Classes ===
     87== Pseudo Classes ==
    8588
    8689|| {{{:closed}}} || true for ways where the first node is the same as the last and for any multipolygon relation ||
    … …  
    9093|| {{{: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.) ||
    9194}}}
    92 === Layer Identifier ===
     95== Layer Identifier ==
    9396
    9497Layers can be used to create more than one style for a single object. Here is an example:
    … …  
    181184
    182185
     186
     187
    183188= Properties =
     189
     190
    184191
    185192== General properties ==
    … …  
    197204
    198205}}}
     206
     207
     208
    199209
    200210== Icon and symbol styles ==
    … …  
    204214|| {{{icon-opacity}}} || Opacity of the icon image || ''Opacity'' ||  1.0  ||
    205215|| {{{symbol-shape}}}                               || Display a symbol at the position of the node || {{{square}}}, {{{circle}}} ||  -  ||
    206 || {{{symbol-size}}} || Size of the symbol || ''Number'' ||  10  ||
    207 || {{{symbol-stroke-width}}} || outline line width || ''Number'' ||  1.0 if {{{symbol-stroke-color}}} is set  ||
     216|| {{{symbol-size}}} || Size of the symbol || ''Number'', can be relative ("+4") ||  10  ||
     217|| {{{symbol-stroke-width}}} || outline stroke width || ''Width'' ||  1.0 if {{{symbol-stroke-color}}} is set  ||
    208218|| {{{symbol-stroke-color}}} || line color || ''Color'' || {{{#FFC800}}} if {{{symbol-stroke-width}}} is set ||
    209219|| {{{symbol-stroke-opacity}}} || line opacity || ''Opacity'' ||  1.0  ||
    … …  
    283293 * has a special meaning if you put a "+" sign in front (relative width)
    284294
    285 == Eval expressions ==
     295
     296
     297
     298= Eval expressions =
     299
     300
    286301See [http://josm.openstreetmap.de/browser/josm/trunk/src/org/openstreetmap/josm/gui/mappaint/mapcss/Expression.java source] for details and an up to date list.
    287302 +, -, *, /::
    … …  
    312327 rgb(''r'', ''g'', ''b'')::
    313328  create color value (arguments from 0.0 to 1.0)
    314 {{{#!comment
    315329 red(''clr''), blue(''clr''), blue(''clr'')::
    316330  get value of color channels in rgb color model
    317 }}}
     331 length(''str'')::
     332  length of a string
    318333 JOSM_search("...")::
    319334  true, if JOSM search applies to the object
    … …  
    324339  get color from JOSM preference
    325340}}}
     341
     342
     343
     344
     345
     346
     347== Examples ==
     348
     349* circle symbol for house number with size depending of the number of digits
     350{{{
     351node[addr:housenumber] {
     352    symbol-shape: circle;
     353    symbol-size: eval((min(length(get_tag_value("addr:housenumber")), 3) * 5) + 3);
     354    symbol-fill-color: #B0E0E6;
     355
     356    text: "addr:housenumber";
     357    text-anchor-horizontal: center;
     358    text-anchor-vertical: center;
     359    text-offset-x: -1;
     360    text-offset-y: -1; }
     361   
     362node[addr:housenumber]::hn_casing {
     363    z-index: -100;
     364    symbol-shape: circle;
     365    symbol-size: +2;
     366    symbol-fill-color: blue;
     367}
     368}}}
     369* invert colors
     370{{{
     371*::* {
     372    color: eval(rgb(1 - red(prop(color)), 1 - green(prop(color)), 1 - blue(prop(color))));
     373    fill-color: eval(rgb(1 - red(prop(fill-color)), 1 - green(prop(fill-color)), 1 - blue(prop(fill-color))));
     374}
     375}}}
     376* random stuff
     377{{{
     378way {
     379    width: eval(random() * 20);
     380    color: eval(rgb(random(), random(), random()));
     381}
     382}}}
     383
     384
     385
     386
     387
     388
     389= Compatibility notes =
     390== MapCSS 0.2 ==
     391
     392=== Grammar ===
     393
     394 * descendant combinator is not supported, use child combinator instead.
     395 * JOSM MapCSS is not liberal with white spaces in the selector, they are only permitted before and after ''comma'' and ''greater sign'' (Grouping and Child combinator).
     396 * {{{way[oneway=yes]}}} does not have any magic, you can use {{{way[oneway?]}}} instead
     397 * {{{set}}} is not supported, instead of
     398{{{
     399way[highway=footway] { set path; color: #FF6644; width: 2; }
     400way[highway=path]    { set path; color: brown; width: 2; }
     401way.path { text:auto; text-color: green; text-position: line; text-offset: 5; }
     402}}}
     403  you can write
     404{{{
     405way[highway=footway] { path-set : true; color: #FF6644; width: 2; }
     406way[highway=path]    { path-set : true; color: brown; width: 2; }
     407way[eval(prop(path-set))] { text:auto; text-color: green; text-position: line; text-offset: 5; }
     408}}}
     409 * no stacking of declaration blocks, you have to provide explicit layer names
     410 * no {{{@import}}}
     411 * JOSM does not require {{{eval(...)}}} to be wrapped around expressions, but for compatibility with other MapCSS implementations you should write it out.
     412
     413=== Properties ===
     414At the moment, JOSM does not support the following properties:
     415 canvas: ::
     416  {{{fill-color}}} is called {{{background-color}}}, the rest is not supported
     417 line: ::
     418  {{{image}}}
     419 point/icon: ::
     420  {{{icon-width, icon-height}}}
     421 label: ::
     422  {{{font-variant, text-decoration, text-transform, max-width, text-halo-color, text-halo-radius}}}
     423 shield: ::
     424  not supported
     425
     426JOSM uses the MapCSS 0.1 way to specify {{{casing-width}}}, i.e. '''{{{casing-width: 9;}}}''' is an absolute value. You can write '''{{{casing-width: +4;}}}''' to specify a 2px casing on both sides.
     427
     428== Halcyon (Potlatch 2) ==
     429
     430 * Text label is placed in the center of the icon. For compatibility with Halcyon put
     431{{{
     432node { text-anchor-vertical: center; text-anchor-horizontal: center; }
     433}}}
     434 at the beginning of your style sheet.
     435 * standard z-index seems to be different from 0 (FIXME: what is it?)
     436 * '''{{{image: circle;}}}''' corresponds to '''{{{symbol-shape: circle;}}}'''
     437
     438== Kothic ==
     439
     440 * Kothic has support for eval, which probably differs from JOSM's eval.
     441 * Kothic understands units, whereas JOSM always calculates in pixel.
     442 * The extrusion features are not available in JOSM
     443
     444== Ceyx ==
     445
     446 * seems to have {{{[tunnel=1]}}} instead of {{{[tunnel=yes]}}} (Halcyon) or {{{[tunnel?]}}} (JOSM)
     447