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".

  • 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.

  • 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: