Changes between Initial Version and Version 1 of Nb:Help/Styles/MapCSSTutorial


Ignore:
Timestamp:
2025-03-08T21:11:55+01:00 (3 months ago)
Author:
paleid
Comment:

Nb added

Legend:

Unmodified
Added
Removed
Modified

  • Nb:Help/Styles/MapCSSTutorial

    v1 v1  
     1[[TranslatedPages(revision=13)]]
     2= MapCSS Opplæring =
     3
     4=== Eksempel 1 ===
     5
     6{{{#!html
     7<table width="100%">
     8  <tr>
     9    <td valign="top">
     10<pre class="wiki">
     11node[amenity=restaurant]
     12{
     13    icon-image: "presets/food/restaurant.svg";
     14    text: auto;
     15}
     16</pre>
     17  </td>
     18    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example01.png" /></td>
     19  </tr>
     20</table>
     21}}}
     22Dette tegner et restaurantikon og en tekstetikett for hver node som er merket med `amenity=restaurant`. Bildet kan spesifiseres i en av følgende former:
     23 * absolutt bane
     24 * URL
     25 * en bane i forhold til den nåværende *.mapcss-filen
     26 * relativ bane som refererer til et innebygd bilde (se Eksempel 1). `josm-tested.jar`-filen er et enkelt zip-arkiv; du kan pakke det ut og bruke alle filer fra `images`-mappen.
     27Erklæringen **`text: auto;`** forteller JOSM å automatisk utlede teksten for etiketten. På tidspunktet for skriving søkes følgende tagger, og den første som finnes vil bli brukt: "`name:`"+''<LANG>'', "`name`", "`int_name`", "`ref`", "`operator`", "`brand`" og "`addr:housenumber`". Du kan også velge en spesifikk tag, for eksempel **`text: "cuisine";`**.
     28
     29=== Eksempel 2 ===
     30{{{#!html
     31<table width="100%">
     32  <tr>
     33    <td valign="top">
     34<pre class="wiki">
     35way[highway=residential]
     36{
     37    width: 4;
     38    color: lightgray;
     39}
     40</pre>
     41  </td>
     42    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example02.png" /></td>
     43  </tr>
     44</table>
     45}}}
     46Her har vi alle boligveier tegnet i lysegrått og med linjebredde 4 piksler. Farge kan angis i ett av følgende formater:
     47 * navngitt farge som finnes i [http://www.w3.org/TR/css3-color/#svg-color denne] listen
     48 * html-stil: **`#ff0000`**
     49 * **`rgb(0.0, 1.0 , 0.2)`** - rgb-verdi med argumenter fra 0.0 til 1.0
     50 
     51=== Eksempel 3 ===
     52{{{#!html
     53<table width="100%">
     54  <tr>
     55    <td valign="top">
     56<pre class="wiki">
     57way[highway=living_street]
     58{
     59    width: 7;
     60    color: #c0c0c0;
     61    dashes: 15,9;
     62    dashes-background-color: #00ff00;
     63
     64    text: "name";
     65    text-position: line;
     66    text-offset: 9;
     67    font-size: 12;
     68    font-color: lightyellow;
     69}
     70</pre>
     71  </td>
     72    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example03.png" /></td>
     73  </tr>
     74</table>
     75}}}
     76I den første delen av erklæringene definerer vi et strekmønster av grått og grønt. Utelat `dashes-background-color` for å vise en stiplet linje uten farge mellom strekene.
     77
     78I den andre delen vil navnet på gaten (**`text: "name";`**) vises langs linjen (**`text-position: line;`**) med en vertikal forskyvning på 9 piksler. En forskyvning på 0 ville plassert teksten på toppen av linjen.
     79
     80=== Eksempel 4 ===
     81{{{#!html
     82<table width="100%">
     83  <tr>
     84    <td valign="top">
     85<pre class="wiki">
     86area[building]
     87{
     88    fill-color: orange;
     89}
     90</pre>
     91  </td>
     92    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example04.png" /></td>
     93  </tr>
     94</table>
     95}}}
     96
     97**`area`**-typeselektoren virker på veier og multipolygonrelasjoner. Betingelsen **`[building]`** gjelder for alle objekter som har nøkkelen `building` satt til en hvilken som helst verdi. Merk at omrisset av bygningen også er malt, selv om vi ikke har spesifisert noen linjeegenskaper. Dette er fordi JOSM alltid vil tegne minst ett linjeelement for hver vei. Hvis ingen linjeegenskaper finnes, genereres et standard linjeelement.
     98
     99=== Eksempel 5 ===
     100
     101{{{#!html
     102<table width="100%">
     103  <tr>
     104    <td valign="top">
     105<pre class="wiki">
     106area[landuse=forest], area[natural=wood]
     107{
     108    fill-image: "http://trac.openstreetmap.org/export/25265/applications/rendering/mapnik/symbols/forest.png";
     109    fill-opacity: 0.8;
     110
     111    text: auto;
     112    text-position: center;
     113}
     114</pre>
     115  </td>
     116    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example05.png" /></td>
     117  </tr>
     118</table>
     119}}}
     120
     121Dette viser hvordan du kan liste flere selektorer for én regel. Vi fyller området med et mønster hvis det er merket med `landuse=forest` eller `natural=wood`. Opasiteten er satt til 0.8, hvor 1.0 betyr ugjennomsiktig og 0.0 er helt gjennomsiktig. Du kan sette opasitet når som helst en farge eller et bilde er definert. For eksempel `icon-opacity` for `icon-image` og `opacity` for `color`. En etikett for objektet plasseres i midten av området.
     122
     123
     124== Se også ==
     125* [wikitr:/Help/Styles/MapCSSImplementation JOSM implementeringsreferansen] lister opp de støttede mapcss-funksjonene mer detaljert.
     126* [wikitr:/Help/Validator/MapCSSTagChecker taggkontrollen] bruker mange av disse funksjonene.