Skip to content

Lagvælger 2 (layerswitch2)

Tilgængelig lagvælger med mulighed for grupperinger og signaturforklaring. Dette gør at brugeren kan tænde og slukke for de enkelte lag. Dette kan gøres med musen eller ved brug af tastaturet.

Signaturforklaring

For at få en signaturforklaring ind i lagvælgeren, skal hvert lag indeholde de oplysinger, der skal til. Læs mere om hvordan her.

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.

translations

  • Type: object

Det er muligt at styre alle tekster i Septima Widget. Det gøres på de enkelte komponenter vha. et translations objekt. Det er muligt blot at overskrive en enkelt tekst eller angive et helt nyt sprog. Herunder ses hvilke teskter, der er default for denne komponent.

Vis tekster
json
{
  "da-DK": {
    "activatebutton": "Skift lag i kortet",
    "header": "Lag",
    "show": "Vis lagvælger",
    "hide": "Skjul lagvælger",
    "showhide": "Vis/skjul lagvælger"
  },
  "en-US": {
    "activatebutton": "Change layers in the map",
    "header": "Layers",
    "show": "Vis lagvælger",
    "hide": "Skjul lagvælger",
    "showhide": "Show/hide layer control"
  }
}

groups

  • Type: object[]

Opret grupper i lagvælgeren. Konfigurationen er en liste (array) af objekter, der hver definerer title, type, expanded og layers. 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"]
  },
  {
    "title": "Børn og unge",
    "type": "check",
    "expanded": true,
    "layers": ["kommunegraense","skoledistrikter","boernehaver","skoler"]
  }
]

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. Hvis title ikke angives, vises de underliggende lag uden en gruppeoverskrift.

type bestemmer om der kan vælges en eller flere lag i gruppen. Default er check. Hvis kun ét af lagene i gruppen skal vises ad gangen, angives radio.

expanded angiver om gruppen skal være foldet ud fra start. Default er true.

layers relaterer sig til hvilke lag, gruppen skal indeholde. Dette er en liste med id'er på lagene. Alle lag, der skal vises i lagvælgeren, skal derfor have et id.

selectAll angiver om det skal være muligt at tænde/slukke alle lag i gruppen på én gang. Default er false.

Bemærk

Hvis der ikke ønskes en gruppering, skal title blot udelades fra gruppen.

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.

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

showheader

  • Type: boolean
  • Default: true

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.

Eksempler

Eksempler, der bruger denne komponent: