Søg i Septima Widget K
Lagvælger
Almindelig lagvælger med mulighed for at tilføje grupper m.m. Dette gør at brugeren kan tænde og slukke for de enkelte lag.
Signaturforklaring
For vektorlag vises der automatisk en signaturforklaring for hvert lag i lagvælgeren. Men hvis man gerne vil bruge et specielt ikon for et lag i lagvælgeren eller vil have signaturforklaring på f.eks. et WMS lag, så er det muligt at angive legendConfig
på laget. Herved er det muligt at styre hvordan signaturforklaringen skal være. Det kan gøres på flere måder.
Ved at angive icon
, som vist herunder, er det muligt at få vist et ikon sammen med lagets navn, der er angivet i name
:
json
"legendConfig": {
"icon": "https://septima.dk/widget/img/ortofoto.png"
}
Tilsvarende er det muligt at angive en inline SVG på denne måde:
json
"legendConfig": {
"svg": "<svg width='32px' height='43px' viewBox='0 0 32 43' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>...</g></svg>"
}
Hvis man vil have fuld kontrol over hvad der skal være i lagvælgeren for dette lag, kan man tilføje html
på denne måde:
json
"legendConfig": {
"html": "<div class='my-layer-class'><div class='widget-layerswitch-text'>Lokalplaner</div></div>"
}
Hvis man i stedet vil have en egenlig signatur under teksten for laget, tilføjes følgende til konfigurationen til laget:
json
"legendConfig": {
"img": "https://geoserver.plandata.dk/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=theme_pdk_lokalplan_vedtaget_v"
}
En alternativ måde at få en mere komplekt signaturforklaringen på, er at angive legends
som herunder:
json
"legendConfig": {
"legends": [
{
"title": "< 1500",
"svg": "<svg width='20px' height='20px' viewBox='0 0 28 28'><circle fill='rgba(248,252,246,0.9)' stroke='rgba(206,233,197,0.7)' stroke-width='0' cx='14' cy='14' r='7'></circle></svg>"
},
{
"title": "1500 – 8500",
"svg": "<svg width='20px' height='20px' viewBox='0 0 28 28'><circle fill='rgba(206,233,197,0.7)' stroke='rgba(139,197,130,0.7)' stroke-width='0' cx='14' cy='14' r='7'></circle></svg>"
},
{
"title": "> 8500",
"svg": "<svg width='20px' height='20px' viewBox='0 0 28 28'><circle fill='rgba(74,144,81,0.7)' stroke='rgba(25,67,23,0.7)' stroke-width='0' cx='14' cy='14' r='7'></circle></svg>"
}
]
}
På hver legend
er det muligt at angive title
samt img
, icon
eller svg
som i ovenstående. Det er også muligt blot at angive html
, hvorved der er fuld kontrol over den enkelte legend.
Bemærk
For at få vist signaturen for vektorlag, skal laget indeholder features_type
. Se hvilke typer det kan være under layer
Options
Herunder findes en beskrivelse af de enkelte egenskaber, der kan sættes på lagvælgeren.
disable
- Type:
boolean
- Default:
false
Skal kontrollen deaktiveres. Herved fungerer det, som om kontrollen ikke var tilføjet. Kan bruges til midlertidig at fjerne en kontrol.
detach
- Type:
string
Angiv en reference til et alternativ html-element, som denne kontrol skal vises i. Det kan benyttes til at placere indholdet af en kontrol et andet sted på sin side. Hvis detach har værdien "abc"
, så skal der tlføjes et element til HTML'en på denne form: <div data-widget-detach="abc"/>
. Hvis elementet ikke findes, så fungerer kontrollen, som hvis detach ikke var angivet.
css
- Type:
string | string[]
Angiv en sti til en css-fil, der skal loades efter denne kontrol. Herved vil det være muligt at lave en brugertilpasset style af kontrollen.
className
- Type:
string
Tilføj en speciel CSS class til elementet. Dette kan bruges til at styre hvordan elementet ser ud eller placeres på siden.
keepInFullscreen
- Type:
boolean
- Default:
false
Benyttes når funktionen er "detached" og funktionen "fullscreen" er inkluderet i konfigurationen. Hvis "keepInFullscreen" sættes til true
, så er funktionen tilgængelig når kortet vises i fullscreen.
title
- Type:
string
Gør elementet mere tilgængeligt
layers
- Type:
string | string[]
Angiv, hvad der skal vises i lagvælgeren. Ved at angive "all"
vises alle lag. Ved at angive "vectors"
vises kun vektorlagene. Ved at angive "images"
vises billedlagene (WMS og WMTS). Derudover er det muligt at angive et array af id'er på udvalgte lag. Dette kræver, at der er angivet et id på lagene. For at få vist to specifikke lag angives det på denne måde: ["lag1","lag2"]
.
excludeLayers
- Type:
array
Fravælg hvilke lag, der ikke skal vises i lagvælgeren. Det muligt at angive et array af id'er på udvalgte lag, der ikke skal vises. Dette kræver, at der er angivet et id på lagene. For at ekskludere to specifikke lag angives det på denne måde: ["lag1","lag2"]
. Dette er specielt hensigtmæssigt, hvis layers er sat til all
.
showbuttons
- Type:
boolean
- Default:
true
Ved at sætte "showbuttons": false
deaktiveres muligheden for at tænde og slukke for lagene.
showlegend
- Type:
boolean
- Default:
true
Ved at sætte "showlegend": false
vises signaturen ikke for lagene.
showheader
- Type:
boolean
- Default:
false
Ved at sætte "showheader": true
vises der en overskrift for lagvælgeren og det er muligt for brugeren at vise/skjule lagvælgeren ved at klikke på overskriften.
showheaderCollapsed
- Type:
boolean
- Default:
false
Kun når showheader
er sat. Ved at sætte "showheaderCollapsed": true
vises der en overskrift for lagvælgeren, som brugeren kan klikke på for at vise selve lagvælgeren.
showheaderCollapsedAccordion
- Type:
boolean
- Default:
false
Kun når showheader
er sat. Ved at sætte "showheaderCollapsedAccordion": true
fungerer en overskrift i lagvælgeren som en accordion. Det betyder at når brugeren klikke på overskriften, så foldes den ud og de andre overskrifter foldes sammen.
selectAll
- Type:
boolean | string
- Default:
false
Ved at sætte "selectAll": true
vises der en knap, der gør det muligt at tænde/slukke for alle lag i lagkontrollen på en gang. Hvis man angiver en tekst, er det muligt at styre hvilken tekst, der skal vises. F.eks. "selectAll": "Vis/skjul alle lag"
type
- Type:
string
- Default:
list
Angiver, hvordan lagvælgeren skal vises. Gyldige værdier: "list" eller "dropdown". Ved list
bliver lagvælgeren vist som en liste, hvor man kan klikke på de enkelte rækker i listen og herved vise/skjule det pågældende lag. Ved dropdown
er listen skjult, og brugeren kan trykke på en "knap" for at få vist listen.
expand
- Type:
string
- Default:
up
Ved "type": "dropdown"
. Skal dropdown folde op eller ned. Gyldige værdier: "up" eller "down".
dropdownlimit
- Type:
number
- Default:
3
Ved "type": "dropdown"
. Hvor mange lag må der højst blive vist, før der kun vises, hvor mange der er.
dropdowntext
- Type:
string
Ved "type": "dropdown"
. Angiv en statisk tekst i dropdown menuen. Hvis "dropdowntext" ikke er angivet, vises der en tekst, der er afhængig af hvor mange lag, der er valgt.
activateButton
- Type:
object
Skjul lagvælgeren fra start men gør det muligt for brugeren vise lagvælgeren vha. en knap i kortet. "activateButton" kan indeholde "title", "className" og "html", der alle er optionelle. De har alle en brugbar default værdi. "title" bruges til at angive en tekst, der vises når musen holdes over knappen. "className" tilføjer en CSS-klasse til selve knappen. "html" erstatter indholdet af kanppen med det, der er angivet her. På denne måde er det muligt f.eks. at skifte ikon på knappen. Her er et eksempel på, hvordan "activateButton" kan angives:
json
"activateButton": {
"title": "Vis signaturforklaring",
"className": "my-style",
"html": "<i class='mdi mdi-format-list-bulleted-type'></i>"
}
buttonIndex
- Type:
number
- Default:
0
Hvis der er flere kompoenter med knapper i kortet, så bliver de tilføjet i en tilfældig rækkefølge. Ved at angive buttonIdex
er det muligt at bestemme rækkefølgen. Laveste index kommer først. Hvis to knapper har samme index vil det være tilfældigt hvilken der kommer færst.
tabindex
- Type:
boolean
- Default:
false
Sæt til true
hvis man skal kunne tabulere sig frem og tilbage i listen med lag. Dette gør at der kommer en "outline" på elementet i lagvælgeren når det kommer i fokus og gør derved listen mere tilgængelig.
layerOrder
- Type:
boolean
- Default:
false
Brug rækkefølgen i layers
i lagvælgeren og ikke den rækkefølge, som lagene i kortet har.
groups
- Type:
object[]
Opret grupper i lagvælgeren. Konfigurationen er en liste (array) af objekter, der hver definerer title
, id
, type
, expanded
, layers
og showCount
. Der er dermed muligt at udvælge hvilke lag, der skal være i hver gruppe. Her er et eksempel på, hvordan groups
kan angives:
json
"groups": [
{
"title": "Baggrundskort",
"type": "radio",
"expanded": false,
"layers": ["lag1","ortofoto"],
"showCount": false
},
{
"title": "Børn og unge",
"type": "check",
"expanded": true,
"layers": ["kommunegraense","skoledistrikter","boernehaver","skoler"],
"showCount": true
}
]
Med denne opsætning lagene med id "lag1" og "ortofoto" blive vist i den første gruppe mens de fire andre lag vil blive vist i den anden gruppe. Den første gruppe vil være klappet sammen fra start, mens den anden gruppe vil være foldet ud. Den første gruppe har typen "radio", hvilket betyder at et klik på et lag i denne gruppe, medfører at de andre lag slukkes.
title
er overskriften i gruppen.
type
bestemmer om der kan vælges en eller flere lag i gruppen.
expanded
angiver om gruppen skal være foldet ud fra start.
layers
relaterer sig til hvilke lag, gruppen skal indeholde. Dette er en liste med id'er på lagene.
showCount
sat til true
betyder at antallet af lag samt antallet af tændte lag i en gruppe vises. Herved er det muligt at se lidt mere om hvad den pågældende gruppe indeholder. Som default bliver antallet ikke vist.
paramNames
- Type:
object
Det er muligt at angive en række parametre, der styre hvordan lagvælgeren opfører sig.
Pt. er det muligt at angive en liste med ID'er på lag (adskilt af komma), der skal vises. Det er kun lag, der er med i lagvælgeren, det er muligt at styre. I dette eksempel kan man enten kalde siden med denne widget med URL-parameteren =?visiblelayers=lag1,lag4
for at de to lag. Alternativt kan man på DIV
elementet angivet attributten data-widget-visiblelayers="lag1,lag4"
:
Tilsvarende er det muligt at angive hvilke grupper, der skal være foldet ud (expanded). Det gøres som ved "layers" blot med "groups". Hvis parameteren er angivet, vil den styre grupperne, ellers vil værdien angivet i expanded
styre det.
json
"paramNames": {
"layers": "visiblelayers",
"groups": "expandedgroups"
}
Eksempler
Eksempler, der bruger denne komponent: