Lagvælger 3 (layerswitch3)

Tilgængelig lagvælger med søgning i egne lag, grupper, transparens, omarrangering, katalogtilføjelse og mulighed for at gemme brugerens ændringer lokalt.

Lagvælgeren bruger groups som sin primære struktur. Hvis groups udelades, vises alle lag i den rækkefølge, de findes i kortet. Hvis groups angives, skal lagene refereres med deres id.

"layerswitch3": {
  "groups": [
    {
      "title": "Baggrundskort",
      "type": "radio",
      "expanded": true,
      "layers": ["standard", "luftfoto"]
    },
    {
      "title": "Temalag",
      "expanded": true,
      "selectAll": true,
      "layers": ["bydele", "ruter", "biblioteker"]
    }
  ]
}

Signaturforklaring

For at få en signaturforklaring ind i lagvælgeren, skal hvert lag indeholde de oplysninger, 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 tilfø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:

"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

:root {
  /* LAYERSWITCH3 */

  /* THEME */
  --sw-layerswitch3-primary: var(--sw-primary);
  --sw-layerswitch3-primary-strong: color-mix(in srgb, var(--sw-layerswitch3-primary) 90%, #000000);
  --sw-layerswitch3-primary-dark: color-mix(in srgb, var(--sw-layerswitch3-primary) 80%, #000000);
  --sw-layerswitch3-secondary-bg: var(--sw-secondary);
  --sw-layerswitch3-on-primary: var(--sw-white);
  --sw-layerswitch3-primary-shadow: var(--sw-box-shadow);

  /* FOCUS */
  --sw-layerswitch3-focus-outline: 2px solid var(--sw-layerswitch3-primary);
  --sw-layerswitch3-focus-outline-offset: 2px;

  /* PANEL */
  --sw-layerswitch3-bg-panel: var(--sw-bg-color);
  --sw-layerswitch3-color-text: var(--sw-text-color);
  --sw-layerswitch3-color-muted: var(--sw-muted);
  --sw-layerswitch3-border-color: var(--sw-border-color);
  --sw-layerswitch3-panel-width: 250px;
  --sw-layerswitch3-panel-offset: var(--sw-controls-position-spacer);
  --sw-layerswitch3-panel-padding: 0px;
  --sw-layerswitch3-panel-border-radius: var(--sw-border-radius-lg);
  --sw-layerswitch3-panel-box-shadow: var(--sw-box-shadow);

  /* TYPOGRAPHY */
  --sw-layerswitch3-font-size-base: var(--sw-font-size);
  --sw-layerswitch3-font-size-label: var(--sw-input-label-font-size);
  --sw-layerswitch3-font-size-title: var(--sw-control-header-title-font-size);
  --sw-layerswitch3-font-size-icon: var(--sw-icon-size);
  --sw-layerswitch3-font-size-utility: 10px;
  --sw-layerswitch3-line-height-none: 0;
  --sw-layerswitch3-line-height-tight: 1;
  --sw-layerswitch3-line-height-control: 1.2;
  --sw-layerswitch3-line-height-body: var(--sw-line-height);
  --sw-layerswitch3-line-height-relaxed: 1.4;
  --sw-layerswitch3-letter-spacing-tight: -0.01em;
  --sw-layerswitch3-letter-spacing-label: 0.02em;
  --sw-layerswitch3-letter-spacing-caps: 0.04em;

  /* HEADER */
  --sw-layerswitch3-header-bg-color: var(--sw-layerswitch3-bg-panel);
  --sw-layerswitch3-header-gap: 6px;
  --sw-layerswitch3-header-padding: 8px;
  --sw-layerswitch3-header-border: 1px solid var(--sw-layerswitch3-border-color);
  --sw-layerswitch3-header-row-gap: 6px;
  --sw-layerswitch3-header-actions-gap: 4px;
  --sw-layerswitch3-header-title-font-size: var(--sw-layerswitch3-font-size-base);
  --sw-layerswitch3-header-title-font-weight: 700;
  --sw-layerswitch3-header-title-letter-spacing: var(--sw-layerswitch3-letter-spacing-caps);
  --sw-layerswitch3-header-title-color: var(--sw-layerswitch3-color-text);
  --sw-layerswitch3-header-collapsible-gap: 6px;

  /* HEADER BUTTONS */
  --sw-layerswitch3-header-button-size: 28px;
  --sw-layerswitch3-header-button-border-radius: 5px;
  --sw-layerswitch3-header-button-hover-bg: rgba(0, 0, 0, 0.07);
  --sw-layerswitch3-header-button-color: var(--sw-layerswitch3-color-text);

  /* REORDER TOOLBAR */
  --sw-layerswitch3-reorder-toolbar-gap: 4px;
  --sw-layerswitch3-reorder-button-padding: 4px 8px;
  --sw-layerswitch3-reorder-button-border: 1px dashed var(--sw-layerswitch3-border-color);
  --sw-layerswitch3-reorder-button-border-radius: 0.375rem;
  --sw-layerswitch3-reorder-button-bg-color: var(--sw-layerswitch3-bg-panel);
  --sw-layerswitch3-reorder-button-text-color: var(--sw-layerswitch3-color-text);
  --sw-layerswitch3-reorder-button-hover-bg-color: var(--sw-bg-hover-color);

  /* SEARCH */
  --sw-layerswitch3-search-input-border: 1px solid #cbd5e1;
  --sw-layerswitch3-search-input-border-radius: 0.375rem;
  --sw-layerswitch3-search-input-padding: 5px 26px 5px 10px;
  --sw-layerswitch3-search-input-text-color: #2f3f53;
  --sw-layerswitch3-search-input-bg-color: #ffffff;
  --sw-layerswitch3-search-input-hover-border-color: #94a3b8;
  --sw-layerswitch3-search-input-hover-shadow: 0 2px 5px rgb(15 23 42 / 10%);
  --sw-layerswitch3-search-clear-right: 6px;
  --sw-layerswitch3-search-clear-padding: 2px;
  --sw-layerswitch3-search-clear-color: #94a3b8;
  --sw-layerswitch3-search-clear-hover-color: #2f3f53;

  /* BODY */
  --sw-layerswitch3-body-padding: 0;
  --sw-layerswitch3-search-empty-padding: 10px 8px;

  /* GROUP */
  --sw-layerswitch3-bg-node: var(--sw-bg-hover-color);
  --sw-layerswitch3-group-top-spacing: 6px;
  --sw-layerswitch3-group-bottom-spacing: 6px;
  --sw-layerswitch3-group-child-padding: 0 6px;
  --sw-layerswitch3-group-child-border-radius: 6px;
  --sw-layerswitch3-group-divider-color: #d8d8d8;
  --sw-layerswitch3-group-root-divider-color: #e1e1e1;
  --sw-layerswitch3-group-children-box-shadow: inset 0 0 1px #666666;

  /* LAYER */
  --sw-layerswitch3-layer-row-gap: 6px;
  --sw-layerswitch3-layer-row-radius: 5px;
  --sw-layerswitch3-layer-content-min-height: 35px;
  --sw-layerswitch3-layer-content-padding: 2px 8px;
  --sw-layerswitch3-layer-content-gap: 6px;
  --sw-layerswitch3-layer-content-radius: 4px;
  --sw-layerswitch3-layer-content-hover-bg: rgba(0, 0, 0, 0.05);
  --sw-layerswitch3-layer-label-padding-block: 8px;
  --sw-layerswitch3-layer-label-font-weight: 500;
  --sw-layerswitch3-layer-root-label-font-weight: 600;
  --sw-layerswitch3-layer-count-bg-color: var(--sw-outline-color);
  --sw-layerswitch3-layer-count-padding: 2px 5px;
  --sw-layerswitch3-layer-count-border-radius: 10px;
  --sw-layerswitch3-layer-type-chip-text-color: #0f172a;
  --sw-layerswitch3-layer-type-chip-bg-color: #e2e8f0;
  --sw-layerswitch3-layer-type-chip-padding: 3px 6px;
  --sw-layerswitch3-layer-type-chip-border-radius: 999px;
  --sw-layerswitch3-layer-icon-size: 1rem;

  /* TOGGLE */
  --sw-layerswitch3-toggle-size: 15px;
  --sw-layerswitch3-toggle-checkbox-border: 1px solid #7f8f9f;
  --sw-layerswitch3-toggle-checkbox-bg-color: #ffffff;
  --sw-layerswitch3-toggle-checkbox-border-radius: 4px;
  /* glyph sizes are whole px so the insets stay integers and the shapes snap consistently */
  --sw-layerswitch3-toggle-check-width: 9px;
  --sw-layerswitch3-toggle-check-height: 9px;
  --sw-layerswitch3-toggle-check-color: #ffffff;
  --sw-layerswitch3-toggle-indeterminate-width: 7px;
  --sw-layerswitch3-toggle-indeterminate-height: 3px;
  --sw-layerswitch3-toggle-indeterminate-bg-color: #ffffff;
  --sw-layerswitch3-toggle-radio-border: 1px solid #5f6f7f;
  --sw-layerswitch3-toggle-radio-bg-color: #ffffff;
  --sw-layerswitch3-toggle-radio-dot-size: 7px;

  /* SLIDER */
  --sw-layerswitch3-slider-row-gap: 10px;
  --sw-layerswitch3-slider-label-max-width: 42%;
  --sw-layerswitch3-slider-label-text-color: #2f3a45;
  --sw-layerswitch3-slider-label-bg-color: #d3d8de;
  --sw-layerswitch3-slider-label-padding: 5px 10px;
  --sw-layerswitch3-slider-label-border-radius: 999px;
  --sw-layerswitch3-slider-input-min-width: 90px;
  --sw-layerswitch3-slider-input-height: 28px;
  --sw-layerswitch3-slider-track-height: 8px;
  --sw-layerswitch3-slider-track-bg-color: #aab1b9;
  --sw-layerswitch3-slider-thumb-size: 18px;
  --sw-layerswitch3-slider-thumb-bg-color: #ffffff;
  --sw-layerswitch3-slider-thumb-border: 2px solid var(--sw-layerswitch3-primary);

  /* DRAG AND DROP */
  --sw-layerswitch3-dropzone-indicator-height: 2px;
  --sw-layerswitch3-dropzone-indicator-border-radius: 4px;
  --sw-layerswitch3-dropzone-active-height: 16px;
  --sw-layerswitch3-dropzone-active-shadow: 0 0 8px var(--sw-layerswitch3-primary);
  --sw-layerswitch3-slot-dropzone-min-height: 34px;
  --sw-layerswitch3-slot-dropzone-margin: 4px 0 6px;
  --sw-layerswitch3-slot-dropzone-border: 1px dashed var(--sw-layerswitch3-border-color);
  --sw-layerswitch3-slot-dropzone-border-radius: 6px;
  --sw-layerswitch3-slot-dropzone-label-color: #406d73;

  /* STATUS COLORS */
  --sw-layerswitch3-status-group-color: var(--sw-status-yellow);
  --sw-layerswitch3-status-layer-color: var(--sw-status-green);
}

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 tekster, der er default for denne komponent.

Vis tekster

{
  "da-DK": {
    "header": "Lag i kortet",
    "addLayers": "Tilføj lag",
    "addGroup": "+ Tilføj gruppe",
    "newGroupDefaultTitle": "Ny gruppe",
    "renameGroupAria": "Omdøb gruppe",
    "groupTitleInputAria": "Gruppenavn",
    "actionsMenuAria": "Flere lagfunktioner",
    "collapsePanelAria": "Fold lagpanel sammen",
    "expandPanelAria": "Udvid lagpanel",
    "dragHandleTitle": "Flyt lag",
    "startReordering": "Start omarrangering",
    "stopReordering": "Stop omarrangering",
    "resetServer": "Nulstil",
    "resetSession": "Nulstil session",
    "searchPlaceholder": "Søg i lag...",
    "searchAria": "Søg i lag",
    "searchClearAria": "Ryd søgning",
    "searchNoMatch": "Ingen lag matcher din søgning.",
    "catalogueSectionTitle": "Tilføj fra katalog",
    "searchOtherLayersTitle": "Andre lag",
    "slotTop": "Top",
    "slotMiddle": "Middle",
    "slotBottom": "Bottom",
    "badgeGroup": "GRUPPE",
    "badgeLayer": "LAG",
    "warnInvalidTarget": "Målbegrænsning stemmer ikke: afvist.",
    "warnMoveFailed": "Kunne ikke anvende flytning: afvist.",
    "catalogueTitle": "Lagkatalog",
    "catalogueCloseAria": "Luk lagkatalog",
    "catalogueBackAria": "Tilbage til lagkatalog",
    "catalogueSeeInfoAria": "Se information om laget",
    "catalogueLoadError": "Kunne ikke indlæse datasæt fra kataloget.",
    "catalogueLoading": "Indlæser katalog",
    "catalogueNoMatch": "Ingen lag matcher din søgning.",
    "filtersOwnLayers": "Egne lag",
    "filtersOf": "af",
    "filtersSearchLayersPlaceholder": "Søg lag...",
    "filtersSearchLayersAria": "Søg lag",
    "filtersBySourceAria": "Filtrer efter kilde",
    "filtersTags": "Tags",
    "filtersClearTagsAria": "Ryd tagfiltre",
    "filtersByTagsAria": "Filtrer efter tags",
    "filtersSearchTagsPlaceholder": "Søg tags...",
    "filtersSearchTagsAria": "Søg tags",
    "filtersNoTagsMatch": "Ingen tags matcher",
    "filtersClearSelected": "Ryd valgte",
    "filtersReset": "Nulstil filtre",
    "catalogueTagsAria": "Tags",
    "catalogueMetadataPublisher": "Udbyder",
    "catalogueMetadataLicense": "Licens",
    "catalogueAdd": "+ Tilføj",
    "catalogueRemove": "- Fjern",
    "nodeZoomIn": "zoom ind!",
    "nodeLoadingTitle": "Laget indlæses",
    "nodeZoomWarningTitle": "Laget vises ikke ved dette zoomniveau",
    "nodeZoomWarningDescription": "Zoom ind eller ud for at få laget vist.",
    "nodeLoadErrorTitle": "Laget kunne ikke indlæses",
    "nodeLoadErrorDescription": "Der opstod en fejl under indlæsning af laget. Prøv igen senere.",
    "nodeStyle": "Stil",
    "nodeAriaGroupVisibility": "Skift synlighed for laggruppe",
    "nodeAriaLayerVisibility": "Skift synlighed for lag",
    "expandGroupAria": "Udvid gruppe",
    "collapseGroupAria": "Fold gruppe sammen",
    "removeLayerAria": "Fjern lag",
    "removeGroup": "Fjern gruppe",
    "removeEmptyGroupAria": "Fjern tom gruppe",
    "slotDropAria": "Slip lag i tom slot",
    "slotDropHere": "Slip her",
    "nodeOpacityLabel": "Transparens",
    "nodeOpacityButtonAria": "Transparens"
  },
  "en-US": {
    "header": "Layers",
    "addLayers": "Add layers",
    "addGroup": "+ Add group",
    "newGroupDefaultTitle": "New group",
    "renameGroupAria": "Rename group",
    "groupTitleInputAria": "Group name",
    "actionsMenuAria": "More layer controls",
    "collapsePanelAria": "Collapse layer panel",
    "expandPanelAria": "Expand layer panel",
    "dragHandleTitle": "Move layer",
    "startReordering": "Start reordering",
    "stopReordering": "Stop reordering",
    "resetServer": "Reset",
    "resetSession": "Reset session",
    "searchPlaceholder": "Search layers...",
    "searchAria": "Search layers",
    "searchClearAria": "Clear search",
    "searchNoMatch": "No layers match your search.",
    "catalogueSectionTitle": "Add from catalogue",
    "searchOtherLayersTitle": "Other layers",
    "slotTop": "Top",
    "slotMiddle": "Middle",
    "slotBottom": "Bottom",
    "badgeGroup": "GROUP",
    "badgeLayer": "LAYER",
    "warnInvalidTarget": "Target restriction does not match: rejected.",
    "warnMoveFailed": "Could not apply move: rejected.",
    "catalogueTitle": "Layer catalogue",
    "catalogueCloseAria": "Close layer catalogue",
    "catalogueBackAria": "Back to layer catalogue",
    "catalogueSeeInfoAria": "See information about the layer",
    "catalogueLoadError": "Could not load datasets from catalogue.",
    "catalogueLoading": "Loading catalogue",
    "catalogueNoMatch": "No layers match your search.",
    "filtersOwnLayers": "Own layers",
    "filtersOf": "of",
    "filtersSearchLayersPlaceholder": "Search layers...",
    "filtersSearchLayersAria": "Search layers",
    "filtersBySourceAria": "Filter by source",
    "filtersTags": "Tags",
    "filtersClearTagsAria": "Clear tag filters",
    "filtersByTagsAria": "Filter by tags",
    "filtersSearchTagsPlaceholder": "Search tags...",
    "filtersSearchTagsAria": "Search tags",
    "filtersNoTagsMatch": "No tags match",
    "filtersClearSelected": "Clear selected",
    "filtersReset": "Reset filters",
    "catalogueTagsAria": "Tags",
    "catalogueMetadataPublisher": "Publisher",
    "catalogueMetadataLicense": "License",
    "catalogueAdd": "+ Add",
    "catalogueRemove": "- Remove",
    "nodeZoomIn": "zoom in!",
    "nodeLoadingTitle": "Layer is loading",
    "nodeZoomWarningTitle": "Layer is not visible at this zoom level",
    "nodeZoomWarningDescription": "Zoom in or out to display the layer.",
    "nodeLoadErrorTitle": "Layer could not be loaded",
    "nodeLoadErrorDescription": "An error occurred while loading the layer. Try again later.",
    "nodeStyle": "Style",
    "nodeAriaGroupVisibility": "Toggle visibility for layer group",
    "nodeAriaLayerVisibility": "Toggle visibility for layer",
    "expandGroupAria": "Expand group",
    "collapseGroupAria": "Collapse group",
    "removeLayerAria": "Remove layer",
    "removeGroup": "Remove group",
    "removeEmptyGroupAria": "Remove empty group",
    "slotDropAria": "Drop layer into empty slot",
    "slotDropHere": "Drop here",
    "nodeOpacityLabel": "Transparency",
    "nodeOpacityButtonAria": "Transparency"
  }
}

position

• Type: string
• Default: right

Placerer lagvælgeren i forhold til kortet. Gyldige værdier er left og right.

groups

• Type: array

Definerer de lag og grupper, der vises i lagvælgeren. Hvert element i arrayet kan enten være et lag-id som string eller et gruppeobjekt.

Hvis groups ikke angives, opbygges lagtræet automatisk ud fra alle lag i kortet.

title

• Type: string

Overskriften for gruppen. Skal angives på gruppeobjekter.

id / groupId

• Type: string

Stabilt id til gruppen. Det er især relevant ved persist, fordi brugerens ændrede gruppestruktur gemmes og genskabes.

type

• Type: string
• Default: group

Bestemmer gruppens opførsel:

• group: almindelig gruppe, hvor flere lag kan være tændt.
• radio: kun ét underliggende lag kan være tændt ad gangen.
• slider: lagene fungerer som en fast slider-/trinliste. Lagene inde i gruppen kan ikke omarrangeres.
• slot: en fast renderingszone. Slots kan ikke selv flyttes, og lag kan kun flyttes inden for slotstrukturen.

subtitle

• Type: string

Viser en sekundær tekst under gruppens titel.

icon

• Type: string

Material Symbols ikonnavn, der vises ved gruppens titel.

legendConfig

• Type: object

Signaturdata til gruppeheaderen. Kan f.eks. bruges til et svgIcon.

selectAll

• Type: boolean
• Default: false

Giver mulighed for at tænde eller slukke alle lag i gruppen på én gang.

showCount

• Type: boolean
• Default: false

Viser antal synlige lag og samlet antal lag i gruppen.

expanded

• Type: boolean
• Default: false

Angiver om gruppen er foldet ud fra start.

hideOpacityOption

• Type: boolean
• Default: false

Skjuler muligheden for at ændre transparens på lag i gruppen.

slotZIndex

• Type: number

Kun relevant for type: "slot". Angiver den z-index, som lag i denne slot skal renderes ved. Højere slotZIndex renderes over lavere slotZIndex.

layers

• Type: array

Liste med lag-id'er og eventuelle undergrupper.

allowReordering

• Type: boolean
• Default: false

Giver brugeren mulighed for at starte omarrangering fra menuen. Når omarrangering er aktiv, kan brugeren flytte lag og grupper, oprette nye grupper og fjerne brugeradministrerede elementer fra lagtræet.

Når lagtræet ændres, synkroniseres rækkefølgen tilbage til kortets z-indexes. Brug renderToZIndex og eventuelt slotZIndex for at styre renderingsniveauet.

allowCatalogue

• Type: boolean
• Default: false

Viser handlingen Tilføj lag, så brugeren kan åbne lagkataloget. Kataloget indlæses først, når det åbnes første gang, eller når brugeren søger.

Kataloget viser både DMP-datasæt og lagdefinitioner, der allerede findes i widgetens layer-liste, men som ikke er placeret i lagtræet.

ignoreLayers

• Type: string[]

Lag-id'er, der ikke skal vises som tilføjelige lag i kataloget eller søgeresultaterne.

renderToZIndex

• Type: number

Basis-z-index for synkronisering af rækkefølgen i lagtræet tilbage til kortet. Hvis konfigurationen bruger slots, bestemmer hver slots slotZIndex renderingsniveauet for dens lag.

persist

• Type: boolean
• Default: false

Gemmer brugerens ændringer i IndexedDB for den aktuelle URL. Det omfatter synlighed, transparens, tilføjede lag og ændret gruppestruktur.

Menuens Nulstil handling rydder den gemte tilstand og genskaber konfigurationens oprindelige lag og grupper.

ignoreURLParams

• Type: string | string[]

Ignorerer URL-parametre, når nøglen til persistence beregnes. Det er relevant, hvis widgeten åbnes med dynamiske parametre, der ikke skal give hver sin gemte lagtilstand.

Brug "all" for at ignorere hele query stringen:

"layerswitch3": {
  "persist": true,
  "ignoreURLParams": "all"
}

Eksempler

Vi kan desværre ikke finde nogen eksempler, der bruger denne komponent.