Søg i Septima Widget K

Style (features_style) ​

Styling af objekter i kortet.

Det er muligt at anvende værdien fra en kolonne i data til at styre de enkelte style-egenskaber. Det gøres ved at indsætte <%= KOLONNENAVN %> i stedet for en style. Det kunne eksempelvis gøres på denne måde:

json
"icon": "https://septima.dk/widget/img/icon_<%=type%>.png"

eller

json
"strokecolor": "<%= farvekolonne %>"

Når man angiver sin style, har man ud over værdierne fra kolonnerne også adgang til geometritypen via <%= _geometryType %>, parametre fra f.eks. URL'en via <%= _params %> samt oplysninger om det aktuelle kort. Kortets oplysninger findes f.eks. med <%= _currentMap.resolution %>, men der er også adgang _currentMap.center, der er et array, og _currentMap.zoom. Det kan f.eks. bruges til:

json
"strokewidth": "<% if(_currentMap.resolution > 10) { print(1) } else { print(4) } %>"

Det er også muligt at få en tilfældig farve. Det gøres ved at bruge "_getRandomColor(OPACITY, KEY)". Den funktion kan kaldes med "opacity" samt et "key", hvor "key" er det der gør farven unik for den pågældende feature. F:eks. <%= _getRandomColor(0.5, bfe) %>.

Læs mere om templates og tilgængelige hjælpefunktioner her

Hver af de nedenstående style-egenskaber har en tilsvarende egenskab med suffix "_selected". Disse angiver, hvordan style skal være for et valgt objekt i kortet. Det valgte objektikon bestemmes således af egenskaben "icon_selected".

Indholdet af features_style kan også være en URL til en fil, der indeholder denne style. Det gøres simpelt ved at angive "features_style": "https://septima.dk/widget/data/styles/test.json". Herved kan en style benyttes på tværs af lag og konfigurationer.

Herunder finder du følgende sektioner:

Generelle options ​

Herunder findes en beskrivelse af de enkelte egenskaber, der kan sættes på en style.

namedstyle ​

  • Type: string

Der findes en række forskellige foruddefinerede styles, der kan benyttes. Lige nu findes der #000, der bruges når features skal være klikbare men ikke synlige. Det kan f.eks. bruges oven på et WMS lag. Derudover findes #001, #002, ... , #010 samt #011.

Hvis man vil viser punkter, så findes der ligeledes en række namedstyles, der udelukkende er lavet til ikoner. De er alle defineret som SVG ikoner og farverne kan derfor overstyres med fillcolor og strokecolor. Ikonerne findes med #pin001, #pin002, ... m.fl.

Se eksempel på de alle tilgængelige pins her.

Der er muligt at overstyre enkelte parametre ved blot også at tilføje de parametre, der ønskes overstyret.

hidden ​

  • Type: boolean
  • Default: false

Det er muligt at styre om en style skal være synlig. Dette kan med fordel bruges sammen med template.

zIndex ​

  • Type: number

Hvis flere objekter ligger oven på hinanden, der et muligt at bestemme hvilket objekter, der skal ligge øverst. Dette kan med fordel bruges sammen med template. Bemærk at zIndex kun gælder inden for et lag, og kan derfor ikke bruges til at styre visningen på tvæs af lag.

minResolution ​

  • Type: number

Gør det nemt at styre om en style skal vises i et givent zoom. Dette er specielt anvendeligt hvis man benytter flere styles på et lag. Resolution er antallet af meter pr. pixel

maxResolution ​

  • Type: number

Gør det nemt at styre om en style skal vises i et givent zoom. Dette er specielt anvendeligt hvis man benytter flere styles på et lag. Resolution er antallet af meter pr. pixel

icon ​

  • Type: string

Sti til ikon (gælder for punktdata). Stien kan være relativ i forholde til den side, hvor kortet er, eller absolut

scale ​

  • Type: number
  • Default: 1

Skalér ikoner i kortet. Værdien 0.5 betyder at ikonet vises i halv størrelse, mens 2 betyder at ikonet vises i dobbelt størrelse. Virker på billed- samt SVG-ikoner.

imgSize ​

  • Type: array

Benyttes KUN i forbindelse med SVG-ikoner. Angiv den originale størrelsen på SVG-ikoner med f.eks. [65,73] hvis ikonet er 65 pixel bredt og 73 pixel højt. Det virker fint uden i alle browsere, med undtagelse af IE. Kan også angives som tekst på samme form: "[65,73]".

symbol ​

  • Type: string
  • Default: none

Brug et symbol i stedet for et ikon. Lige nu findes der følgende symboler: circle, square, triangle, star, cross og x.

svg ​

  • Type: string
  • Default: none

Det er muligt at angive SVG inline i konfigurationen. Dette kan f.eks. bruges til at styre SVG'en individuelt pr. feature ved at benytte værdier fra data, som beskrevet i ovenstående.

Værdien af alle fill="currentColor" attributter i SVG'en, erstattes automatisk af værdien fra fillcolor.

Værdien af alle stroke="currentColor" attributter i SVG'en, erstattes automatisk af værdien fra strokecolor.

Værdien af alle stroke-width="currentWidth" attributter i SVG'en, erstattes automatisk af værdien fra strokewidth.

Værdien af alle stroke-width="currentWidth" attributter i SVG'en, erstattes automatisk af værdien fra -strokewidth.

crossOrigin ​

  • Type: string
  • Default: undefined

Hvis der er brug for at få fat i billeder som data, er det nødvendigt at serveren, der leverer billederne har CORS header på. Derudover skal crossOrigin sættes til: "crossOrigin": "anonymous". Det er f.eks. i forbindelse med "print" i klienten eller "WEBGL".

fillcolor ​

  • Type: string
  • Default: #FFFFFF

Udfyldningsfarve for flader

fillopacity ​

  • Type: number

Udfyldningsgraden for flader. 0 betyder gennemsigtig, 1 betyder helt udfyldt. Med fillopacity = 0 kan man benytte WMS eller WMTS til styling, mens vektordata benyttes til at give brugeren en oplevelse af interaktion

strokecolor ​

  • Type: string
  • Default: #FFFFFF

Udfyldningsfarve for linjer og outline på flader

strokeopacity ​

  • Type: number
  • Default: 0

Udfyldningsgraden for linjer og outline på flader. 0 betyder gennemsigtig, 1 betyder helt udfyldt. Med strokeopacity = 0 kan man benytte WMS eller WMTS til styling, mens vektordata benyttes til at give brugeren en oplevelse af interaktion

strokewidth ​

  • Type: number
  • Default: 1

Bredden på linjer og outline på flader.

lineDash ​

  • Type: array

Angiv hvis linjer skal være stiplede. Angiv f.eks. [10, 10] hvor første og andet tal angiver hvor mange pixels hhv. mellemrum og linje skal vøre i den stiplede linje.

lineCap ​

  • Type: string
  • Default: round

Angiv enten butt, round eller square.

lineJoin ​

  • Type: string
  • Default: round

Angiv enten bevel, round eller miter.

lineDashOffset ​

  • Type: number
  • Default: 0

Angiv offset på den stiplede linje.

rotation ​

  • Type: number
  • Default: 0

Rotér symbol eller ikon.

xOffset ​

  • Type: number
  • Default: 0.5

Forskyd et ikon i x-retningen. Kan antage værdier mellem 0 og 1, hvor 0 er ved ikonets venstre kant, mens 1 er ved ikonets højre kant. Det betyder, at 0.5 er i midten af ikonet.

yOffset ​

  • Type: number
  • Default: 0

Forskyd et ikon i y-retningen. Angivet i et antal pixels ikonet skal forskydes i y-retningen, hvor 0 er ved ikonets nederste kant. Kan antage både positive og negative værdier.

radius ​

  • Type: number
  • Default: 10

Størrelsen på et symbol. Anvendes kun, når symbol er angives.

radius2 ​

  • Type: number
  • Default: 5

Anvendes kun, når symbol er star eller cross.

fillpattern ​

  • Type: objekt

Få udfyldt flader i kortet med en skravering.

På fillpattern angives hvilken form for skravering man vil have. Eksempel:

json
"fillpattern": {
  "pattern": "hatch",
  "fillcolor": "rgba(200,200,200,0)",
  "strokecolor": "rgba(200,200,200,1)",
  "offset": 0,
  "size": 1,
  "spacing": 5,
  "angle": 60,
  "scale": 2
}

Vælg mellem følgende typer skravering: "hatch","cross","dot","circle","square","tile","woven","crosses","caps","nylon","hexagon","cemetry","sand","conglomerate","gravel","brick","dolomite","coal","breccia","clay","flooded","chaos","grass","swamp","wave","vine","forest","scrub","tree","pine","pines","rock","rocks".

Se eksempel på de forskellige typer her.

Labels ​

Herunder finder du de options, der har med labels i kortet at gøre.

text ​

  • Type: string

Vis en label på hvert objekt i kortet. Brug for eksempel <%= navn %> til at vise teksten for feltet "navn". Læs mere om templates her.

textAlign ​

  • Type: string
  • Default: center

Placeringen af label. Brug værdierne "center", "end", "left", "right" eller "start"

textBaseline ​

  • Type: string
  • Default: middle

Placeringen af label. Brug værdierne "alphabetic", "bottom", "hanging", "ideographic", "middle" eller "top"

textFont ​

  • Type: string
  • Default: normal 10px Verdana

Angiv "normal" eller "bold", teksten størrelse samt fonttype.

textFillcolor ​

  • Type: string
  • Default: #333

Tekstens farve.

textOutlinecolor ​

  • Type: string
  • Default: #fff

Tekstens baggrundsfarve/outlinefarve

textOutlinewidth ​

  • Type: number
  • Default: 3

Tekstens outline bredde.

textXOffset ​

  • Type: number
  • Default: 0

Forskydning af teksten i X-retningen.

textYOffset ​

  • Type: number
  • Default: 0

Forskydning af teksten i Y-retningen.

textMaxWidth ​

  • Type: number

Antal tegn en tekst maksimalt må være før den brydes efter næste mellemrum.

textRotation ​

  • Type: number
  • Default: 0

Tekstens rotation angivet i radianer (0.785398164 = 45 grader).

textMinResolution ​

  • Type: number

Herved kan man styre, hvornår labelen skal vises i kortet. Resolution er antallet af meter pr. pixel

textMaxResolution ​

  • Type: number

Herved kan man styre, hvornår labelen skal vises i kortet. Resolution er antallet af meter pr. pixel

textOverflow ​

  • Type: boolean
  • Default: false

Skal teksten fylde mere end den underliggende geometri (gælder kun for polygoner)?

textBackgroundFill ​

  • Type: string

Tilføj en baggrundsfarve til en label i kortet. Benyt textPadding til at styre om der skal være luft omkring teksten.

textBackgroundStrokeColor ​

  • Type: string

Tilføj en ramme omkring en label i kortet. Benyt textPadding til at styre om der skal være luft omkring teksten.

textBackgroundStrokeWidth ​

  • Type: number
  • Default: 1

Angiv hvor kraftig rammen omkring teksten skal være.

textPadding ​

  • Type: number[]

Angiv hvor meget padding, der skal være omkring teksten. Dette er kun relevant hvis textBackgroundFill eller textBackgroundStrokeColor er angivet.

Vector tiles ​

Vector tiles kan styles ved brug af de generelle styles som beskrevet på denne side. Men det er også muligt at angive en URL til en fil, der indeholder stylen.

jsonUrl ​

  • Type: string

En URL til en JSON-fil, der indeholder style til laget. Kan kun benyttes til VectorTiles og kan f.eks. bruges til at få stylen fra en JSON konfiguration

source ​

  • Type: string
  • Default: composite

Navnet på den "source" fra JSON-filen, der definerer stylen. Kan kun benyttes sammen med jsonUrl i forbindelse med VectorTiles

Specielle styles ​

Ud over de generelle options, der kan sættes som style, er der en række lidt specielle options, der giver en række muligheder. De er beskrevet herunder.

geometryOptions ​

  • Type: objekt

Det er muligt at få tegnet en alternativ geometri i kortet. Det kan være startpunkt, slutpunktet eller alle knudepunkter for en linje/polygon, centroide eller interior point for en polygon, geometriens convex hull eller envelope eller tilføje en buffer til geometrien.

På geometryOptions angives hvilken type man vil vælge. Mulige værdier for type er: interiorPoint, centroide, lastPoint, firstPoint, vertices, envelope, convexHull, buffer, offset og wkt. Eksempel:

json
"geometryOptions": {
  "type": "interiorPoint"
}

Ved buffer angives en ekstra parameter, der definerer hvilken buffer, der skal tilføjes. buffer kan angives som et tal eller som en template, der kan bruge oplysningerne fra data:

json
"geometryOptions": {
  "type": "buffer",
  "buffer": 27
}

Ved offset angives en ekstra parameter, der kan være enten delta eller pixels, hvor delta definerer hvor mange meter objektet skal flyttes og pixels definerer hvor mange pixels objektet skal flyttes. Kun en af de to parametre kan angives. Begge parametre skal angives som et array med to tal, der siger hvor mange hhv meter og pixels objketket skal flyttes i x og y retningen. De to tal kan også hver især angives som en template, der kan bruge oplysningerne fra data:

json
"geometryOptions": {
  "type": "offset",
  "delta": [10, 10],
  "pixels": [2, -2]
}

Ved wkt angives en ekstra parameter, der definerer hvilken wkt, der skal bruges som geometri. wkt kan angives som en fuld tekststreng eller som en template, der kan bruge oplysningerne fra data:

json
"geometryOptions": {
  "type": "wkt",
  "wkt": "POINT(550800 6293000)"
}

Bemærk: Hvis der er mange data, kan disse operationer med fordel gøres på den server, der levere data, ellers er der risiko for at det kan gå langsomt at tegne kortet.

lineIcons ​

  • Type object

Få vist ikoner forskellige steder på en linje. Det kan f.eks. bruge til at vise et ikon i starten eller i slutningen af en linje. Men det kan også bruges til at få vist pile langs linjen.

På lineIcons angives en eller flere af følgende parametre: startIcon, endIcon, arrowIcon, arrowDistance samt arrowRotationOffset. Eksempel:

json
"lineIcons": {
  "startIcon": "http://widget.cdn.septima.dk/latest/img/icons/map_marker_icons_29.png",
  "endIcon": "http://widget.cdn.septima.dk/latest/img/icons/map_marker_icons_28.png",
  "arrowIcon": "http://widget.cdn.septima.dk/latest/img/routearrow.png",
  "arrowDistance": 150,
  "arrowRotationOffset": 0
}

measurements ​

  • Type object

Som ved lineIcons er det også muligt at få vist beregnede arealer og længder i kortet. Det gøres ved at tilføje measurements som en style.

Det kan bruges hvis man blot vis have vist målene for en geometri i kortet. Men det kan også bruges i forbindelse med Mål afstand og areal.

Det er muligt at styre farven for teksten samt baggrunden, men der er allerde en default farve (som vist herunder):

json
"measurements": {
  "segmentsLength": true,
  "totalLength": true,
  "totalArea": true,
  "textFillcolor": "rgba(255, 255, 255, 1)",
  "textBackgroundFill": "rgba(0, 0, 0, 0.7)",
  "textFont": "normal 10px Verdana"
}

Følgende options er muligt at angive:

  • segmentsLength Skal længden på hvert enkelt segment vises. Default er false.
  • totalLength Skal den totale længde på en linje vises. Default er false.
  • totalArea Skal arealet og omkredsen vises på en flade. Default er false.
  • textFillcolor Farven på teksten. Default er rgba(255, 255, 255, 1).
  • textBackgroundFill Farven på baggrunden. Default er rgba(0, 0, 0, 0.7).
  • textFont Fonten på teksten. Default er normal 10px Verdana