Søg i Septima Widget K

Skift baggrundskort ​

Skift baggrundskort i stil med Google Maps.

Knap, der gør, at brugeren kan skifte (toggle) mellem forskellige baggrundskort, der er angivet i konfigurationen. For at et lag kommer med i denne knap, skal der på laget angives legendConfig hvor icon er angivet:

json
"legendConfig": {
  "icon": "https://septima.dk/widget/img/ortofoto.png"
}

Læs mere om signaturforklaring her.

Derudover er det vigtigt at sætte visible til true på det lag, der skal vises fra start og false for det lag, der skal være skjult fra start.

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.

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.

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 {
  --sw-layertoggle-bg-color: var(--sw-bg-color);
  --sw-layertoggle-border: 1px solid var(--sw-border-color);
  --sw-layertoggle-border-radius: var(--sw-border-radius);
  --sw-layertoggle-font-size: var(--sw-font-size);
  --sw-layertoggle-text-color: var(--sw-text-color);
  --sw-layertoggle-box-shadow: var(--sw-box-shadow);
  --sw-layertoggle-item-width: 44px;
  --sw-layertoggle-item-height: 44px;
  --sw-layertoggle-item-border-radius: calc(var(--sw-border-radius) / 1.325);
  --sw-layertoggle-item-text-color: var(--sw-text-color);
  --sw-layertoggle-item-border-active: 0.125em solid var(--sw-primary);
  --sw-layertoggle-spacer-left: var(--sw-spacer-sm);
  --sw-layertoggle-spacer-bottom: var(--sw-spacer-sm);
  --sw-layertoggle-justify-content: center;
}

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 baggrundskort",
    "show": "Vis"
  },
  "en-US": {
    "activatebutton": "Toggle baselayers",
    "show": "Show"
  }
}

mode ​

  • Type: string
  • Default: compact

Det er muligt at benytte LayerToggle i forskellige "modes". Som default vises den med den traditionelle visning med én "knap", hvor brugeren kan toggle mellem de lag, der er defineret. Se eksempel her.

Det er også muligt at benytte expanded, hvor knapperne er folder ud så man kan se hvilke der er at vælge imellem. Dette er specielt velegnet når der er mere end to lag vist. Se eksempel her.

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.

layers ​

  • Type: array
  • Default: all

Vælg hvilke lag, der skal vises i lagvælgeren. Det muligt at angive et array af id'er på udvalgte lag, der skal vises. Dette kræver, at der er angivet et id på lagene. For at vælge to specifikke lag angives det på denne måde: ["lag1","lag2"]. Som default vises alle lag, der har et id samt legendConfig.

excludeLayers ​

  • Type: array

Fravælg hvilke lag, der ikke skal vises i lagvælgeren. Det muligt at angive et array af id'er på udvalgte lag, der ikke skal vises. Dette kræver, at der er angivet et id på lagene. For at ekskludere to specifikke lag angives det på denne måde: ["lag1","lag2"]. Som default vises alle lag, der har legendConfig.

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 lagvælger",
  "className": "my-style",
  "html": "<i class='mdi mdi-format-list-bulleted-type'></i>"
}

Eksempler ​

Eksempler, der bruger denne komponent: