Context Navigation

Editing Help/Styles/MapCSSTutorial

Adjust edit area height: Edit side-by-side

= MapCSS Tutorial =

=== Example 1 ===

{{{#!html
<table width="100%">
  <tr>
    <td valign="top">
<pre class="wiki">
node[amenity=restaurant] 
{
    icon-image: "food/restaurant.png";
    text: auto;
}
</pre>
  </td>
    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/MapStyles/MapCSSTutorial/example01.png" /></td>
  </tr>
</table>
}}} 
This draws a restaurant icon and a text label for each node that is tagged {{{amenity=restaurant}}}. The image can be specified in one of the following forms:
 * absolute path
 * URL
 * a path relative to the current *.mapcss file
 * relative path that revers to a build-in image (see Example 1). The {{{josm-tested.jar}}} file is a simple zip archive; you can extract it and use all files from the {{{images}}} folder.
The declaration '''{{{text: auto;}}}''' tells JOSM to derive the text for the label automatically. At time of writing, the following tags are searched and the first one that is found will be used: "{{{name:}}}"+''<LANG>'', "{{{name}}}", "{{{int_name}}}", "{{{ref}}}", "{{{operator}}}", "{{{brand}}}" and "{{{addr:housenumber}}}". You can also pick a specific tag e.g. '''{{{text: "cuisine";}}}'''.

=== Example 2 ===
{{{#!html
<table width="100%">
  <tr>
    <td valign="top">
<pre class="wiki">
way[highway=residential]
{
    width: 4;
    color: lightgray;
}
</pre>
  </td>
    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/MapStyles/MapCSSTutorial/example02.png" /></td>
  </tr>
</table>
}}} 
Here we have all residential roads drawn in lightgray and with line width 4 px. Color can be given in one of the followin formats:
 * named color as found in [http://www.w3.org/TR/css3-color/#svg-color this] list
 * html style: '''{{{#ff0000}}}'''
 * '''{{{rgb(0.0, 1.0 , 0.2)}}}''' - rgb value with arguments from 0.0 to 1.0
 
=== Example 3 ===
{{{#!html
<table width="100%">
  <tr>
    <td valign="top">
<pre class="wiki">
way[highway=living_street]
{
    width: 7;
    color: #c0c0c0;
    dashes: 15,9;
    dashes-background-color: #00ff00;

text: "name";
    text-position: line;
    text-offset: 9;
    font-size: 12;
    font-color: lightyellow;
}
</pre>
  </td>
    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/MapStyles/MapCSSTutorial/example03.png" /></td>
  </tr>
</table>
}}}
In the first part of the declarations, we define a dash pattern of gray and green. Leave out the {{{dashes-background-color}}} to display a broken line with no color in between the dashes.

In the second part, the name of the street ('''{{{text: "name";}}}''') will be displayed along the line ('''{{{text-position: line;}}}''') with an vertical offset of 9 px. An offset of 0 would render the text on top of the line.

=== Example 4 ===
{{{#!html
<table width="100%">
  <tr>
    <td valign="top">
<pre class="wiki">
area[building]
{
    fill-color: orange;
}
</pre>
  </td>
    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/MapStyles/MapCSSTutorial/example04.png" /></td>
  </tr>
</table>
}}}

The '''{{{area}}}''' type selector acts on ways and multipolygon relations. Note that the outline of the building is painted as well, although we haven't specefied any line properties. This is because JOSM will alway draw at least one line element for each way. If no line properties are found, a default line element is generated.

=== Example 5 ===

{{{#!html
<table width="100%">
  <tr>
    <td valign="top">
<pre class="wiki">
area[landuse=forest], area[natural=wood]
{
    fill-image: "http://trac.openstreetmap.org/export/25265/applications/rendering/mapnik/symbols/forest.png";
    fill-opacity: 0.8;

text: auto;
    text-position: center;
}
</pre>
  </td>
    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/MapStyles/MapCSSTutorial/example05.png" /></td>
  </tr>
</table>
}}}

This shows, how you can list multiple selectors for one rule. We fill the area with a pattern, if it is tagged {{{landuse=forest}}} or {{{natural=wood}}}. The opacity is set to 0.8, where 1.0 means opaque and 0.0 is fully transparent. You can set opacity, whenever a color or an image is defined. E.g. {{{icon-opacity}}} for {{{icon-image}}} and {{{opacity}}} for {{{color}}}. A label for the object is placed in the the center of the area.

Note: See WikiFormatting and TracWiki for help on editing wiki content.

Change information

Your email or username:

E-mail address and name can be saved in the Preferences

Comment about this change (optional):

Attachments (5)

example02.png (1.1 KB ) - added by bastiK 14 years ago.
example03.png (2.9 KB ) - added by bastiK 14 years ago.
example04.png (873 bytes ) - added by bastiK 14 years ago.
example05.png (4.5 KB ) - added by bastiK 14 years ago.
example01.png (1.4 KB ) - added by Klumbumbus 9 years ago.

Download all attachments as: .zip

Note: See TracWiki for help on using the wiki.