Changes between Version 14 and Version 15 of Nl:Help/Styles/MapCSSImplementation


Ignore:
Timestamp:
2016-12-26T17:01:45+01:00 (9 years ago)
Author:
DiGro
Comment:

adjusted to revision 133

Legend:

Unmodified
Added
Removed
Modified

  • Nl:Help/Styles/MapCSSImplementation

    v14 v15  
    1 [[TranslatedPages(revision=120)]]
     1[[TranslatedPages(revision=133)]]
    22[[PageOutline(1-10,Inhoud)]]
    3 Deze pagina documenteert details over implementatie van [osmwiki:MapCSS/0.2 MapCSS] in JOSM.
    4 
    5 == Waar het in JOSM wordt gebruikt ==
     3Deze pagina documenteert details over implementatie van [osmwiki:MapCSS/0.2 MapCSS] in JOSM. Dit wordt gebruikt voor de volgende mogelijkheden in JOSM:
     4
     5* [wiki:/Nl:Styles Kaarttekenstijlen]
     6* [wiki:/Nl:Rules regels voor Validatie]
    67* [wiki:/Nl:Help/Action/Search venster Zoeken]
    7 * [wiki:/Nl:Help/Dialog/TagsMembership venster Tags/Leden] - gebruikt om zichtbare tags te filteren
    8 * [wiki:/Nl:Help/Dialog/RelationList venster Relaties] - gebruikt om zichtbare relaties te filteren
    9 * [[Extend JOSM#Customstylesandpublication]]
    10 * [[Extend JOSM#Customtagcheckerrules]]
    118
    129TODO: mogelijk meer
    … …  
    214211
    215212=== Ouder-selector ===
    216 In aanvulling op kind-selector ondersteunt JOSM ook de notie van een '''ouder-selector'''. Onthoud dat ouder-selectoren een
    217 JOSM-specifieke uitbreiding zijn van MapCSS en niet aanwezig zijn in andere implementaties van MapCSS.
    218 
    219 gelijk aan een kind-selector, komt een ouder-selector alleen overeen als zowel de ouder- als het kindobject overeenkomen. In tegenstelling tot
    220 de kind-selector, wordt het teken < gebruikt.
     213In aanvulling op kind-selector ondersteunt JOSM ook de notie van een '''ouder-selector'''. Onthoud dat ouder-selectoren een JOSM-specifieke uitbreiding zijn van MapCSS en niet aanwezig zijn in andere implementaties van MapCSS.
     214
     215Net als bij een kind-selector, komt een ouder-selector alleen overeen als zowel de ouder- als het kindobject overeenkomen. In tegenstelling tot de kind-selector, wordt het teken < gebruikt.
    221216
    222217In tegenstelling tot de kind-selector, zal het ouder-object worden "geselecteerd". Met andere woorden, de eigenschappen in het declaratieblok {{{{...}}}} zijn van toepassing op het object aan de rechterkant van het teken "<".
    … …  
    353348}}}
    354349{{{#!td align=left  valign=top   
    355 Overeenkomst [http://download.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#sum Reguliere expressie]
     350Overeenkomst [https://download.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#sum Reguliere expressie]
    356351
    357352}}}
    … …  
    362357                                            /* Onthoud dat reguliere expressies moeten zijn omsloten door /.../                     */                 
    363358}}}
    364 Hoofdlettergevoelige overeenkomsten kunnen worden bereikt via de ingebedde vlag expressie `(?i)` (zie [http://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#CASE_INSENSITIVE Pattern.CASE_INSENSITIVE]).
     359Hoofdlettergevoelige overeenkomsten kunnen worden bereikt via de ingebedde vlag expressie `(?i)` (zie [https://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#CASE_INSENSITIVE Pattern.CASE_INSENSITIVE]).
    365360{{{
    366361#!css
    … …  
    373368}}}
    374369{{{#!td align=left  valign=top   
    375 Ontkennende [http://download.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#sum Reguliere expressie] overeenkomst
     370Ontkennende [https://download.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#sum Reguliere expressie] overeenkomst
    376371
    377372}}}
    … …  
    444439{{{
    445440#!css
    446 way[!highway]                     /* komt overeen met elke weg die geen tag 'highway' heeft                            */
    447 way[!"VALSOU"]                    /* aanhalingstekens gebruiken als overeenkomen van hoofdletters vereist is           */
    448 way[!"name:fr"]                   /* aanhalingstekens gebruiken als naam van de tag speciale tekens bevat (witruimte, dubbele punten, etc.) */
    449 }}}
    450 }}}
    451 |-------------------------------------------------------------------------------
    452 {{{#!td align=left  valign=top
    453 Aanwezigheid van tag door overeenkomst [http://download.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#sum Reguliere expressie] (sinds r6547)
     441way[!highway]                     /* komt overeen met elke weg die geen tag 'highway' heeft
     442   */
     443way[!"VALSOU"]                    /* aanhalingstekens gebruiken als overeenkomen van
     444                                     hoofdletters vereist is
     445   */
     446way[!"name:fr"]                   /* aanhalingstekens gebruiken als naam van de tag
     447                                     speciale tekens bevat (witruimte, dubbele punten, etc.)
     448   */
     449}}}
     450}}}
     451|-------------------------------------------------------------------------------
     452{{{#!td align=left  valign=top
     453Aanwezigheid van tag door overeenkomst [https://download.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html#sum Reguliere expressie] (sinds r6547)
    454454}}}
    455455{{{#!td align=left  valign=top   
    … …  
    466466{{{
    467467#!css
    468 way[!/^addr:/]                    /* komt overeen met elke weg die geen tag 'addr:*' heeft */
     468way[!/^addr:/]                    /* komt overeen met elke weg die geen tag 'addr:*' heeft
     469   */
    469470}}}
    470471}}}
    … …  
    556557}}}
    557558
     559=== Gebied-selector ===
     560
     561U kunt testen of een ovject ligt binnen of buiten een specifiek gebied. JOSM heeft daar een interne database voor. Het bestand voor de gebieden is een osm-bestand en kan [/export/HEAD/josm/trunk/data/boundaries.osm hier] worden gedownload en worden geopend in JOSM om het te bekijken [attachment:boundaries.png (voorbeeld schermafdruk)]. Het bevat de grenzen van alle landen in de wereld. Vanwege de uitvoering zijn de grenzen vereenvoudigd. Zij kunnen op verzoek in speciale gevallen worden verfijnd. De gebieden zijn "getagd" met hun [https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 ISO_3166-1_alpha-2 codes]. USA, Canada en Australië hebben aanvullende grenzen voor hun onderverdelingen. Bekijk de volgende voorbeelden over hoe de selectors voor gebieden te gebruiken. Gebieds-selectoren zijn minder nuttig in kaarttekenstijlen en kunnen erg veel bronnen in beslag nemen. Zij zijn echter veel nuttiger voor [wiki:/Nl:Help/Validator/MapCSSTagChecker op MapCSS gebaseerde regels voor validatie]. Er is een eenvoudiger manier om gebieden met links en rechts rijdend verkeer te selecteren, bekijk #Pseudoklassen. Bekijk #10387 voor de belangrijkste implementatie van deze mogelijkheid.
     562
     563{{{
     564#!mapcss
     565node[inside("FR")]                    /* komt overeen met elke knoop gelegen binnen Frankrijk
     566                                         (inclusief alle overzeese gebiedsdelen)
     567    */
     568node[inside("FX")]                    /* komt overeen met elke knoop gelegen binnen stedelijk Frankrijk
     569                                         (d.i. alleen het deel van het vasteland met zijn
     570                                          nabijgelegen  eilanden, inclusief Corsica)
     571    */
     572node[inside("EU")]                    /* komt overeen met elke knoop gelegen binnen de Europese
     573                                         Gemeenschap
     574    */
     575node[inside("FR,DE")]                 /* komt overeen met elke knoop gelegen binnen Frankrijk __OF__
     576                                         binnen Duitsland
     577    */
     578node[inside("US-FL")]                 /* komt overeen met elke knoop gelegen binnen de staat
     579                                         Florida van de VS
     580    */
     581
     582node[outside("FR")]                   /* komt overeen met elke knoop gelegen buiten Frankrijk
     583    */
     584node[outside("FR,DE")]                /* komt overeen met elke knoop gelegen buiten Frankrijk
     585                                         __EN__ buiten Duitsland
     586    */
     587node[inside("US")][outside("US-FL")]  /* komt overeen met elke knoop gelegen binnen de VS,
     588                                         met uitzondering van de staat Florida
     589    */
     590}}}
    558591
    559592=== Zoom-selector ===
    … …  
    578611
    579612=== Pseudoklassen ===
    580 Zie [https://josm.openstreetmap.de/doc/org/openstreetmap/josm/gui/mappaint/mapcss/Condition.PseudoClasses.html Javadoc] voor de up-to-date lijst van pseudoklassen die worden ondersteund door JOSM's MapCSS-implementatie.
     613Zie [/doc/org/openstreetmap/josm/gui/mappaint/mapcss/Condition.PseudoClasses.html Javadoc] voor de up-to-date lijst van pseudoklassen die worden ondersteund door JOSM's MapCSS-implementatie.
    581614
    582615|| {{{:closed}}} || waar voor wegen waar de eerste knoop hetzelfde is als de laatste en voor elke relatie van een (volledig gedownloade) multipolygoon ||
    … …  
    632665 default::
    633666 Als u de laag in de selector weglaat, is dat hetzelfde als {{{::default}}} gebruiken.
    634  *::
     667
     668Nog een voorbeeld:
     669{{{
     670#!mapcss
     671node[amenity=parking] {
     672    icon-image: "presets/vehicle/parking/parking.svg";    /* geeft het interne pictogram van JOSM
     673                                                             voor parkeren weer in de standaard laag
     674    */
     675    text: ref;                                            /* geeft de waarde van de sleutel ref weer
     676                                                             als tekst in de standaard laag
     677    */
     678}
     679
     680node[amenity=parking][fee=yes]::fee {
     681    icon-image: "presets/money/exchange.svg";             /* geeft het interne pictogram van JOSM
     682                                                             voor wisselkantoor weer in de laag fee
     683    */
     684    icon-offset-x: 14;                                    /* verschuift het pictogram */
     685    icon-offset-y: -12;                                   /* verschuift het pictogram */
     686    text: charge;                                         /* geeft de waarde van de sleutel charge
     687                                                             als tekst weer in de laag fee
     688    */
     689    text-offset-x: 16;                                    /* verschuift de tekst */
     690    text-offset-y: 17;                                    /* verschuift de tekst */
     691}
     692}}}
     693Het resultaat ziet er zo uit:
     694
     695[[Image(Help/Styles/MapCSSImplementation:multiple_icons_and_texts.png)]]
     696
    635697 In aanvulling daarop kunt u de * laag gebruiken om voorrang te verkrijgen en alle lagen te initialiseren.[[br]]
    636698 Het krijgt voorrang boven alle bestaande subgedeelten, dus
     699
    637700{{{
    638701#!css
    … …  
    641704way::* { c; }
    642705}}}
    643  is equivalent aan
     706is equivalent aan
    644707{{{
    645708#!css
    … …  
    649712way::B { c; }
    650713}}}
    651  en het initialiseert nieuwe subgedeelten. Met andere woorden:
     714en het initialiseert nieuwe subgedeelten. Met andere woorden:
    652715{{{
    653716#!css
    … …  
    655718way::A { b; }
    656719}}}
    657  is equivalent aan
     720is equivalent aan
    658721{{{
    659722#!css
    … …  
    662725way::A { b; }
    663726}}}
    664  wat op zijn beurt hetzelfde is als
     727wat op zijn beurt hetzelfde is als
    665728{{{
    666729#!css
    … …  
    668731way::A { b; }
    669732}}}
    670  of
     733of
    671734{{{
    672735#!css
    … …  
    748811}}}
    749812
    750 De syntaxis komt nagenoeg overeen met de officiële [http://dev.w3.org/csswg/css-conditional/ syntaxis voor CSS]. De volgende voorwaarden worden ondersteund:
     813De syntaxis komt nagenoeg overeen met de officiële [https://drafts.csswg.org/csswg/css-conditional/ syntaxis voor CSS]. De volgende voorwaarden worden ondersteund:
    751814
    752815{{{#!th
    … …  
    876939|| {{{dashes-background-color}}} || De kleur die gebruikt moet worden tussen de streepjes (optioneel) || ''Kleur'' ||  -  ||
    877940|| {{{dashes-background-opacity}}} || Waarde van transparantie voor de achtergrond van de streepjes || ''Transparantie'' ||  waarde van {{{opacity}}}  ||
    878 || {{{linecap}}} || Vorm aan het einde van de lijn (zie [http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty hier]) || {{{none}}}, {{{round}}}, {{{square}}} ||  {{{none}}}  ||
     941|| {{{linecap}}} || Vorm aan het einde van de lijn (zie [https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty hier]) || {{{none}}}, {{{round}}}, {{{square}}} ||  {{{none}}}  ||
    879942|| {{{linejoin}}} || Vorm op hoeken van de lijn || {{{round}}}, {{{miter}}}, {{{bevel}}} ||  {{{round}}}  ||
    880943|| {{{miterlimit}}}                                   || Van toepassing voor {{{linejoin: miter}}}. Stelt de maximale oversteek in als lijnsegmenten elkaar ontmoeten onder een zeer kleine hoek || ''Getal'' (>= 1.0) ||  10.0  ||
    … …  
    904967|| {{{fill-extent}}} || Stel deze eigenschap in om alleen de omtrek van het gebied te tekenen. Het getal specificeert hoe ver vanaf de rand van het gebied, in de richting van het midden, moet worden gevuld. (Indien niet ingesteld zal het gebied volledig worden gevuld) ''[sinds 9008]'' || ''Getal'' ||  -  ||
    905968|| {{{fill-opacity}}} || Hoe transparant de vulling is; van toepassing op zowel kleur als afbeelding || ''Transparantie'' ||  1.0  ||
    906 || {{{text-position}}} || Ingesteld op {{{center}}}, als de tejst in het midden van het gebied zou moeten worden getekend || {{{line}}}, {{{center}}} ||  -  ||
     969|| {{{text-position}}} || Ingesteld op {{{center}}}, als de tekst in het midden van het gebied zou moeten worden getekend || {{{line}}}, {{{center}}} ||  -  ||
    907970|| {{{text-...}}}, {{{font-...}}} ||||||  Algemene eigenschappen tekst & lettertype  ||
    908971Vereiste eigenschappen om een stijl voor een gebied te maken: {{{fill-color}}} of {{{fill-image}}}
    … …  
    9711034
    9721035'' '''Kleur''' ''
    973  * benoemde kleur die kan worden gevonden in [http://www.w3.org/TR/css3-color/#svg-color deze] lijst
     1036 * benoemde kleur die kan worden gevonden in [https://www.w3.org/TR/css3-color/#svg-color deze] lijst
    9741037 * HTML-stijl: '''{{{#RRGGBB}}}''', '''{{{#RGB}}}''', '''{{{#RRGGBBAA}}}'''
    9751038 * '''{{{rgb(/*r*/, /*g*/, /*b*/)}}}''' - Waarde RGD met argumenten van 0.0 tot en met 1.0
    … …  
    9991062  vergelijkinsoperatoren
    10001063 asin, atan, atan2, ceil, cos, cosh, exp, floor, log, max, min, random, round, signum, sin, sinh, sqrt, tan, tanh::
    1001   in de gebruikelijke betekenis, [http://download.oracle.com/javase/7/docs/api/java/lang/Math.html details]
     1064  in de gebruikelijke betekenis, [https://download.oracle.com/javase/7/docs/api/java/lang/Math.html details]
    10021065 cond(b, fst, snd)::
    10031066 b ? fst : snd::
    … …  
    10901153  geeft een cardinale richting terug in radialen
    10911154 waylength() [''sinds 8253'']::
    1092   gefet d elengte van de weg in meters terug
     1155  geeft de lengte van de weg in meters terug
    10931156 areasize() [''sinds 8253'']::
    10941157  geeft het gebied van een gesloten weg terug in vierkante meters
    … …  
    12221285}}}
    12231286
    1224 De syntaxis komt nagenoeg overeen met de officiële [http://www.w3.org/TR/css3-mediaqueries/#syntax syntaxis voor CSS]. De volgende voorwaarden worden ondersteund:
     1287De syntaxis komt nagenoeg overeen met de officiële [https://www.w3.org/TR/css3-mediaqueries/#syntax syntaxis voor CSS]. De volgende voorwaarden worden ondersteund:
    12251288
    12261289{{{#!th