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": {
      "header": "Søgning",
      "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 en bundmenu på touch-enheder. Sæt til false for altid at bruge desktop-panellayoutet.

appBreakpoint

• Type: number
• Default: 1024

Viewport-bredde (px), under hvilken app-tilstand aktiveres uanset touch-detektion.

appNavType

• Type: string
• Default: bottom

Styrer bundnavigationsbjælkens udseende i app-tilstand. Sæt til "float" for at vise navigationen som en svævende pill i stedet for en fuld-bredde bjælke.

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

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.

header

• Type: string | boolean

Styrer panelets overskriftsbjælke. En streng-værdi bruges som overskriftstekst. true viser overskriftsbjælken med title som tekst. false skjuler overskriftsbjælken eksplicit, selv når title er angivet. Udelad header for at vise en overskrift kun, 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. Sæt til false for at skjule slotten fra bundnavigationen.

activateButton

• Type: object

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