Sådan opsætter du lagvælger i OneDoor

OneDoor viser kortlag med en lagvælger, som brugeren kan tænde og slukke for. Lagvælgeren leveres af Septima Widget (widget3) og findes i to varianter:

• layerswitch2 — Septimas egen grupperede lagvælger med checkbox, radio og slider-grupper.
• layerswitchDMP — kortbutik baseret på Danmarks Miljøportals lagkatalog (@dmp/map-components).

Valget af lagvælger sker i style.yml ved at tilføje den ønskede control i kortets controls-liste.

Hvilken lagvælger skal jeg vælge?

Egenskab	layerswitch2	layerswitchDMP
UI-stil	Septimas egen, kompakt med grupper og evt. signaturforklaring	DMP kortbutik med datakatalog og drag-and-drop
Lagkilde	De lag du eksplicit har defineret i map.layer	Hele Danmarks Miljøportals datakatalog + evt. importerede widget-lag
Bruger-tilpasning	Fast — bruger kan kun til-/fravælge de lag du har sat op	Dynamisk — brugeren kan browse katalog og selv tilføje lag
Tilstand/persistens	Ingen persistens på tværs af sessioner	Brugerens valgte datasæt gemmes i localStorage under api_datasets
Bedst til	Kurateret sæt lag, fx kommune-temaer eller plandata	Brugere der skal kunne vælge frit fra DMP-katalog (typisk miljø-/natursager)

Som tommelfingerregel: brug layerswitch2 til en kurateret oplevelse og layerswitchDMP når brugerne skal kunne udforske og tilføje lag fra Danmarks Miljøportal selv.

Du kan godt vise DMP-datakat-lag (urn:dmp:ds:…) i layerswitch2 — du skal blot definere dem som almindelige lag i map.layer. Forskellen er ikke "DMP-data ja/nej", men om brugeren skal have kortbutikken og dynamisk lagstyring.

Hvor konfigureres lagvælgeren?

Lagvælgeren konfigureres i style.yml under det relevante kort. Stilen kaskaderes på serveren:

1. Base — onedoor-server's indbyggede style.yml (under config/onedoor/).
2. Organisation — overskrivninger pr. organisation.
3. Konfiguration — overskrivninger pr. profil/konfiguration.

Hver lag i kaskaden kan tilføje eller overskrive felter. På den måde kan en organisation eller profil ændre lagvælgerens type eller tilføje grupper uden at duplikere hele filen.

Strukturen i style.yml ser sådan ud:

maps:
  - name: hovedkort
    config:
      map:
        layer:
          # Definér jeres lag her
          - id: orto
            namedlayer: '#orto'
          - id: matrikelskel
            namedlayer: '#matrikelskel'
        controls:
          - layerswitch2:
              # options til layerswitch2 her

Vælg én af layerswitch2 eller layerswitchDMP som control — ikke begge.

layerswitch2 — grupperet lagvælger

layerswitch2 viser de lag du har defineret i map.layer, organiseret i grupper du selv vælger. Hver gruppe kan vises som en liste med checkboxe, en radioknap-gruppe (kun ét lag ad gangen), eller en slider der bytter mellem lag (typisk til årgange af flyfotos).

Lag-id'erne du bruger i groups, kan referere lag defineret direkte i map.layer eller med en namedlayer-genvej — se Indbyggede lag for genveje og Egne lag for hvordan du definerer dine egne.

Minimal konfiguration af layerswitch2

controls:
  - layerswitch2:
      showheader: true
      groups:
        - title: Baggrundskort
          type: radio
          expanded: true
          layers:
            - orto
            - vt

Options for layerswitch2

Felt	Type	Beskrivelse
groups	array	Liste af grupper — se næste afsnit. Påkrævet for at lagvælgeren viser noget meningsfuldt.
showheader	boolean	Vis overskrift øverst i lagvælgeren.
showheaderCollapsed	boolean	Start med headeren foldet sammen. På små skærme (under 700 px) foldes der automatisk sammen.
position	string	left eller right — placering af sidepanel.
className	string	Ekstra CSS-klasse på rod-elementet.
css	string	Sti til ekstra stylesheet, der indlæses sammen med kontrollen.
activateButton	boolean	Vis en knap der åbner/lukker lagvælgeren i stedet for at vise den fast.
buttonIndex	number	Rækkefølge i knappanelet, hvis flere kontroller har en knap.
hideOpacityOption	boolean	Skjul opacity-slider på alle lag (kan også sættes pr. gruppe).
paramNames	object	Brug egne navne for parametre (layers, groups) i URL/data-attributter.
keepInFullscreen	boolean	Hold lagvælgeren synlig når kortet går i fuldskærm.
disable	boolean	Slå kontrollen helt fra (nyttigt i kaskaden — fx fravælge i en specifik konfiguration).
detach	boolean	Render kontrollen uden for kortets DOM.

Grupper (groups)

Hver gruppe er et objekt med følgende felter:

Felt	Type	Beskrivelse
title	string	Gruppens overskrift i UI'et.
type	string	checkbox (default), radio eller slider.
expanded	boolean	Start med gruppen åben (default: false).
selectAll	boolean	Vis "Vælg alle"-checkbox i gruppen.
showCount	boolean	Vis antal aktive lag i gruppens overskrift.
layers	array	Liste af lag-id'er, som skal være defineret i map.layer.
hideOpacityOption	boolean	Skjul opacity-slider for lag i denne gruppe.

Lag-id'er i layers skal matche id på et lag i map.layer — layerswitch2 bygger UI ud fra eksisterende lag-konfiguration.

Eksempel med grupper, undergrupper og lag

Nedenfor er en layerswitch2 konfiguration. Konfigurationen er fra OneDoor demo. På screenshot kan du se hvordan lagvælgeren så ud på det tidspunkt vi lagde konfigurationen ind i vejledningen. Lagvælgeren kan se anderledes ud i OneDoor demo da vi løbende tilpasser konfigurationen til forskellige formål.

controls:
  - layerswitch2:
      menuButtons:
        clear: true
        search: false
        expandAll: true
      groups:
        - title: Historiske kort
          hideOpacityOption: true
          icon: docs
          type: checkbox
          selectAll: false
          expanded: false
          showCount: true
          layers:
            - historiskekort_kort
            - historiskekort_dokumenter
        - title: Lokalplan
          icon: docs
          type: checkbox
          selectAll: false
          expanded: false
          showCount: true
          layers:
            - title: Vedtaget
              selectAll: true
              layers:
                - plansystem_vedtagetlokalplan
                - plansystem_byggefelt
                - plansystem_delområde
            - title: Forslag
              selectAll: true
              layers:
                - plansystem_lokalplanforslag
        - title: Kommuneplan
          icon: docs
          type: checkbox
          selectAll: false
          showCount: true
          expanded: false
          layers:
            - title: Vedtaget
              selectAll: true
              layers:
                - plansystem_kommuneplanramme
        - title: Matrikel
          icon: Flag
          type: checkbox
          selectAll: false
          expanded: false
          showCount: true
          layers:
            - Kortforsyningen_matrikelnumre
            - DAF_sfe
        - title: Offentlig transport
          icon: train
          type: checkbox
          selectAll: false
          expanded: false
          showCount: true
          layers:
            - metro
            - title: Tog
              selectAll: true
              layers:
                - s-train
                - tog
                - letbane
            - bus
        - title: Sundhed
          icon: health_cross
          hideOpacityOption: true
          type: checkbox
          selectAll: false
          expanded: false
          showCount: true
          layers:
            - apotek
            - medic
            - hospital
        - title: Indkøb
          icon: shopping_bag
          type: checkbox
          selectAll: false
          expanded: false
          showCount: true
          layers:
            - supermarked
            - kiosk
            - shopping
            - tankstation
        - title: Seværdigheder
          icon: museum
          type: checkbox
          selectAll: false
          expanded: false
          showCount: true
          layers:
            - museum
            - kulturhus_spillested
        - title: Sport / Idræt
          icon: sports
          type: checkbox
          selectAll: false
          expanded: false
          showCount: true
          layers:
            - swim
            - fitness
            - tennis
            - football
            - golf

Udsnit af lagdefinitionerne (map.layer) i samme 02-basis/style.yml for de temaer, der vises i lagvælgeren:

map:
  layer:
    - id: metro
      name: Metro
      namedlayer: "#septima_poi"
      features: true
      params:
        undertype: metro
    - id: s-train
      name: S-tog
      namedlayer: "#septima_poi"
      features: true
      params:
        undertype: s-tog
    - id: tog
      name: Togstation
      namedlayer: "#septima_poi"
      features: true
      params:
        undertype: tog
    - id: bus
      name: Busstoppested
      namedlayer: "#septima_poi"
      features: true
      params:
        undertype: bus
    - id: apotek
      name: Apotek
      namedlayer: "#septima_poi"
      features: true
      params:
        undertype: apotek
    - id: hospital
      name: Hospital
      namedlayer: "#septima_poi"
      features: true
      params:
        undertype: hospital
    - id: supermarked
      name: Supermarked
      namedlayer: "#septima_poi"
      features: true
      params:
        undertype: supermarked
    - id: tankstation
      name: Tankstation
      namedlayer: "#septima_poi"
      features: true
      params:
        undertype: tankstation

Illustration fra brugerfladen:

layerswitchDMP — DMP kortbutik

layerswitchDMP er en wrapper omkring @dmp/map-components fra Danmarks Miljøportal. Brugeren får en kortbutik-UI, hvor de kan browse hele DMP's lagkatalog og selv tilføje, fjerne og rangordne datasæt.

Har du brug for at inkludere dine egne lag i kortbutikken, bruger du layerImports nedenfor — se Egne lag for hvordan lagene defineres i map.layer. DMP-URN'er (urn:dmp:ds:…) kan også bruges direkte som namedlayer — se Indbyggede lag.

Brugerens valg gemmes i browseren under localStorage-nøglen api_datasets. Hvis en bruger oplever mærkelig adfærd med defaults eller forsvundne lag, kan det ofte løses ved at slette den nøgle (eller browserens site data) og genindlæse.

Minimal konfiguration af layerswitchDMP

controls:
  - layerswitchDMP:
      position: top left
      zIndex: 50
      layerDefaults:
        - id: urn:dmp:ds:ortofoto-foraar-nyeste-tilgaengelige
          visible: false
          opacity: 0.5

Options for layerswitchDMP

Felt	Type	Beskrivelse
zIndex	number	Basis z-index for lag tilføjet med DMP-kontrollen (default: 1).
position	string	Placering — kombination af top/bottom og left/right, fx top left.
layerDefaults	array	Standardlag som indsættes i localStorage første gang en bruger åbner kortet.
layerImports	array	Widget-lag der importeres som datasæt i DMP-butikken, så brugeren kan tænde/slukke dem fra kortbutikken.

layerDefaults

Hvert element i listen er et objekt med:

Felt	Type	Beskrivelse
id	string	DMP datasæt-URN, fx urn:dmp:ds:ortofoto-foraar-nyeste-tilgaengelige.
visible	boolean	Om laget skal være tændt fra start (default: true).
opacity	number	Lagets opacity 0–1 (default: 1).

layerDefaults skrives kun til localStorage, hvis nøglen api_datasets ikke allerede findes — altså første gang brugeren besøger kortet i den browser. Eksisterende brugere skal rydde localStorage for at se ændringer i defaults.

layerImports

Importerer widget-lag (lag fra map.layer) som "fiktive datasæt" i DMP-butikken. Hvert element kan være:

layerImports:
  - id: adresse
  - id: matrikelskel
    metadata:
      thumbnail: /img/thumbs/matrikel.png
      category: Ejendom
      owners:
        - Geodatastyrelsen
      previewImages:
        - /img/preview/matrikel.png
      tags:
        - matrikel
        - skel

metadata-felterne styrer hvordan laget præsenteres i DMP's kortbutik.

Vigtigt om defaultLayers versus layerDefaults

Widget3-koden læser feltet layerDefaults. Nogle eksisterende style.yml-filer i OneDoor bruger defaultLayers — det er en ældre/forkert nøgle og virker ikke længere. Brug altid layerDefaults.

Dynamiske layerImports fra serveren

OneDoor-serverens style.js kan automatisk tilføje OWS- og admin-lag til layerswitchDMP.layerImports ved runtime. Det betyder at lag, der konfigureres centralt (fx med admin-grænsefladen eller OWS-kataloget), automatisk dukker op i DMP-kortbutikken uden at du skal liste dem manuelt i style.yml.

Du kan stadig liste lag manuelt under layerImports — server-side imports merges oven i din liste.

Eksempel: DMP-lagvælger med baggrund og importeret adresselag

controls:
  - layerswitchDMP:
      position: top left
      zIndex: 50
      layerDefaults:
        - id: urn:dmp:ds:ortofoto-foraar-nyeste-tilgaengelige
          visible: true
          opacity: 1
        - id: urn:dmp:ds:dagi-kommuner
          visible: false
          opacity: 0.6
      layerImports:
        - id: adresse
        - id: matrikelskel
          metadata:
            category: Ejendom
            tags:
              - matrikel

Referér laget fra lagvælgeren

Når laget er defineret, skriver du id'et ordret i layerswitch2.groups[*].layers:

Her er et samlet eksempel med et baggrundskort og en lagvælger. De detaljerede lagdefinitioner findes under Kortlag og datakilder.

maps:
  - name: hovedkort
    config:
      map:
        layer:
          - id: skaermkort
            namedlayer: '#dk_standard'
        controls:
          - layerswitch2:
              groups:
                - title: Baggrundskort
                  type: checkbox
                  expanded: true
                  layers:
                    - skaermkort

For layerswitchDMP importeres laget i stedet med layerImports:

controls:
  - layerswitchDMP:
      layerImports:
        - id: skaermkort

Du kan frit blande indbyggede namedlayer-ID'er og egne lag-ID'er i samme gruppe.

Signaturforklaring (legendConfig)

Giv dit lag en visuel signatur i lagvælgeren:

legendConfig:
  img: /assets/signaturer/matrikel.png
  size: [16, 16]

Andre former:

• legendConfig: { svgIcon: '<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>' } — inline SVG.
• legendConfig: { html: '<span style="...">...</span>' } — vilkårlig HTML.
• legendConfig: { legends: [ { title: 'Kategori A', ... }, { title: 'Kategori B', ... } ] } — flere signaturer i ét lag.

For features-lag uden legendConfig afledes en simpel signatur automatisk fra features_style.

Farver og symboler på selve laget konfigureres med Feature-styling.

Fejlfinding

Symptom	Sandsynlig årsag	Løsning
Unknown plugin: layerswitch-dmp	Forkert nøgle i YAML	Brug layerswitchDMP (camelCase) — ikke layerswitch-dmp.
Lagvælgeren er tom	Lag-id'er i groups[*].layers matcher ikke noget i map.layer	Tjek at id'erne er defineret som lag.
layerDefaults har ingen effekt	Brugeren har allerede api_datasets i localStorage	Ryd browserens lokale data, eller bed testbrugere om at slette nøglen.
Lag skifter ikke ved klik	Lag mangler en gyldig kilde (WMS, vector, namedlayer)	Tjek lag-definitionen i map.layer.
Interne lag (resultLayer, itemsLayer) optræder	OneDoor's egne dynamiske lag er ikke ekskluderet	Klassisk layerswitch ekskluderer dem automatisk i Ember-stien; for layerswitch2/layerswitchDMP skal du undgå at lægge dem i grupper/imports.
YAML giver parse-fejl	Indrykning eller manglende bindestreg	Validér YAML — controls er en liste, hvert element er et objekt med én nøgle (layerswitch2: eller layerswitchDMP:).