Context Navigation

MapCSSImplementation

Timestamp:: 2023-02-15T12:28:05+01:00 (3 years ago)
Author:: DiGro
Comment:: adjusted to revision 250

Legend:

: Unmodified
: Added
: Removed
: Modified

Nl:Help/Styles/MapCSSImplementation

-              v85
+              v86
 [[TranslatedPages(revision=208)]]
+[[TranslatedPages(revision=250)]]
 [[PageOutline(2-10,Inhoud)]]
 = MapCSS Implementation=
 …
 U kunt een type selector decoreren met een '''zoom-selector'''. De zoom-selector beperkt het bereik aan zoomniveaus waarop de respectievelijke regel voor MapCSS wordt toegepast.
+{{{#!th align=center valign=top
+'''Voorbeeld'''
+}}}
+{{{#!th align=center valign=top
+'''Beschrijving'''
+}}}
+|-------------------------------------------------------------------------------
+|| `way|z12 {...} ` || Op zoomniveau 12 ||
+|| `way|z13-15 {...} ` || Van 13 tot en met 15 ||
+|| `way|z16- {...} ` || 16 en hoger ||
+|| `way|z-12 {...} ` || 12 en lager ||
+|| `way {...} `  || elk zoomniveau ||
+||= '''Voorbeeld 1''' =||= '''Voorbeeld 2''' =||= '''Voorbeeld 3''' =||= '''Beschrijving''' =||
+|| `way|z12 {...}` || `node|z12 {...}` || `node|z12[...] {...}` || Op zoomniveau 12 ||
+|| `way|z13-15 {...}` || `node|z13-15 {...}` || `way|z13-15[...] {...}` ||Van13 tot en met 15 ||
+|| `way|z16- {...}` || `node|z16- {...}` || `node|z16-[...] {...}` || 16 en hoger ||
+|| `way|z-12 {...}` || `node|z-12 {...}` || `node|z-12[...] {...}` || 12 en lager ||
+|| `way {...}` || `node{...}` || `way[...] {...}` || elk zoomniveau ||
 De precieze definitie van schaalbereiken voor elk zoomniveau kan in de toekomst wijzigen. Als vuistregel kunt u verwachten dat u ongeveer op zoomniveau ''n'' bent als afbeeldingen tegels van slippymap weergeven van het niveau ''n''.
 …
 === Pseudoklassen ===#PseudoClasses
 Zie [/doc/org/openstreetmap/josm/gui/mappaint/mapcss/ConditionFactory.PseudoClasses.html Javadoc] voor de up-to-date lijst van pseudoklassen die worden ondersteund door JOSM's MapCSS-implementatie.
 ||= Klasse =||= Beschrijving =||
+||= '''Klasse''' =||= '''Beschrijving''' =||
 || `:closed` || waar voor wegen waar de eerste knoop hetzelfde is als de laatste en voor elke relatie van een (volledig gedownloade) multipolygoon ||
 || `:closed2` || hetzelfde als hierboven, maar deze negeert of een multipolygoon volledig is gedownload (sinds r9099) ||
 …
 U kunt klassen ook ontkennend gebruiken. Bijv. `way!.path` voor alle wegen, die geen deel uitmaken van de klasse ''.path''.
+=== Klassen en laag samen ===
+Als u lagen en klassen samen wilt gebruiken, onthoud dan dat u de klasse moet identificeren via is_prop_set.
+{{{#!mapcss
+node[railway=signal] { set sgnl; }
+/* dit werkt niet */
+node.sgnl::layer_signal_icon  { z-index: 1000; ... icon: icon/signal-icon.svg; ... }
+node.sgnl::layer_signal_text  { z-index: 1010; ... text: concat("Naam van signaal: ", tag("ref")); ..... )
+/* gebruik in plaats daarvan is_prop_set("...", "default") */
+node[is_prop_set("sgnl", "default")]::layer_signal_icon  { z-index: 1000; ... icon: icon/signal-icon.svg; ... }
+node[is_prop_set("sgnl", "default")]::layer_signal_text  { z-index: 1010; ... text: concat("Naam van signaal: ", tag("ref")); ..... )
+}}}
 === @supports Voorwaardelijk verwerken ===
 …
 || `icon-offset-x` || Verplaats het pictogram in horizontale richting (positieve waarden naar rechts) (sinds r8085) || ''Getal'' ||  0  ||
 || `icon-offset-y` || Verplaats het pictogram in verticale richting (positieve waarden naar beneden) (sinds r8085) || ''Getal'' ||  0  ||
 || `icon-rotation` || Draai het pictogram met de klok mee of tegen de klok in (negatieve waarde)(sinds r8260) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` ([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) van een cardinale richting (bijv. `northeast` of `sw`); Bekijk ook de functies `degree_to_radians`, `cardinal_to_radians`. ||  -  ||
+|| `icon-rotation` || Draai het pictogram met de klok mee of tegen de klok in (negatieve waarde)(sinds r8260) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` ([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) \\ of een cardinale richting (bijv. `northeast` of `sw`); \\ Bekijk ook de functies `degree_to_radians`, `cardinal_to_radians`. \\ bijv. `note[...] {... icon-rotation: way; ...}`  ||  -  ||
 || `icon-position` || Definieer de positie van het pictogram voor gebieden. hetzelfde als `text-position` (sinds r11730). || `center`, `inside`, `line` ||  `center`  ||
 || `symbol-shape`|| Geef een symbool weer op de positie van de knoop || `square`, `circle`, `triangle`, `pentagon`, `hexagon`, `heptagon`, `octagon`, `nonagon`, `decagon` ||  -  ||
 …
 || `symbol-fill-color` || Kleur voor vulling van de vorm || ''Kleur'' || `blue`, tenzij ofwel `symbol-stroke-width` of `symbol-stroke-color` zijn ingesteld ||
 || `symbol-fill-opacity` || Transparantie vulling || ''Transparantie'' ||  1.0  ||
+|| `text-…`, `font-…` ||||||  Algemene eigenschappen tekst & lettertype  ||
+|| `text-anchor-horizontal` || Horizontale plaatsing tekstlabel || `left`, `center`, `right` ||  {{{right}}}  ||
+|| `text-anchor-vertical` || Verticale plaatsing tekstlabel || `above`, `top`, `center`, {{{bottom}}}, `below` ||  `bottom`  ||
+|| `text-rotation` || Roteer de tekst met de wijzers van de klok mee of tegen de wijzers in (negatieve value)(vanaf r16253) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` ([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) of een cardinale richting (bijv. `northeast` of `sw`); Zie ook de functies `degree_to_radians`, `cardinal_to_radians`. (Onthoud dat de richting betekent waar de bovenkant van de tekst naartoe wijst. Dat betekent met de standaard richting north dat de tekst naar east loopt (met een taal van links naar rechts). Dus als u de tekst bijvoorbeeld naar het zuiden zou willen laten lopen, dient u east in te stellen.) ||  -  ||
+|| `text-…`, `font-…` ||||||  bekijk Algemene '''eigenschappen tekst & lettertype'''  ||
 Vertrouw niet op de standaard waarden voor eigenschappen van `symbol-…` (uitgezonderd `opacity`). Zij zijn bedoeld voor "snelle & vuile" stijlbladen en zouden moeten worden ingesteld op een expliciete waarde.
+=== Lijnstijlen ===
+=== Lijnstijlen ===#LineStyles
 ||=  '''Sleutel''' =||= '''Beschrijving''' =||= '''Opmaak waarde''' =||= '''Standaard waarde''' =||
 || `width` || Lijnbreedte || ''Breedte'' ||  -  ||
 || `color` || Lijnkleur || ''Kleur'' ||  waarde van {{{fill-color}}} of (indien niet ingesteld) JOSM's standaard niet getagde kleur ({{{#808080}}}) ||
+|| `color` || Lijnkleur || ''Kleur'' ||  waarde van {{{fill-color}}} of\\(indien niet ingesteld) JOSM's standaard \\niet getagde kleur ({{{#808080}}}) ||
 || `opacity` || Hoe transparant de lijn is. || ''Transparantie'' ||  1.0  ||
 || `dashes` || Een array van wisselende aan/uit lengten || lijst met getallen, bijv. \\ > 15, 5 \\ \\ mag worden geschreven als expressie: \\ > `list(3, 4, 5, 6)` \\ \\ of het selutelwoord `none` \\ om de streepjes uit te schakelen ||  -  ||
 …
 || `linecap` || Vorm aan het einde van de lijn (zie [https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty hier]) || `none`, `round`, `square` ||  `none`  ||
 || `linejoin` || Vorm op hoeken van de lijn || `round`, `miter`, `bevel` ||  `round`  ||
+|| `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  ||
 || {{{offset}}} || Verplaats de lijn naar links of rechts (kijkend in de richting van de weg). Dit zou kunnen worden gebruikt voor het tekenen van meerdere rijstroken voor één weg of markeer de linker- en rechterzijde van de weg anders. || ''Getal'' (positieve waarde verplaatst de lijn naar links, negatieve naar rechts) ||  0  ||
+|| `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  ||
+|| {{{offset}}} || Verplaats de lijn naar links of rechts (kijkend in de richting van de weg). \\Dit zou kunnen worden gebruikt voor het tekenen van meerdere rijstroken voor één weg of de linker- en rechterzijde van de weg anders markeren. || ''Getal'' (positieve waarde verplaatst de lijn naar links, \\negatieve naar rechts) ||  0  ||
 || `text-position` || Ingesteld op `line`, als tekst langs de lijn zou moeten worden getekend || `line`, `center` ||  -  ||
+|| `text-…`, `font-…` ||||||  Algemene eigenschappen tekst & lettertype  ||
+|| `text-…`, \\`font-…` ||||||  bekijk Algemene '''eigenschappen tekst & lettertype'''  ||
 || `repeat-image` || Herhaalde afbeelding langs een lijn ''[vanaf r5801]'' || ''Afbeelding'' ||  -  ||
 || `repeat-image-width` || Breedte van de afbeelding (optioneel, zie `icon-width`) ''[vanaf r5811]'' || ''Getal'' ||  -  ||
 || `repeat-image-height` || Hoogte van de afbeelding (optioneel) ''[vanaf r5811]'' || ''Getal'' ||  -  ||
+|| `repeat-image-align` || Uitlijning van de afbeelding. Boven-, onderrand of de (horizontale) middellijn van de afbeelding zal langs de lijn liggen ''[vanaf r5801]'' || `top`, `center`, `bottom` ||  `center`  ||
+|| `repeat-image-align` || Uitlijning van de afbeelding. \\Boven-, onderrand of de (horizontale) middellijn van de afbeelding zal langs de lijn liggen ''[vanaf r5801]'' || `top`, `center`, `bottom` ||  `center`  ||
 || `repeat-image-offset` || Verschuiving vanaf de lijn ''[vanaf r5801]'' || ''Getal'' ||  0  ||
 || `repeat-image-spacing` || Afstand tussen herhalende afbeeldingen ''[vanaf r5801]'' || ''Getal'' ||  0  ||
 …
 Al deze eigenschappen (behalve voor `text-…` en `font-…` bestaan ook met het voorvoegsel `casing-`. De casing is een tweede onafhankelijk lijnelement, dat onder de normale lijn wordt getekend en kan worden gebruikt om een dun frame rondom de lijn te tekenen in een andere kleur.
 ||=  '''Sleutel''' =||= '''Beschrijving''' =||= '''Opmaak waarde''' =||= '''Standaard waarde''' =||
+|| `casing-width`               || Bredte van de rand aan beide zijden van de hoofdlijn. In JOSM < 5214: Totale breedte van de casing || ''Breedte'' (valt terug op `width` indien een relatieve breeedte wordt gespecificeerd) ||  -  ||
+|| `casing-color` || Kleur van de casing || ''Kleur'' ||  waarde van {{{fill-color}}} of (indien niet ingesteld) JOSM's standaard niet getagde kleur ({{{#808080}}}) ||
+|| `casing-width`               || Breedte van de rand aan beide zijden van de hoofdlijn. \\ In JOSM < 5214: Totale breedte van de casing || ''Breedte'' (valt terug op `width` indien een relatieve breeedte wordt gespecificeerd) ||  -  ||
+|| `casing-color` || Kleur van de casing || ''Kleur'' ||  waarde van {{{fill-color}}} of (indien niet ingesteld) \\JOSM's standaard niet getagde kleur ({{{#808080}}}) ||
 || `casing-opacity` || Hoe transparant de casing is. || ''Transparantie'' ||  1.0  ||
 || `casing-`… || … || … ||  …  ||
 Soortgelijk aan `casing-`, zijn er ook de voorvoegsels `left-casing-` en `right-casing-`. Dat tekent aanvullende lijnen links en rechts van de hoofdlijn.
+=== Stijlen voor gebieden ===
+=== Stijlen voor gebieden ===#AreaStyles
 ||=  '''Sleutel''' =||= '''Beschrijving''' =||= '''Opmaak waarde''' =||= '''Standaard waarde''' =||
 || `fill-color` || Kleur waarmee het gebied gevuld moet worden. Tot 11700, de component Alfa werd ingesteld op 50 om een effect voor transparantie te verkrijgen. || ''Kleur'' ||  -  ||
 …
 || `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) ''[vanaf r9008]'' || ''Getal'' ||  -  ||
 || `fill-extent-threshold` || Stel deze eigenschap in om een volledig gebied te tekenen als het opgegeven percentage van bedekking is bereikt. Mag groter zijn dan 100% als het bedekte gebied wordt geschat als **perimeter * bereik**. || ''Getal'' ||  -  ||
+|| `fill-opacity` || Hoe transparant de vulling is; van toepassing op zowel kleur als afbeelding || ''Transparantie'' ||  0.2 ''[sinds vanaf r11700, 1.0 daarvoor]'' (kan worden gewijzigd met de voorkeuren `mappaint.fillalpha` en `mappaint.fill-image-alpha` )   ||
+|| `fill-opacity` || Hoe transparant de vulling is; van toepassing op zowel kleur als afbeelding || ''Transparantie'' ||  0.2 ''[sinds vanaf r11700, 1.0 daarvoor]'' (kan worden gewijzigd met de voorkeuren \\`mappaint.fillalpha` en \\`mappaint.fill-image-alpha` )   ||
 || {{{text-position}}} || Ingesteld op {{{center}}}, als de tekst in het midden van het gebied zou moeten worden getekend. Ingesteld op `inside` om de tekst volledig binnen het gebied te plaatsen ''(sinds r11722)''. || `line`, `center`, `inside`
+|| `text-…`, `font-…` ||||||  Algemene eigenschappen tekst & lettertype  ||
+|| `text-…`, `font-…` ||||||  bekijk Algemene eigenschappen tekst & lettertype  ||
 Vereiste eigenschappen om een stijl voor een gebied te maken: `fill-color` of `fill-image`
 …
 }}}
 {{{#!td align=left  valign=top
+Hoe de labeltekst te zoeken. Er wordt geen label weergegeven, tenzij deze instructie aanwezig is.
+Hoe de labeltekst te zoeken. \\Er wordt geen label weergegeven, tenzij deze instructie aanwezig is.
 }}}
 {{{#!td align=left  valign=top
 `auto`
+   leid de tekst automatisch af. De standaard tags voor de naam zijn: "`name:`"+''<LANG>'', "`name`", "`int_name`", "`ref`", "`operator`", "`brand`" en "`addr:housenumber`".
+   Configureer een lijst met namen van tags in de voorkeur "`mappaint.nameOrder`" om deze lijst te kunnen wijzigen. (na het wijzigen van de lijst, is opnieuw opstraten van JOSM vereist.)
+   leid de tekst automatisch af. De standaard tags voor de naam zijn: "`name:`"+''<LANG>'', \\"`name`", "`int_name`", "`ref`", "`operator`", "`brand`" en "`addr:housenumber`".
+   Configureer een lijst met namen van tags in de voorkeur "`mappaint.nameOrder`" om \\ deze lijst te kunnen wijzigen. (na het wijzigen van de lijst, is opnieuw opstraten van JOSM vereist.)
 ''Tekenreeks''
    Geeft de sleutel van de tag aan waarvan de waarde moet worden gebruikt als tekst.
+  Geeft de sleutel van de tag aan waarvan de waarde moet worden gebruikt als tekst.
 ''Expressies''
   U mag een expressie invoeren om de weer te geven tekst te berekenen. Voorbeelden:
   * `eval("dit is een statische tekst")` - renderert een statische tekst
+  * `eval(concat(tag("eerste"), "-", tag("tweede")))` - geeft de smanegevoegde tags "eerste" en "tweede" weer
+  * `eval(concat(tag("eerste"), "-", tag("tweede")))` - geeft de smanegevoegde tags \\ "eerste" en "tweede" weer
 {{{""}}}
 …
 }}}
 |-------------------------------------------------------------------------------
+|| `text-color` || De tekstkleur || ''Kleur'' ||  `white` voor lijnen en knopen, `#c0c0c0` voor gebieden (JOSM voorkeur voor kleuren "`text`" en "`areatext`") ||
+|| `text-color` || De tekstkleur || ''Kleur'' ||  `white` voor lijnen en knopen, `#c0c0c0` voor gebieden (JOSM voorkeur voor kleuren \\ "`text`" en \\ "`areatext`") ||
 || `text-opacity` || Hoe transparant de tekst is || ''Transparantie'' ||  1.0  ||
+|| `text-offset-x` || Verplaatst de tekst horizontaal, (niet ondersteund voor tekst langs de lijn) || ''Getal'' ||  0  ||
+|| `text-offset-y` (mag ook worden geschreven als `text-offset`)  || Verplaatst de tekst verticaal, positieve waarden verplaatsen de tekst naar boven  || ''Getal'' ||  0  ||
+|| `text-halo-radius` || Grootte van de rand van de tekstachtergrond (om de tekst zichtbaar te maken op een achtergrond met soortgelijke kleur) || ''Getal'' ||  -  ||
+|| `text-offset-x` || Verplaatst de tekst horizontaal, \\(niet ondersteund voor tekst langs de lijn) || ''Getal'' ||  0  ||
+|| `text-offset-y` (\\mag ook worden geschreven als\\ `text-offset`)  || Verplaatst de tekst verticaal, positieve waarden verplaatsen de tekst naar boven  || ''Getal'' ||  0  ||
+|| `text-halo-radius` || Grootte van de rand van de tekstachtergrond \\(om de tekst zichtbaar te maken op een achtergrond \\met soortgelijke kleur) || ''Getal'' ||  -  ||
 || `text-halo-color` || Kleur van de teksthalo || ''Kleur'' ||  aanvulling op de tekstkleur  ||
 || `text-halo-opacity` || Transparantie voor de teksthalo || ''Transparantie'' ||  1.0  ||
+|| `font-family` || Familie van lettertype || ''Tekenreeks'' ||  "Droid Sans" \\(JOSM voorkeur "mappaint.font")  ||
+|| `text-anchor-horizontal` || horizontale plaatsing tekstlabel || `left`, `center`, `right` ||  `right`  ||
+|| `text-anchor-vertical` || verticale plaatsing tekstlabel || `above`, `top`, `center`, `bottom`, `below` ||  `bottom`  ||
+|| `text-rotation` || Roteer de tekst met ded wzijders van de klok mee of er tegein (negatieve waarde)\\(vanaf r16253) || `[rad]`, `[rad]rad`, `[deg]°`, `[deg]deg`, `[grad]grad`, `[turn]turn` \\([https://developer.mozilla.org/en/docs/Web/CSS/angle definition]) of een cardinale richting (bijv. `northeast` of `sw`); \\Bekijk ook de functies `degree_to_radians`, `cardinal_to_radians`. \\(Onthoud dat de richting betekent waar de bovenkant van de tekst naartoe wijst.\\Dat betekent met de standaard richting van noord dat de tekst naar het oosten stroomt \\(bij een taal van links naar rechts). \\Dus, als u wilt dat het naar het zuiden stroomt moet u oost instellen.)\\ bijv.  `note[...] {...  text-rotation: way; ...}` ||  -  ||
+|| `text-position` |||||| see [#AreaStyles Stijlen voor gebieden] en [#LineStyles Lijnstijlen] ||
+|| `font-family` || Familie van lettertype || ''Tekenreeks'' ||  "Droid Sans" \\(JOSM voorkeur "mappaint.font")
 || `font-size` || grootte lettertype || ''Getal'' ||  8 \\(JOSM voorkeur "mappaint.fontsize")  ||
 || `font-weight` || vet of niet || `bold`, `normal` ||  `normal`  ||