Changes between Version 1 and Version 2 of Help/Styles/MapCSSTutorial


Ignore:
Timestamp:
2011-02-10T15:15:25+01:00 (13 years ago)
Author:
bastiK
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • Help/Styles/MapCSSTutorial

    v1 v2  
    22
    33=== Example 1 ===
    4 {{{
     4
     5{{{#!html
     6<table width="100%">
     7  <tr>
     8    <td valign="top">
     9<pre class="wiki">
    510node[amenity=restaurant]
    611{
    … …  
    813    text: auto;
    914}
    10 }}}
    11 
     15</pre>
     16  </td>
     17    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/MapStyles/MapCSSTutorial/example01.png" /></td>
     18  </tr>
     19</table>
     20}}}
    1221This 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:
    1322 * absolute path
    … …  
    1827
    1928=== Example 2 ===
    20 {{{
     29{{{#!html
     30<table width="100%">
     31  <tr>
     32    <td valign="top">
     33<pre class="wiki">
    2134way[highway=residential]
    2235{
    … …  
    2437    color: lightgray;
    2538}
    26 }}}
     39</pre>
     40  </td>
     41    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/MapStyles/MapCSSTutorial/example02.png" /></td>
     42  </tr>
     43</table>
     44}}}
    2745Here we have all residential roads drawn in lightgray and with line width 4 px. Color can be given in one of the followin formats:
    2846 * named color as found in [http://www.w3.org/TR/css3-color/#svg-color this] list
    … …  
    3149 
    3250=== Example 3 ===
    33 {{{
     51{{{#!html
     52<table width="100%">
     53  <tr>
     54    <td valign="top">
     55<pre class="wiki">
    3456way[highway=living_street]
    3557{
    … …  
    4567    font-color: lightyellow;
    4668}
     69</pre>
     70  </td>
     71    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/MapStyles/MapCSSTutorial/example03.png" /></td>
     72  </tr>
     73</table>
    4774}}}
    4875In 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.
    … …  
    5178
    5279=== Example 4 ===
    53 
    54 {{{
     80{{{#!html
     81<table width="100%">
     82  <tr>
     83    <td valign="top">
     84<pre class="wiki">
    5585area[building]
    5686{
    5787    fill-color: orange;
    5888}
     89</pre>
     90  </td>
     91    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/MapStyles/MapCSSTutorial/example04.png" /></td>
     92  </tr>
     93</table>
    5994}}}
    6095
    … …  
    6398=== Example 5 ===
    6499
    65 {{{
     100{{{#!html
     101<table width="100%">
     102  <tr>
     103    <td valign="top">
     104<pre class="wiki">
    66105area[landuse=forest], area[natural=wood]
    67106{
    68107    fill-image: "http://trac.openstreetmap.org/export/25265/applications/rendering/mapnik/symbols/forest.png";
    69108    fill-opacity: 0.8;
     109
     110    text: auto;
     111    text-position: center;
    70112}
     113</pre>
     114  </td>
     115    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/MapStyles/MapCSSTutorial/example05.png" /></td>
     116  </tr>
     117</table>
    71118}}}
    72119
    73 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}}}.
     120This 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.
    74121
    75122