Layout

Det er muligt at styre placeringen af alle funktionerne i og omkring kortet via layout-objektet i map-konfigurationen. layout fordeler kontroller i navngivne slots (paneler), der kan placeres til venstre, højre, over eller under kortet — eller flyde oven på det. På mobile enheder skifter layoutet automatisk til en bundmenu. Se eksempel her.

"layout": {
  "appMode": true,
  "appBreakpoint": 820,
  "slots": {
    "left": {
      "title": "Søgning",
      "showHeader": true,
      "icon": "search",
      "controls": ["search"],
      "activateButton": { 
        "icon": "search", 
        "title": "Søg" 
      }
    }
  }
}

Options

defaultSlot

• Type: string
• Default: "left"

Fallback-slot, der bruges, når en kontrol beder om et ukendt slot-navn. Gyldige værdier: "left", "right", "top", "bottom", "float-left", "float-right", "float-top", "float-bottom".

appMode

• Type: boolean
• Default: true

Når true (standard) skifter layoutet til app-mode ved den aktuelle containerbredde. Sæt til false for altid at bruge desktop-panellayoutet.

appMapFlexible

• Type: boolean
• Default: false

I app-tilstand: gør at kortet skrumper for at give plads til det åbne panel under kortet, i stedet for at panelet ligger som en "bottom sheet" oven på kortet. Panelets højde justeres automatisk efter indholdets højde (eller udfylder den tilgængelige plads, hvis panelet indeholder søgning).

appBreakpoint

• Type: number
• Default: 820

Containerbredde (px), under hvilken app-tilstand aktiveres. Værdien måles på widget-containeren, ikke på hele viewporten.

appNavType

• Type: string
• Default: bottom

Styrer app-mode-navigationens placering og udseende.

• "bottom": viser navigationen som en fuld-bredde bjælke nederst i widgeten.
• "float": viser navigationen som en svævende knapper over kortet.

Navigationen indeholder én knap for hver slot, hvor appNav ikke er sat til false. appNavType ændrer kun navigationens placering; det ændrer ikke hvilke slots eller controls der findes.

"layout": {
  "appNavType": "float",
  "slots": {
    "left": {
      "title": "Listevisning",
      "controls": ["table"],
      "appNav": true
    },
    "right": {
      "title": "Kortindstillinger",
      "controls": ["layerswitch2"],
      "appNav": false
    }
  }
}

leftWidth

• Type: string | number

CSS-bredde på venstre panel, f.eks. "320px". Styrer størrelsen på de fastgjorte paneler globalt. Individuelle slots kan tilsidesætte med width.

rightWidth

• Type: string | number

CSS-bredde på højre panel. Styrer størrelsen på de fastgjorte paneler globalt. Individuelle slots kan tilsidesætte med width.

topHeight

• Type: string | number

CSS-højde på toppen panel. Styrer størrelsen på de fastgjorte paneler globalt. Individuelle slots kan tilsidesætte med height.

bottomHeight

• Type: string | number

CSS-højde på bundpanelet. Styrer størrelsen på de fastgjorte paneler globalt. Individuelle slots kan tilsidesætte med height.

slots

En slot er et navngivet panel, der kan indeholde en eller flere kontroller. De gyldige slot-navne er:

Slot	Placering
left	Fastgjort til venstre for kortet
right	Fastgjort til højre for kortet
top	Fastgjort over kortet
bottom	Fastgjort under kortet
float-left	Flyder oven på kortet, venstre side
float-right	Flyder oven på kortet, højre side
float-top	Flyder oven på kortet, øverst
float-bottom	Flyder oven på kortet, nederst

Slot-konfigurationen angives under slots med slot-navnet som nøgle:

"slots": {
  "left": {
    "controls": [
      "search"
    ]
  },
  "right": {
    "tabs": [
      {
        "label": "Kortlag",
        "controls": [
          "layerswitch"
        ]
      }
    ]
  }
}

Slots options

disable

• Type: boolean
• Default: false

Deaktiverer denne slot-routing. Controls i slotten får ikke automatisk en slot-wrapper, og der oprettes ikke en activateButton til slotten.

title

• Type: string

Panelets overskriftstekst og label i bundnavigationen. Bruges også som tooltip/aria-label på activateButton, hvis ingen eksplicit titel er angivet på knappen.

label

• Type: string

Label vist på slottens knap i bundnavigationen (app-tilstand). Falder tilbage til title, hvis ikke angivet.

showHeader

• Type: boolean
• Default: true

Styrer panelets overskriftsbjælke. true viser overskriftsbjælken med title som tekst. false skjuler overskriftsbjælken eksplicit, selv når title er angivet. Hvis optionen udelades, vises headeren, når title er sat.

icon

• Type: string

Google Material Icons-symbolnavn vist i overskriften og i bundmenuns navigationsknap, f.eks. "search", "layers", "tune".

float

• Type: boolean
• Default: false

Gør panelet til et overlay oven på kortet i stedet for at placere det ved siden af kortet i et grid-layout. Kombiner med position for at styre placeringen.

position

• Type: string
• Eksempler: "center", "left", "right"

Vandret/lodret placering af et flydende panel. Tilføjer CSS-klassen sw-slot-position-{value} til panelet. Kræver at float: true er sat.

"top": {
  "float": true,
  "position": "center",
  "controls": ["search"]
}

expanded

• Type: boolean
• Default: false

Bestemmer om panelet starter åbent, når det har en activateButton. Ignoreres, hvis der ikke er nogen activateButton.

controls

• Type: string[]

ID'er på de kontroller, der skal vises fladt i panelets krop. Brug tabs i stedet, hvis du ønsker et fanebaseret layout.

width

• Type: string | number

CSS-bredde-tilsidesættelse for dette panel — tilsidesætter den globale leftWidth/rightWidth.

height

• Type: string | number

CSS-højde-tilsidesættelse for dette panel — tilsidesætter den globale topHeight/bottomHeight.

tabs

• Type: array

Fanebaseret layout: flere faner, der hver har sine egne kontroller. Kan ikke kombineres med controls på samme slot.

"right": {
  "tabs": [
    { "label": "Kortlag", "icon": "stacks", "controls": ["layerswitch"] },
    { "label": "Filter",  "icon": "tune",   "controls": ["filter"] }
  ]
}

Hver fane har følgende egenskaber:

label

• Type: string

Tekst vist på faneknappen.

icon

• Type: string

Google Material Icons-symbolnavn vist på faneknappen.

controls

• Type: string[] (påkrævet)

ID'er på de kontroller, der renderes inde i fanen. Rækkefølgen bestemmer visningsrækkefølgen.

active

• Type: boolean
• Default: false

Angiver om denne fane er den aktive standardfane. Hvis ikke angivet, er den første fane aktiv.

appNav

• Type: boolean
• Default: true

Angiver om denne slot vises som knap i bundnavigationsbjælken i app-tilstand. Navigationen vises som en bundbjælke eller en floating pill afhængigt af appNavType. Sæt til false for at skjule slotten fra app-navigationen. Slotten og dens controls kan stadig eksistere og placeres i layoutet.

showMapButton

• Type: boolean | object
• Default: false

Viser en knap i et åbent app-panel, der lukker panelet og viser kortet igen. Bruges typisk på slots med layerswitch eller layerswitch2. Ved objekt-form kan icon og label angives.

"showMapButton": {
  "icon": "map",
  "label": "Vis kort"
}

activateButton

• Type: object

Aktivér denne funktion med en knap i kortet. Læs mere om activateButton her.