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.

Her er hvad man som minimum har brug for:

json

"layerswitch2": {
  "groups":[
    {
      "layers": [
        "lag1", 
        "lag2", 
        ...
      ]
    }
  ]
}

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.

Indlæs én eller flere CSS filer på denne måde:

json

"css": [
  "https://septima.dk/widget/custom_variables.css",
  "https://septima.dk/widget/custom.css"
]

CSS Variabler

Følgende variabler kan bruges til at styre hvordan denne funktion ser ud. Angiv kun de variabler, som skal tilpasses.

Vis CSS variabler

css

:root {
  /* LAYERSWTICH */
  --sw-layerswitch2-width: max-content;
  --sw-layerswitch2-max-width: 320px;
  --sw-layerswitch2-max-height: calc(var(--sw-map-height) - var(--sw-spacer) * 2);
  --sw-layerswitch2-bg-color: #ffffff;
  --sw-layerswitch2-font-size: var(--sw-font-size);
  --sw-layerswitch2-line-height: var(--sw-line-height);
  --sw-layerswitch2-text-color: var(--sw-text-color);
  --sw-layerswitch2-icon-size: var(--sw-icon-size);
  --sw-layerswitch2-box-shadow: var(--sw-box-shadow);
  --sw-layerswitch2-border-radius: var(--sw-border-radius);
  --sw-layerswitch2-border: 0px solid var(--sw-border-color);
  --sw-layerswitch2-outline: 1px solid var(--sw-outline-color);
  --sw-layerswitch2-flex: 0 0 var(--sw-layerswitch2-max-width);
  --sw-layerswitch-fullscreen-height: auto;

  /* HEADER */
  --sw-layerswitch2-header-bg-color: transparent;
  --sw-layerswitch2-header-gap: 0.75em;
  --sw-layerswitch2-header-padding: 0.65em 0.65em 0.65em 1em;
  --sw-layerswitch2-header-border-radius: var(--sw-layerswitch2-border-radius);
  --sw-layerswitch2-header-title-font-size: calc(var(--sw-layerswitch2-font-size) * 1.1);
  --sw-layerswitch2-header-title-text-color: var(--sw-layerswitch2-text-color);
  --sw-layerswitch2-header-title-icon-size: calc(var(--sw-layerswitch2-icon-size) + 0.15em);
  --sw-layerswitch2-header-title-icon-type: var(--sw-icon-type-filled);

  /* BODY */
  --sw-layerswitch2-body-max-height: calc(var(--sw-map-height) - var(--sw-spacer-sm) * 8);

  /* SEARCH */
  --sw-layerswitch2-search-padding: 0.75em 1em;

  /* GROUP */
  --sw-layerswitch2-group-border: 1px solid var(--sw-border-color);
  --sw-layerswitch2-group-header-icon-size: calc(var(--sw-layerswitch2-icon-size) * 1.125);
  --sw-layerswitch2-group-header-icon-color: var(--sw-text-color);
  --sw-layerswitch2-group-header-title-font-size: var(--sw-layerswitch2-font-size);
  --sw-layerswitch2-group-header-title-font-weight: 500;
  --sw-layerswitch2-group-header-title-color: var(--sw-layerswitch2-text-color);
  --sw-layerswitch2-group-header-padding: 0.75em 1em 0.75em 1.25em;
  --sw-layerswitch2-group-header-gap: 0.75em;
  --sw-layerswitch2-group-header-layercount-bg-color: rgba(0 0 0 / 3%);
  --sw-layerswitch2-group-header-layercount-font-size: 70%;
  --sw-layerswitch2-group-header-layercount-line-height: 1;
  --sw-layerswitch2-group-header-layercount-font-weight: 500;
  --sw-layerswitch2-group-header-layercount-text-color: var(--sw-text-color);
  --sw-layerswitch2-group-header-layercount-padding: 0.325em 0.375em;
  --sw-layerswitch2-group-header-layercount-border-radius: 0.5em;
  
  /* GROUP LIST */
  --sw-layerswitch2-group-list-padding: 0.5em 0.5em 0.5em;
  --sw-layerswitch2-group-list-bg-color: rgb(var(--sw-bg-hover-color-rgb) / .2);
  --sw-layerswitch2-group-list-item-padding: 0.25em 2.5em;
  --sw-layerswitch2-group-list-item-gap: 0.5em;

  /* LAYER */
  --sw-layerswitch2-layer-min-height: 2.5em;
  --sw-layerswitch2-layer-gap: 0.75em;
  --sw-layerswitch2-layer-padding: 0 0.75em 0 1em;
  --sw-layerswitch2-layer-border-radius: 0.325em;
  --sw-layerswitch2-layer-border: 0px solid var(--sw-border-color);
  --sw-layerswitch2-layer-title-font-size: var(--sw-layerswitch2-font-size);
  --sw-layerswitch2-layer-title-font-weight: 500;
  --sw-layerswitch2-layer-title-color: var(--sw-layerswitch2-text-color);
  --sw-layerswitch2-layer-legend-width: 20px;
  --sw-layerswitch2-layer-legend-height: 20px;
  --sw-layerswitch2-layer-legend-list-margin: 0;
  --sw-layerswitch2-layer-legend-list-padding: 0 0 .75em 0;
  --sw-layerswitch2-layer-legend-list-item-padding: 0 1.5em 0 2.75em;
  --sw-layerswitch2-layer-legend-list-item-gap: 0.5em;
  --sw-layerswitch2-layer-legend-list-display: none;

  /* TOGGLE */
  --sw-layerswitch2-input-toggle-width: 12px;
  --sw-layerswitch2-input-toggle-height: 12px;
  --sw-layerswitch2-input-toggle-bg-color: #ffffff;
  --sw-layerswitch2-input-toggle-border: 0.075em solid rgb(0 0 0 / 25%);
  --sw-layerswitch2-input-toggle-border-radius: 0.2em;
  --sw-layerswitch2-input-toggle-focus-border-color: var(--sw-primary);
  --sw-layerswitch2-input-toggle-active-border-color: var(--sw-primary);
  --sw-layerswitch2-input-toggle-active-bg-color: var(--sw-primary);

  /* SLIDER */
  --sw-layerswitch2-slider-height: 0.325em;
  --sw-layerswitch2-slider-bg-color: var(--sw-bg-hover-color);
  --sw-layerswitch2-slider-border: 0px solid rgba(0 0 0 / 5%);
  --sw-layerswitch2-slider-border-radius: 1em;
  --sw-layerswitch2-slider-thumb-bg-color: var(--sw-primary);
  --sw-layerswitch2-slider-thumb-border-radius: 0.65em;
  --sw-layerswitch2-slider-thumb-width: 1.5em;
  --sw-layerswitch2-slider-thumb-height: 0.75em;
  --sw-layerswitch2-slider-thumb-active-bg-color: var(--sw-primary);
  --sw-layerswitch2-slider-thumb-active-outline: 2px solid var(--sw-primary);
  --sw-layerswitch2-slider-thumb-active-outline-offset: 2px;
  --sw-layerswitch2-slider-padding: 0.5em 1em 1em 1em;
  --sw-layerswitch2-slider-gap: 0.75em;
  --sw-layerswitch2-slider-label-bg-color: var(--sw-primary);
  --sw-layerswitch2-slider-label-text-color: #ffffff;
  --sw-layerswitch2-slider-label-padding: .25em .325em;
  --sw-layerswitch2-slider-label-border-radius: 0.175em;
  --sw-layerswitch2-slider-value-font-size: 0.75em;
  --sw-layerswitch2-slider-value-font-weight: 500;
}

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",
    "search": "Find lag",
    "clear-layers": "Nulstil lag",
    "close": "Luk lagvælger",
    "header": "Lag",
    "show": "Vis lagvælger",
    "hide": "Skjul lagvælger",
    "showhide": "Vis/skjul lagvælger",
    "expandall": "Udvid alle",
    "options": "Funktioner",
    "add-layers": "Tilføj lag",
    "transparency": "Transparens",
    "layercount": "Antal lag i gruppe",
    "searchlayers": "Søg efter lag"
  },
  "en-US": {
    "activatebutton": "Change layers in the map",
    "search": "Find layers",
    "clear-layers": "Reset layers",
    "close": "Close layer control",
    "header": "Layers",
    "show": "Show layer control",
    "hide": "Hide layer control",
    "showhide": "Show/hide layer control",
    "expandall": "Expand all",
    "options": "Options",
    "add-layers": "Add layers",
    "transparency": "Transparency",
    "layercount": "Layers in group",
    "searchlayers": "Search for layers"
  }
}

position

Type: string
Default: bottom-left

Gør det muligt at placere lagvælgeren i forhold til kortet. Som default placeres lagvælgeren inde i kortet i nederste venstre hjørne (bottom-left). Men den kan også placeres bottom-right, top-left eller top-right. Alle oven på kortet.

Lagvælgeren kan også placeres ved siden af kortet ved at sætte position til left eller right.

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

Overskriften i gruppen. Hvis title ikke angives, vises de underliggende lag uden en gruppeoverskrift.

icon

Det er muligt at få vist et ikon ud for titlen på en gruppe. Ikoner, der kan bruges her, kan findes på https://fonts.google.com/icons. Her vælges et ikon og navnet kopieres ind i konfigurationen for en gruppe under icon.

Det er også muligt at angive en fuld SVG i stedet for navnet, hvis man har sit eget ikon.

type

Bestemmer om der kan vælges en eller flere lag i gruppen.

Default er checkbox.
Hvis kun ét af lagene i gruppen skal vises ad gangen, angives radio.
Det er også muligt at sætte type til slider. Herved skiftes der mellem de enkelte lag vha. en "slider". Dette er specielt anvendeligt til at vise forskellige kilder over tid, f.eks. luftfoto. Se eksempel her.
Hvis type sættes til hidden, er det ikke muligt at tænde eller slukke for et lag i denne gruppe. Det vil fortsat være muligt at se signaturforklaringen for lagene.

expanded

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

selectAll

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

showCount

Som default vises antallet af lag i gruppen. Men ved at showCount til false, vises dette antal ikke for gruppen.

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. Det er også muligt at angive en template i stedet for en liste. Den template kan bruges til at udvælge de lag, der skal være med. Det gøres f.eks. som her, hvor den tager alle de lag, der har et id, der starter med bluespot:

json

"groups":[
  {
    "title": "Bluespot",
    "type": "slider",
    "selectAll": false,
    "expanded": true,
    "layers": "<%= id.match(/^bluespot.*/) !== null %>"
  }
]

Det er også muligt at tilføje en gruppe til listen med layers. Herved får man en gruppe inde i en gruppe. Dette kan være relevant når man har mange trukturerede lag. Indholdet i en gruppe er præcist det samme som beskrevet i afsnittet omkring (grupper)[#groups].

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.

expanded

Type: boolean
Default: true

Kun når showHeader er sat. Ved at sætte "expanded": false vises der en overskrift for lagvælgeren, som brugeren kan klikke på for at vise selve lagvælgeren.

hideInput

Type: boolean
Default: false

I nogle til

hideOpacityOption

Type: boolean
Default: false

Som default er det muligt for brugeren at skifte opacity på alle lag. Men ved at sætte "hideOpacityOption": true, fjernes knappen til det. Det er også muligt at sætte det på de enkelte grupper.

showlegend

Type: boolean
Default: true

Kan bruges til at skjule alle legends i lagvælgeren og herved få en mere simpel lagvælger.

menuButtons

Type: object

Med menuButtons er det muligt at styre hvilke knapper, der skal vises i toppen af lagvælgeren. Bemærk at dette er kun relevant hvis showHeader ikke er false.

Som default vises ingen af de nedenstående knapper. Her er et eksempel på en konfiguration:

json

"menuButtons": {
  "clear": true,
  "search": false,
  "expandAll": true
},

Følgende knapper er mulige:

clear

Skal der være en "Nulstil" knap så brugeren kan komme tilbage til den oprindelige opsætning. Dette er mest relevant når man har en lagvælger med mange lag i.

search

Hvis lagvælgeren indeholder mange lag i mange grupper, kan brugeren aktivere et tekst filter. Her er det muligt at skrive en tekst og skjule alle de lag, der ikke passer på denne tekst. Lagene tændes eller slukkes ikke i lagvælgeren, men indholdet i lagvælgeren reduceres så det er nemmere at finde frem til laget.

expandAll

Tilføje en knap, der udvider eller folder alle grupper sammen. Dette er kun relevant hvis lagvælgeren indeholder grupper.

Hvis kun én af de mulige knapper er angivet, vises knappen direkte i toppen af lagvælgeren. Hvis der er angivet flere, vil de blive vist som en "more" menu.

Eksempler

Eksempler, der bruger denne komponent:

Layer

Lagvælger 2 (layerswitch2) ​

Signaturforklaring ​

Options ​

disable ​

detach ​

css ​

CSS Variabler ​

className ​

keepInFullscreen ​

translations ​

position ​

groups ​

title ​

icon ​

type ​

expanded ​

selectAll ​

showCount ​

layers ​

activateButton ​

buttonIndex ​

paramNames ​

showHeader ​

expanded ​

hideInput ​

hideOpacityOption ​

showlegend ​

menuButtons ​

clear ​

search ​

expandAll ​

Eksempler ​

Alternativ rendering style

Funktioner som faner controlTabs

Lagvælger lagvælgersignatur

Lagvælger med slider lagvælger

Nedbør lagvælger

Offset på linjer style

Parkering lagvælgersignatur

Placering af lagvælger lagvælgersignatur

Signaturforklaring lagvælgersignatur

Signaturforklaring lagvælgersignatur

Signaturforklaring fra fil lagvælgersignatur

Lagvælger 2 (layerswitch2)

Signaturforklaring

Options

disable

detach

css

CSS Variabler

className

keepInFullscreen

translations

position

groups

title

icon

type

expanded

selectAll

showCount

layers

activateButton

buttonIndex

paramNames

showHeader

expanded

hideInput

hideOpacityOption

showlegend

menuButtons

clear

search

expandAll

Eksempler