Skip to content

Komponenter

For at bruge Septima Widget skal du blot have en licens og indsætte følgende to linjer på din hjemmeside:

html
<div data-widget-url="https://widget.cdn.septima.dk/3.4.2/config/layer.json"></div>
<script src="https://widget.cdn.septima.dk/3.4.2/widgetconfig.js"></script>

Ved at tilføje data-widget-url er det muligt at hente konfigurationen fra en JSON-fil. Filen skal ligge på en hjemme side. Det kan være den samme hjemmeside, som denne widget skal vises, men det kan også være et andet sted.

Herunder er det muligt at læse mere om de enkelte komponenter. Vælg en komponent for at læse mere om hvad en konfigurationsfil kan indeholde. Se også en række eksempler her.

Konfiguration

Konfigurationen er opbygget så der først angives en overordnget funktion. Den funktion kan enten være map eller data. Den definerer om der skal være et kort eller ej. På den overordnede funktion er det muligt at angive forskellige informationer, herunder layer samt hvilke komponenter (controls), der skal være. Her er et eksemple:

json
{
  "map": {
    ...
    "layer": [...]
  },
  "controls": [...]
}

Se listen med komponenter herunder.

Sprog

Flere steder i Septima Widget findes der inbyggede tekster. Det er f.eks. tekster på zoomknapperne. Alle tekster vises pt. på dansk (da-DK), men det er også muligt at få dem vist dem på engelsk (en-US). Det kan gøres på to måder. Enten ved at angive locale direkte i konfigurationen som her:

json
{
  "locale": "en-US",
  "map": {
    ...
  }
}

eller ved at angive sproget på HTML elementet som her:

html
<div data-widget-locale="en-US" data-widget-url="..."></div>

Bemærk

Sprog i data, templates mv. oversættes ikke. Det anbefales derfor at have en konfiguration til hvert sprog.

Debug

Det er muligt at få nogle informationer om hvad der sker i Septima WIdget i browserens udviklingskonsol. Det er f.eks. informationer om hvad der hentes, hvad en template kaldes med, og meget mere. Det gøres ved at tilføje "debug": true til toppen af konfigurationen som her:

json
{
  "debug": true,
  "map": {
    ...
  }
}

eller ved at angive det direkte på HTML elementet som her:

html
<div data-widget-debug="true" data-widget-url="..."></div>

Tilgængelig komponenter