[[TranslatedPages(revision=13)]]
= Handleiding MapCSS =

=== Voorbeeld 1 ===

{{{#!html
<table width="100%">
  <tr>
    <td valign="top">
<pre class="wiki">
node[amenity=restaurant] 
{
    icon-image: "presets/food/restaurant.svg";
    text: auto;
}
</pre>
  </td>
    <td align="right" valign="top" width="100%"><img src="/raw-attachment/wiki/Help/Styles/MapCSSTutorial/example01.png" /></td>
  </tr>
</table>
}}} 
Dit tekent een pictogram voor een restaurant en een tekstlabel voor elke knoop die is getagd met `amenity=restaurant`. De afbeelding mag worden gespecificeerd in één van de volgende vormen:
 * absolute pad
 * URL
 * een relatief pad voor het huidige bestand *.mapcss
 * een relatief pad dat wordt verwerkt naar een ingebouwde afbeelding (zie Voorbeeld 1). Het bestand `josm-tested.jar` is een eenvoudig ZIP-archief; u kunt het uitpakken en alle bestanden gebruiken uit de map {{{images}}}.
De declaratie '''`text: auto;`''' vertelt JOSM om de tekst voor het label automatisch op te halen. Ten tijde van het schrijven werd naar de volgende tags gezocht en de eerste die zal worden gevonden zal worden gebruikt: "`name:`"+''<LANG>'', "`name`", "`int_name`", "`ref`", "`operator`", "`brand`" en "`addr:housenumber`". U mag ook een specifieke tag opgeven, bijv. '''`text: "cuisine";`'''.

=== Voorbeeld 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/Styles/MapCSSTutorial/example02.png" /></td>
  </tr>
</table>
}}} 
Hier hebben we alle wegen in woonwijken getekend in lichtgrijs en met een lijndikte van 4 px. Kleur mag worden opgegeven in één van de volgende indelingen:
 * benoemde kleur zoals gevonden in [http://www.w3.org/TR/css3-color/#svg-color deze] lijst
 * HTML-stijl: '''`#ff0000`'''
 * '''`rgb(0.0, 1.0 , 0.2)`''' - waarde RGB met argumenten van 0.0 tot en met 1.0
 
=== Voorbeeld 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/Styles/MapCSSTutorial/example03.png" /></td>
  </tr>
</table>
}}}
In het eerste gedeelte van de declaraties, definiëren we een streepjespatroon van grijs en groen. Laat `dashes-background-color` weg om een onderbroken lijn zonder kleur weer te geven tussen de streepjes.

In het tweede deel zal de naam van de straat ('''`text: "name";`''') worden weergegeven naast de lijn ('''`text-position: line;`''') met een verticale verschuiving van 9 px. Een verschuiving van 0 zou de tekst bovenop de lijn renderen.

=== Voorbeeld 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/Styles/MapCSSTutorial/example04.png" /></td>
  </tr>
</table>
}}}

Het type selectie '''`area`''' acteert op wegen en relaties van multipolygonen. De voorwaarde '''`[building]`''' is van toepassing op alle objecten die de sleutel {{{building}}} hebben ingesteld op elke waarde. Onthoud dat ook de omtrek van het gebouw zal worden getekend, hoewel we geen eigenschappen voor de lijn hebben gespecificeerd. Dit komt omdat JOSM altijd tenminste één element lijn zal tekenen voor elke weg. Indien er geen eigenschappen voor een lijn worden gevonden, wordt een standaard element lijn gegenereerd.

=== Voorbeeld 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/Styles/MapCSSTutorial/example05.png" /></td>
  </tr>
</table>
}}}

Dit laat zien hoe u meerdere selecties voor één regel kunt vermelden. We vullen het gebied met een patroon, als het is getagd met `landuse=forest` of met `natural=wood`. De transparantie is ingesteld op 0.8, waar 1.0 ondoorzichtig betekent en 0.0 is volledig transparant. U kunt de transparantie altijd instellen wanneer een kleur of afbeelding is gedefinieerd. Bijv. `icon-opacity` voor `icon-image` en `opacity` voor `color`. Een label voor het object wordt in het midden van het gebied geplaatst.


== Zie ook ==
* de [wikitr:/Help/Styles/MapCSSImplementation JOSM implementatie verwijzing] vermeld de ondersteunde mogelijkheden voor MapCSS meer in detail.
* de [wikitr:/Help/Validator/MapCSSTagChecker tagcontrole] gebruikt veel van deze mogelijkheden.