Komponenter

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

<div data-widget-url="https://widget.cdn.septima.dk/3.23.1/config/layer.json"></div>
<script src="https://widget.cdn.septima.dk/3.23.1/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 overordnet 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:

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

Se listen med komponenter herunder.

Dele af konfiguration fra fil

For både layers og controls, er det muligt at angive en URL til en JSON-fil hvor det pågældende layer eller control er defineret. Herved kan man benytte den samme konfiguration på tværs af flere widgets. Dette er specielt anvendeligt, hvis man altid bruger det samme baggrundskort, eller altid vil have den samme funktion med.

{
  "map": {
    ...
    "layer": [
      "https://septima.dk/layers/septima.json",
      ...
    ]
  },
  "controls": [
    {
      "search": "https://septima.dk/controls/search.json",
      ...
    }
  ]
}

URL'er og normal json kan selvfølgelig kombineres i listen, så man ikke behøver at have alle lag/controls liggende som selvstændige filer.

Sprog

Flere steder i Septima Widget findes der indbyggede 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:

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

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

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

Under hver komponent, er det muligt at angive translation for de valgte sprog. Dette kan også bruges til at ændre udvalgte oversættelser.

Bemærk

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

cssProperties

cssProperties giver mulighed for at tilpasse widgetens visuelle udtryk direkte i konfigurationen via CSS-variabler — uden at skrive en separat CSS-fil. Alle navne starter med --sw-.

Øverste niveau — gælder hele widgeten:

{
  "cssProperties": {
    "--sw-primary": "#c0392b",
    "--sw-font-family": "Arial, sans-serif",
    "--sw-border-radius": "4px"
  },
  "map": { ... }
}

Generelle CSS variabler som f.eks. --sw-primary, --sw-font-family, --sw-font-size og --sw-border-radius har effekt hele vejen igennem. Komponent-specifikke variabler er dokumenteret under den enkelte komponent.

cssPropertiesTarget

• Type: string
• Default: root

Angiver, hvor cssProperties sættes. Som default sættes de på html-elementet.

Mange variabler er afledt af andre, f.eks. er --sw-card-title-color sat til var(--sw-primary). En afledt variabel beregnes dér, hvor den er deklareret, som er html. Derfor sættes cssProperties som default på html, så de afledte variabler følger med. Værdierne gælder dermed hele siden og alle widgets på den. Har siden flere widgets med forskellige temaer, vil den sidste overskrive de øvrige.

Med "cssPropertiesTarget": "container" sættes cssProperties i stedet på widgettens container, så hver widget kan have sit eget tema. Afledte variabler følger så ikke med, hvis f.eks. --sw-primary ændres:

{
  "cssPropertiesTarget": "container",
  "cssProperties": {
    "--sw-primary": "#c0392b"
  },
  "map": { ... }
}

Herunder ses en liste med alle de generelle CSS variabler, der findes i Septima Widget samt deres default værdier.

Vis generelle CSS variabler

/*  ------------------------------------------------------------------------------------------------ */
/*  GENERAL                                                                                          */
/*	------------------------------------------------------------------------------------------------ */

:where(:root) {
  /*  ------------------------------------------------ */
  /*  COLORS                                           */
  --sw-primary: #017786;
  --sw-primary-rgb: 1 119 134;
  --sw-secondary: #ebf4f5;
  --sw-secondary-rgb: 235 244 245;
  --sw-light: #ecf0f1;
  --sw-light-rgb: 236 240 241;
  --sw-dark: #333333;
  --sw-dark-rgb: 51 51 51;
  --sw-white: #ffffff;
  --sw-white-rgb: 255 255 255;
  --sw-black: #000000;
  --sw-black-rgb: 0 0 0;
  --sw-muted: #757575;
  --sw-muted-rgb: 128 128 128;

  /*  ------------------------------------------------ */
  /*  COLORS STATUS                                    */
  --sw-status-red: #ee3f3f;
  --sw-status-red-rgb: 238 63 63;
  --sw-status-yellow: #ffb03c;
  --sw-status-yellow-rgb: 255 176 60;
  --sw-status-blue: #4c7afc;
  --sw-status-blue-rgb: 76 122 252;
  --sw-status-green: #27ae60;
  --sw-status-green-rgb: 39 174 96;

  /*  ------------------------------------------------ */
  /*  COLORS STATES                                    */
  --sw-border-color: #e8ecee;
  --sw-outline-color: rgb(0 0 0 / 3%);
  --sw-bg-color: var(--sw-white);
  --sw-bg-color-rgb: var(--sw-white-rgb);
  --sw-bg-hover-color: var(--sw-light);
  --sw-bg-hover-color-rgb: var(--sw-light-rgb);
  --sw-text-color: var(--sw-dark);
  --sw-text-color-rgb: var(--sw-dark-rgb);
  --sw-text-hover-color: var(--sw-primary-rgb);
  --sw-text-active-color: var(--sw-primary-rgb);
  --sw-link-color: var(--sw-primary);
  --sw-link-hover-color: var(--sw-primary);

  /*  ------------------------------------------------ */
  /*  FONTS & SIZES                                    */
  --sw-font-family: inherit;
  --sw-font-size: 13px;
  --sw-line-height: 1.3;

  /*  ------------------------------------------------ */
  /*  ICONS                                            */
  --sw-icon-size: 16px;
  --sw-icon-type: 'Icons Rounded';
  --sw-icon-type-filled: 'Icons Rounded Filled';
  --sw-icon-weight: 400;
  --sw-icon-color: inherit;

  /*  ------------------------------------------------ */
  /*  BORDER RADIUS                                    */
  --sw-border-radius: 8px;
  --sw-border-radius-sm: 2px;
  --sw-border-radius-md: 4px;
  --sw-border-radius-lg: 6px;

  /*  ------------------------------------------------ */
  /*  BOX SHADOW                                       */
  --sw-box-shadow: 0 0 6px rgba(0, 0, 0, 0);
  --sw-box-shadow-lg: 0 0 0 1px #0000000a,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a,0 24px 24px -12px #0000000a;

  /*  ------------------------------------------------ */
  /*  SPACERS                                          */
  --sw-spacer: 8px;
  --sw-spacer-xs: 4px;
  --sw-spacer-sm: 8px;
  --sw-spacer-md: 16px;
  --sw-spacer-lg: 24px;
  --sw-spacer-xl: 32px;
  --sw-spacer-xxl: 40px;
  --sw-spacer-xxxl: 48px;

  /*  ------------------------------------------------ */
  /*  BREAKPOINTS                                      */
  --sw-breakpoint-mobile: 460px;
}

/*  ------------------------------------------------------------------------------------------------ */
/*  BASE                                                                                             */
/*	------------------------------------------------------------------------------------------------ */

:where(:root) {
  /*  ------------------------------------------------ */
  /*  CONTAINER                                        */
  --sw-container-width: 100%;
  --sw-container-height: auto;

  /*  ------------------------------------------------ */
  /*  MAP                                              */
  --sw-map-width: 100%;
  --sw-map-height: 560px;
  --sw-map-fullscreen-height: 100%;

  /*  ------------------------------------------------ */
  /*  CONTROLS POSITIONS                               */
  --sw-controls-position-spacer: 8px;
  --sw-controls-position-spacer-sm: 8px;
  --sw-controls-position-spacer-md: 16px;
  --sw-controls-position-spacer-lg: 24px;
  --sw-controls-position-spacer-xl: 32px;
  --sw-controls-position-spacer-xxl: 40px;

  /*  ------------------------------------------------ */
  /*  OL CONTROLS & OL BUTTONS                         */
  --sw-ol-controls-bg-color: var(--sw-bg-color);
  --sw-ol-controls-border-radius: var(--sw-border-radius);
  --sw-ol-controls-border: 1px solid var(--sw-border-color);
  --sw-ol-controls-box-shadow: var(--sw-box-shadow);

  --sw-ol-controls-button-width: 30px;
  --sw-ol-controls-button-height: 30px;
  --sw-ol-controls-button-font-size: 20px;
  --sw-ol-controls-button-text-color: var(--sw-text-color);
  --sw-ol-controls-button-bg-color: var(--sw-bg-color);
  --sw-ol-controls-button-bg-color-hover: var(--sw-bg-hover-color);
  --sw-ol-controls-button-border-color: var(--sw-border-color);

  /*  ------------------------------------------------ */
  /*  BUTTONSCONTAINER & BUTTONS                       */
  --sw-buttoncontainer-bg-color: var(--sw-bg-color);
  --sw-buttoncontainer-border-radius: var(--sw-border-radius);
  --sw-buttoncontainer-border: 1px solid var(--sw-border-color);
  --sw-buttoncontainer-box-shadow: var(--sw-box-shadow);

  --sw-buttoncontainer-spacer-top: calc(var(--sw-spacer-xxl) * 2);
  --sw-buttoncontainer-spacer-bottom: auto;
  --sw-buttoncontainer-spacer-left: var(--sw-spacer-sm);
  --sw-buttoncontainer-spacer-right: auto;

  --sw-buttoncontainer-button-width: 30px;
  --sw-buttoncontainer-button-height: 30px;
  --sw-buttoncontainer-button-bg-color: var(--sw-bg-color);
  --sw-buttoncontainer-button-text-color: var(--sw-text-color);
  --sw-buttoncontainer-button-hover-bg-color: var(--sw-bg-hover-color);
  --sw-buttoncontainer-button-active-bg-color: var(--sw-bg-hover-color);

  --sw-buttoncontainer-button-hover-text-color: var(--sw-text-hover-color);
  --sw-buttoncontainer-button-active-text-color: var(--sw-text-active-color);
  --sw-buttoncontainer-button-font-size: calc(var(--sw-icon-size) * 1.125);
  --sw-buttoncontainer-button-line-height: var(--sw-line-height);
  --sw-buttoncontainer-button-border-radius: 0px;
  --sw-buttoncontainer-button-border: 1px solid var(--sw-border-color);
  
  /*  ------------------------------------------------ */
  /*  ACTION BUTTONS                                   */
  --sw-action-button-font-family: var(--sw-font-family);
  --sw-action-button-font-size: var(--sw-font-size);
  --sw-action-button-border-radius: calc(var(--sw-border-radius) / 1.75);
  --sw-action-button-border-color: var(--sw-border-color);
  --sw-action-button-bg-color: transparent;
  --sw-action-button-text-color: var(--sw-text-color);
  --sw-action-button-padding: .125em .125em;
  --sw-action-button-icon-size: var(--sw-icon-size);

  /*  ------------------------------------------------ */
  /*  COPYRIGHT                                        */
  --sw-map-copyright-bg-color: rgba(var(--sw-bg-color-rgb), 0.6);
  --sw-map-copyright-font-size: 10px;
  --sw-map-copyright-link-text-color: var(--sw-link-color);
  --sw-map-copyright-link-text-hover-color: var(--sw-link-hover-color);
  --sw-map-copyright-padding: 3px 5px;
  --sw-map-copyright-spacer-top: auto;
  --sw-map-copyright-spacer-bottom: 0px;
  --sw-map-copyright-spacer-left: auto;
  --sw-map-copyright-spacer-right: 0px;
}

/*  ------------------------------------------------------------------------------------------------ */
/*  INPUTS                                                                                           */
/*	------------------------------------------------------------------------------------------------ */

:where(:root) {
  
  /*  ------------------------------------------------ */
  /*  LABEL                                            */
  --sw-input-label-font-size: calc(var(--sw-font-size) / 1.1);;
  --sw-input-label-line-height: var(--sw-line-height);
  --sw-input-label-color: var(--sw-text-color);

  /*  ------------------------------------------------ */
  /*  SLIDER/RANGE                                     */
  --sw-input-slider-height: 0.25em;
  --sw-input-slider-bg-color: var(--sw-border-color);
  --sw-input-slider-border: 1px solid rgba(0 0 0 / 5%);
  --sw-input-slider-border-radius: 1em;
  --sw-input-slider-thumb-bg-color: var(--sw-primary);
  --sw-input-slider-thumb-border-radius: 50%;
  --sw-input-slider-thumb-width: 1.15rem;
  --sw-input-slider-thumb-height: 1.15rem;
  --sw-input-slider-thumb-active-bg-color: var(--sw-primary);
  --sw-input-slider-padding: 0.5em 1em 1em 1em;
  --sw-input-slider-gap: 0.5em;
  --sw-input-slider-label-bg-color: var(--sw-primary);
  --sw-input-slider-label-text-color: var(--sw-white);
  --sw-input-slider-label-padding: .25em .325em;
  --sw-input-slider-label-border-radius: 0.175em;
  --sw-input-slider-value-font-size: 0.75em;  
  --sw-input-slider-value-font-weight: 500;

  /*  ------------------------------------------------ */
  /*  CHECKBOX & RADIO                                 */
  --sw-input-toggle-width: 0.8rem;
  --sw-input-toggle-height: 0.8rem;
  --sw-input-toggle-bg-color: var(--sw-white);
  --sw-input-toggle-border: 0.075em solid rgb(0 0 0 / 25%);
  --sw-input-toggle-border-radius: 0.2em;
  --sw-input-toggle-focus-border-color: var(--sw-primary);
  --sw-input-toggle-active-border-color: var(--sw-primary);
  --sw-input-toggle-active-bg-color: var(--sw-primary);
  
}

/*  ------------------------------------------------------------------------------------------------ */
/*  CONTROL HEADER                                                                                   */
/*	------------------------------------------------------------------------------------------------ */

:where(:root) {
  --sw-control-header-bg-color: transparent;
  --sw-control-header-gap: 0.75em;
  --sw-control-header-padding: 0.625em 0.625em 0.625em 1em;
  --sw-control-header-border-color: var(--sw-border-color);
  --sw-control-header-border-radius: var(--sw-border-radius);
  --sw-control-header-border: 1px solid var(--sw-border-color);
  --sw-control-header-title-font-size: calc(var(--sw-font-size) * 1.1);
  --sw-control-header-title-font-weight: 500;
  --sw-control-header-title-color: var(--sw-text-color);
  --sw-control-header-title-icon-size: calc(var(--sw-icon-size) + 0.15em);
  --sw-control-header-title-icon-type: var(--sw-icon-type);
  --sw-control-header-title-text-align: left;
}

/*  ------------------------------------------------------------------------------------------------ */
/*  COMPONENTS                                                                                       */
/*	------------------------------------------------------------------------------------------------ */

:where(:root) {
  /*  ------------------------------------------------ */
  /*  POP-UP                                           */
  --sw-map-popup-max-width: 250px;
  --sw-map-popup-min-width: 95px;
  --sw-map-popup-max-height: 460px;
  --sw-map-popup-bg-color: var(--sw-bg-color);
  --sw-map-popup-border: 0px solid var(--sw-border-color);
  --sw-map-popup-border-radius: var(--sw-border-radius);
  --sw-map-popup-shadow: 0 0.325em 0.75em #0003;
  --sw-map-popup-bottom: 12px;
  --sw-map-popup-left: -50px;
  --sw-map-popup-arrow-border-color: var(--sw-bg-color);
  --sw-map-popup-arrow-border-width: 10px;

  /*  ------------------------------------------------ */
  /*  POP-UP HOVER                                     */
  --sw-map-popup-hover-max-width: 200px;
  --sw-map-popup-hover-padding: 3px 8px;
  --sw-map-popup-hover-color: var(--sw-white);
  --sw-map-popup-hover-text-align: center;
  --sw-map-popup-hover-bg-color: var(--sw-dark);
  --sw-map-popup-hover-border-radius: 4px;
  --sw-map-popup-hover-box-shadow: 0 0.325em 0.75em #0003;
  --sw-map-popup-hover-font-family: inherit;
  --sw-map-popup-hover-font-size: var(--sw-font-size);
  --sw-map-popup-hover-font-style: normal;
  --sw-map-popup-hover-line-height: var(--sw-line-height);

  /*  ------------------------------------------------ */
  /*  HOVERBOX                                         */
  --sw-hoverbox-font-size: 16px;
  --sw-hoverbox-bg-color: var(--sw-white);
  --sw-hoverbox-spacer: var(--sw-spacer-sm);
  --sw-hoverbox-border: 1px solid var(--sw-border-color);
  --sw-hoverbox-border-radius: var(--sw-border-radius);
  --sw-hoverbox-box-shadow: var(--sw-box-shadow);
  --sw-hoverbox-title-color: var(--sw-text-color);
  --sw-hoverbox-title-bg-color: var(--sw-light);
  --sw-hoverbox-title-padding: 8px 32px 8px 12px;
  --sw-hoverbox-title-margin: 0;
  --sw-hoverbox-title-font-size: calc(var(--sw-font-size) * 1.1);
  --sw-hoverbox-title-font-weight: 500;
  --sw-hoverbox-title-line-height: var(--sw-line-height);
  --sw-hoverbox-title-border-radius: var(--sw-border-radius) var(--sw-border-radius) 0 0;
  --sw-hoverbox-sub-bg-color: var(--sw-bg-color);
  --sw-hoverbox-sub-color: var(--sw-text-color);
  --sw-hoverbox-sub-font-size: var(--sw-font-size);
  --sw-hoverbox-sub-line-height: 20px;
  --sw-hoverbox-sub-padding: 6px 6px;
  --sw-hoverbox-sub-border-radius: var(--sw-border-radius);
  --sw-hoverbox-subheader-line-height: 14px;
  --sw-hoverbox-subheader-font-style: italic;
  --sw-hoverbox-subheader-padding: 2px 16px;
  --sw-hoverbox-subdiv-margin: 0px;
  --sw-hoverbox-subdiv-padding: 0px 8px;
  --sw-hoverbox-slick-slider-padding: 0;
  --sw-hoverbox-slick-slider-spacer: var(--sw-spacer-sm);
  --sw-hoverbox-img-position: 8px center;
  --sw-hoverbox-img-bg-size: 18px auto;
  --sw-hoverbox-img-height: auto;
  --sw-hoverbox-img-line-height: 36px;
  --sw-hoverbox-img-padding: 0 0 0 32px;
  --sw-hoverbox-img-svg-icon-width: 24px;
  --sw-hoverbox-img-svg-icon-height: 24px;
  --sw-hoverbox-img-svg-icon-left-spacer: 4px;
  --sw-hoverbox-img-svg-icon-top-spacer: 6px;
  --sw-hoverbox-closebutton-bg: transparent;
  --sw-hoverbox-closebutton-font-size: 18px;
  --sw-hoverbox-closebutton-line-height: 20px;
  --sw-hoverbox-closebutton-padding: 6px;
  --sw-hoverbox-closebutton-border: none;
  --sw-hoverbox-closebutton-spacer-top: 0;
  --sw-hoverbox-closebutton-spacer-right: 0;
  --sw-hoverbox-closebutton-hover-color: var(--sw-text-hover-color);
  --sw-hoverbox-expand-float: right;
  --sw-hoverbox-expand-margin: -1px 4px 0;
  --sw-hoverbox-expand-font-size: 20px;

  /*  ------------------------------------------------ */
  /*  ROUTEBOX                                         */
  --sw-routebox-bg-color: var(--sw-bg-color);
  --sw-routebox-font-size: var(--sw-font-size);
  --sw-routebox-border: 0px solid var(--sw-border-color);
  --sw-routebox-border-radius: var(--sw-border-radius);
  --sw-routebox-outline: 1px solid var(--sw-outline-color);
  --sw-routebox-route-padding: 0 12px;
  --sw-routebox-route-more-padding: 0 5px 2px 0;
  --sw-routebox-route-more-margin-top: 0;
  --sw-routebox-route-more-height: auto;
  --sw-routebox-route-more-line-height: auto;
  --sw-routebox-routeprofile-width: 42px;
  --sw-routebox-routeprofile-height: 36px;
  --sw-routebox-routeprofile-font-size: 24px;
  --sw-routebox-routeprofile-line-height: 36px;
  --sw-routebox-routeprofile-color: #333;
  --sw-routebox-routeprofile-bg-color: var(--sw-light);
  --sw-routebox-routeprofile-hover-bg-color: var(--sw-bg-hover-color);
  --sw-routebox-routeprofile-border-bottom: 2px solid var(--sw-primary);
  --sw-routebox-spacer-top: auto;
  --sw-routebox-spacer-right: var(--sw-spacer-sm);
  --sw-routebox-spacer-bottom: var(--sw-spacer-lg);

  /*  ------------------------------------------------ */
  /*  ROUTING                                          */
  --sw-routing-bg-color: var(--sw-bg-color);
  --sw-routing-header-color: var(--sw-text-color);
  --sw-routing-header-bg-color: var(--sw-bg-color);
  --sw-routing-header-border-bottom: 1px solid var(--sw-border-color);
  --sw-routing-header-height: 50px;
  --sw-routing-header-padding: 0 0 0 16px;
  --sw-routing-header-font-size: 18px;
  --sw-routing-header-font-weight: normal;
  --sw-routing-header-line-height: 50px;
  --sw-routing-time-font-size: 1.25em;
  --sw-routing-distance-font-size: 13px;
  --sw-routing-distance-padding: 0 14px;
  --sw-routing-clear-padding: 1em;
  --sw-routing-clear-bg: transparent;
  --sw-routing-clear-hover-bg: var(--sw-bg-hover-color);
  --sw-routing-clear-font-size: 18px;
  --sw-routing-subheader-bg-color: var(--sw-bg-color);
  --sw-routing-subheader-font-size: 12px;
  --sw-routing-subheader-font-weight: normal;
  --sw-routing-subheader-font-style: italic;
  --sw-routing-subheader-color: #666666;
  --sw-routing-subheader-padding: 6px 16px;
  --sw-routing-subheader-border-top: 1px solid var(--sw-border-color);
  --sw-routing-list-max-height: min(260px, calc(var(--sw-map-height) - var(--sw-routing-profile-list-item-height) - var(--sw-routing-header-height) - (var(--sw-spacer) * 6)));
  --sw-routing-list-bg-color: var(--sw-bg-color);
  --sw-routing-list-font-size: var(--sw-font-size);
  --sw-routing-list-item-height: 36px;
  --sw-routing-list-item-line-height: 36px;
  --sw-routing-list-item-padding: 0px;
  --sw-routing-list-item-text-color: var(--sw-text-color);
  --sw-routing-list-item-border-bottom: 1px solid var(--sw-border-color);
  --sw-routing-list-item-new-widget-bg-color: rgb(var(--sw-primary-rgb) / 6%);
  --sw-routing-list-item-widget-selected-bg-color: rgb(var(--sw-primary-rgb) / 6%);
  --sw-routing-list-item-icon-size: calc(var(--sw-icon-size) * 1.15);
  --sw-routing-list-item-icon-padding: 8px 6px 8px 16px;
  --sw-routing-list-item-icon-color: var(--sw-text-color-rgb);
  --sw-routing-list-item-icon-line-height: 32px;
  --sw-routing-list-item-icon-margin-top: 0px;
  --sw-routing-list-item-icon-close-size: 18px;
  --sw-routing-list-item-icon-close-padding: 8px;
  --sw-routing-list-item-icon-close-hover-color: var(--sw-bg-hover-color);
  --sw-routing-profile-border-top: 1px solid var(--sw-border-color);
  --sw-routing-profile-bg-color: var(--sw-bg-color);
  --sw-routing-profile-font-size: var(--sw-font-size);
  --sw-routing-profile-list-item-width: 25%;
  --sw-routing-profile-list-item-display: inline-flex;
  --sw-routing-profile-list-item-text-align: center;
  --sw-routing-profile-list-item-height: 42px;
  --sw-routing-profile-list-item-line-height: 42px;
  --sw-routing-profile-list-item-font-size: 24px;
  --sw-routing-profile-list-item-color: #666666;
  --sw-routing-profile-list-item-padding-top: 0;
  --sw-routing-profile-list-item-hover-bg-color: var(--sw-bg-hover-color);
  --sw-routing-profile-list-item-active-color: var(--sw-primary);
  --sw-routing-profile-list-item-active-bg-color: var(--sw-bg-color);
  --sw-routing-profile-list-item-active-border-bottom: 3px solid var(--sw-primary);

  /*  ------------------------------------------------ */
  /*  SEARCH                                           */
  --sw-search-input-max-width: 380px;
  --sw-search-input-height: 42px;
  --sw-search-bg-color: var(--sw-bg-color);
  --sw-search-border: 1px solid var(--sw-border-color);
  --sw-search-border-radius: var(--sw-border-radius);
  --sw-search-box-shadow: var(--sw-box-shadow);
  --sw-search-active-box-shadow: var(--sw-box-shadow);
  --sw-search-inner-padding-left: 10px;
  --sw-search-inner-height: var(--sw-search-input-height);
  --sw-search-inner-line-height: var(--sw-search-input-height);
  --sw-search-spacer-top: var(--sw-spacer-sm);
  --sw-search-spacer-left: calc(var(--sw-spacer-sm) * 6);
  --sw-search-icon-filter: unset;
  --sw-search-text-color: var(--sw-text-color);
  --sw-search-text-active-color: var(--sw-text-color);
  --sw-search-icon-filter: unset;
  --sw-search-text-color: var(--sw-text-color);
  --sw-search-text-active-color: var(--sw-text-color);
  --sw-search-target-text-color: var(--sw-white);
  --sw-search-target-bg-color: var(--sw-primary);
  --sw-search-target-font-size: var(--sw-font-size);
  --sw-search-target-font-weight: normal;
  --sw-search-target-padding: 4px 4px 4px 8px;
  --sw-search-target-border-radius: calc(var(--sw-border-radius) / 3);
  --sw-search-target-close-btn-padding: 4px 0 4px 24px;
  --sw-search-results-max-height: min(400px, calc(var(--sw-map-height) - var(--sw-search-input-height) - (var(--sw-spacer) * 2.5)));
  --sw-search-result-hightlight-bg-color: var(--sw-bg-hover-color);
  --sw-search-result-hightlight-border-top: 1px solid var(--sw-border-color);
  --sw-search-button-width: 32px;
  --sw-search-button-height: 32px;
  --sw-search-button-font-size: 1.4em;
  --sw-search-button-line-height: 32px;
  --sw-search-button-bg-color: var(--sw-bg-color);
  --sw-search-button-border: none;
  --sw-search-button-padding: 0px;
  --sw-search-close-button-size: 18px;
  --sw-search-list-item-padding: 12px;
  --sw-search-list-border: 1px solid var(--sw-border-color);
  --sw-search-detailsview-border-radius: var(--sw-border-radius);

  /*  ------------------------------------------------ */
  /*  FILTER                                           */
  --sw-filter-width: 240px;
  --sw-filter-max-height: calc(var(--sw-map-height) - (var(--sw-spacer) * 4.85));
  --sw-filter-bg-color: var(--sw-bg-color);
  --sw-filter-font-size: var(--sw-font-size);
  --sw-filter-padding: 0;
  --sw-filter-border: 1px solid var(--sw-border-color);
  --sw-filter-border-radius: var(--sw-border-radius);
  --sw-filter-box-shadow: var(--sw-box-shadow);
  --sw-filter-spacer-right: var(--sw-spacer-sm);
  --sw-filter-spacer-bottom: calc(var(--sw-spacer) * 3.2);
  --sw-filter-slider-width: auto;
  --sw-filter-slider-padding: 8px 12px;
  --sw-filter-slider-label-font-size: var(--sw-font-size);
  --sw-filter-slider-label-font-weight: 500;
  --sw-filter-slider-bar-bg-color: var(--sw-primary);
  --sw-filter-slider-bar-border-color: var(--sw-primary);
  --sw-filter-slider-handle-width: 24px;
  --sw-filter-slider-handle-height: 24px;
  --sw-filter-slider-handle-spacer-top: 26px;
  --sw-filter-slider-handle-bg-color: var(--sw-bg-color);
  --sw-filter-slider-handle-border: 4px solid var(--sw-primary);
  --sw-filter-slider-handle-box-shadow: 0 1px 3px rgb(0 0 0 / 30%);

  --sw-filter-label-font-size: var(--sw-font-size);
  --sw-filter-label-font-weight: 500;
  --sw-filter-label-line-height: var(--sw-line-height);
  --sw-filter-label-padding: 8px 12px;
  --sw-filter-selectlist-margin: 0;
  --sw-filter-selectlist-padding: 0;
  --sw-filter-selectlist-item-bg-hover: var(--sw-bg-hover-color);
  --sw-filter-selectlist-item-bg-position: 10px 8px;
  --sw-filter-selectlist-item-bg-size: 16px;
  --sw-filter-selectlist-item-font-size: var(--sw-font-size);
  --sw-filter-selectlist-item-line-height: var(--sw-line-height);
  --sw-filter-selectlist-item-padding: 8px 12px 8px 34px;
  --sw-filter-selectlist-item-border-radius: calc(var(--sw-border-radius) / 2);
  --sw-filter-selectlist-select-all-border-color: var(--sw-border-color);

  --sw-filter-multiselect-margin: 0;
  --sw-filter-multiselect-padding: 0.5rem 0.5rem;

  --sw-filter-multiselect-choice-height: 32px;
  --sw-filter-multiselect-choice-color: var(--sw-text-color);
  --sw-filter-multiselect-choice-bg-color: #fff;
  --sw-filter-multiselect-choice-font-size: var(--sw-font-size);
  --sw-filter-multiselect-choice-line-height: 32px;
  --sw-filter-multiselect-choice-border: 1px solid var(--sw-border-color);
  --sw-filter-multiselect-choice-border-radius: calc(var(--sw-border-radius) / 2);
  --sw-filter-multiselect-choice-padding: 0;

  --sw-filter-multiselect-drop-color: var(--sw-text-color);
  --sw-filter-multiselect-drop-bg-color: #fff;
  --sw-filter-multiselect-drop-border: 1px solid var(--sw-border-color);
  --sw-filter-multiselect-drop-border-radius: calc(var(--sw-border-radius) / 2);
  --sw-filter-multiselect-drop-list-item-padding: 0.325rem 8px;
  --sw-filter-multiselect-drop-list-item-label-font-size: var(--sw-font-size);
  --sw-filter-multiselect-drop-list-item-label-line-height: var(--sw-line-height);
  --sw-filter-multiselect-drop-list-item-label-font-weight: 400;
  --sw-filter-multiselect-drop-list-item-label-padding: 0 0 0 1.25rem;
  --sw-filter-multiselect-drop-list-item-label-display: block;
  --sw-filter-multiselect-item-selected-bg-color: var(--sw-light);
  --sw-filter-multiselect-item-selected-text-color: var(--sw-primary);

  --sw-filter-button-font-size: 13px;
  --sw-filter-button-font-weight: 400;
  --sw-filter-button-line-height: var(--sw-line-height);
  --sw-filter-button-text-color: var(--sw-text-color);
  --sw-filter-button-bg-color: transparent;
  --sw-filter-button-border-color: var(--sw-border-color);
  --sw-filter-button-border-radius: calc(var(--sw-border-radius) / 2);
  --sw-filter-button-padding: 6px 12px;
  --sw-filter-button-margin: 6px;
  --sw-filter-button-hover-text-color: var(--sw-primary);
  --sw-filter-button-hover-bg-color: var(--sw-light);
  --sw-filter-button-active-text-color: var(--sw-primary);
  --sw-filter-button-active-bg-color: var(--sw-light);
  --sw-filter-button-active-border-color: var(--sw-border-color);

  /*  ------------------------------------------------ */
  /*  CONFLICT                                         */
  --sw-conflict-height: auto;
  --sw-conflict-bg-color: var(--sw-bg-color);
  --sw-conflict-padding: 12px;
  --sw-conflict-box-shadow: var(--sw-box-shadow);
  --sw-conflict-border-radius: var(--sw-border-radius);
  --sw-conflict-spacer-left: var(--sw-spacer-sm);
  --sw-conflict-spacer-bottom: var(--sw-spacer-sm);

  /*  ------------------------------------------------ */
  /*  MEASURE                                          */
  --sw-measure-bg-color: var(--sw-bg-color);
  --sw-measure-active-bg-color: #eee;
  --sw-measure-padding: 6px 8px;
  --sw-measure-font-size: var(--sw-font-size);
  --sw-measure-spacer-top: auto;
  --sw-measure-spacer-bottom: var(--sw-spacer-xl);
  --sw-measure-border-radius: var(--sw-border-radius);

  /*  ------------------------------------------------ */
  /*  PRINT POPUP                                      */
  --sw-print-popup-label-color: var(--sw-dark);
  --sw-print-popup-button-padding: 6px 12px;
  --sw-print-popup-button-bg-color: var(--sw-primary);
  --sw-print-popup-button-text-color: var(--sw-white);
  --sw-print-popup-button-border-radius: calc(var(--sw-border-radius) / 2);
  --sw-print-popup-button-font-family: var(--sw-font-family);

  /*  ------------------------------------------------ */
  /*  TABLE                                            */
  --sw-table-width: 100%;
  --sw-table-height: auto;
  --sw-table-fullscreen-height: var(--sw-map-fullscreen-height);
  --sw-table-font-size: var(--sw-font-size);
  --sw-table-bg-color: transparent;
  --sw-table-border-color: var(--sw-border-color);

  /*  ------------------------------------------------ */
  /*  TABLE AS PANEL                                   */
  --sw-table-panel-height: var(--sw-map-height);
  --sw-table-panel-bg-color: var(--sw-white);
  --sw-table-panel-box-shadow: var(--sw-box-shadow); 
  --sw-table-panel-flex: 1 0 340px;
  --sw-table-panel-list-gap: 0;
  --sw-table-panel-list-padding: 0;
  --sw-table-panel-row-hover-text-color: var(--sw-primary);
  --sw-table-panel-row-hover-bg-color: var(--sw-bg-hover-color);
  --sw-table-list-panel-bg-color: var(--sw-bg-color);

  /*  ------------------------------------------------ */
  /*  TABLE LIST                                       */
  --sw-table-ul-margin: 0;
  --sw-table-ul-padding: 0;
  --sw-table-list-max-height: 400px;
  --sw-table-row-font-size: var(--sw-font-size);
  --sw-table-row-margin: 0px;
  --sw-table-row-padding: 6px 8px;
  --sw-table-row-line-height: var(--sw-line-height);
  --sw-table-row-bg-color: var(--sw-bg-color);
  --sw-table-row-text-color: var(--sw-text-color);
  --sw-table-row-hover-text-color: var(--sw-primary);
  --sw-table-row-div-padding: 5px;
  --sw-table-row-border: 1px solid var(--sw-border-color);
  --sw-table-row-border-left: 6px solid var(--sw-border-color);
  --sw-table-row-border-top: 1px solid var(--sw-border-color);
  --sw-table-row-float: left;
  --sw-table-row-width: 100%;
  --sw-table-row-circular-empty: 1px solid #ddd;
  --sw-table-row-circular-img-width: 40px;
  --sw-table-row-circular-img-height: 40px;
  --sw-table-row-active-color: var(--sw-light);
  --sw-table-row-active-border: 1px solid var(--sw-primary);
  --sw-table-row-active-border-left: 6px solid var(--sw-primary);
  --sw-table-row-active-hover-border: 1px solid var(--sw-primary);
  --sw-table-row-active-hover-border-left: 6px solid var(--sw-primary);
  --sw-table-row-active-hoverbox-sub-padding-left: 40px;
  --sw-table-row-focus-outline: none;
  --sw-table-row-focus-margin: 0;
  --sw-table-row-focus-border: 1px solid var(--sw-border-color);
  --sw-table-row-focus-border-left: 6px solid var(--sw-border-color);
  --sw-table-ul-listlink-line-height: 7px;
  --sw-table-ul-listlink-padding: 5px 0;
  --sw-table-ul-listtitle-margin-left: 50px;
  --sw-table-ul-listtitle-line-height: 7px;
  --sw-table-ul-listtitle-padding: 0px;
  --sw-table-ul-listtitle-font-weight: bold;
  --sw-table-ul-listtitle-font-size: inherit;
  --sw-table-row-hover-border: 1px solid var(--sw-border-color);
  --sw-table-row-hover-border-left: 1px solid var(--sw-border-color);
  --sw-table-row-hover-color: inherit;
  --sw-table-row-hover-bg-color: var(--sw-bg-hover-color);
  --sw-table-emptytext-height: auto;
  --sw-table-emptytext-padding: 1rem;
  --sw-table-emptytext-bg-color: #fff;
  --sw-table-emptytext-color: var(--sw-text-color);

  /*  ------------------------------------------------ */
  /*  TABLE AS TABLE                                   */
  --sw-table-line-height: var(--sw-line-height);
  --sw-table-text-color: var(--sw-text-color);
  --sw-table-header-bg-color: var(--sw-light);
  --sw-table-header-text-color: var(--sw-text-color);
  --sw-table-row-border-width: 1px;
  --sw-table-row-border-color: var(--sw-border-color);

  /*  ------------------------------------------------ */
  /*  SLIDER                                           */
  --sw-table-irs--round-handle-border: 4px solid var(--sw-primary);

  /*  ------------------------------------------------ */
  /*  STORY                                            */
  --sw-story-margin-top: 20px;
  --sw-story-position: relative;
  --sw-story-font-weight: normal;
  --sw-story-line-height: 140%;
  --sw-story-background: #fff;
  --sw-story-border: 1px solid var(--sw-border-color);
  --sw-story-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  --sw-story-height: 550px;
  --sw-story-overflow: hidden;
  --sw-story-border-radius: 5px;
  --sw-story-hoverbox-title-font-weight: 600;
  --sw-story-hoverbox-title-line-height: 25px;
  --sw-story-hoverbox-title-text-transform: uppercase;
  --sw-story-hoverbox-title-padding: 20px 96px 20px 26px;
  --sw-story-hoverbox-sub-padding: 0;
  --sw-story-hoverbox-sub-font-size: 15px;
  --sw-story-hoverbox-sub-font-weight: 200;
  --sw-story-hoverbox-sub-div-padding: 0 26px;
  --sw-story-hoverbox-sub-line-height: 21px;
  --sw-story-buttons-button-width: 36px;
  --sw-story-buttons-button-height: 36px;
  --sw-story-buttons-button-margin: 14px 0;
  --sw-story-buttons-button-background-color: var(--sw-primary);
  --sw-story-buttons-button-opacity: 1;
  --sw-story-buttons-button-transition: opacity 0.2s ease;
  --sw-story-buttons-button-border: none;
  --sw-story-img-width: 100%;
  --sw-story-img-height: 170px;
  --sw-story-img-display: block;
  --sw-story-img-object-fit: cover;
  --sw-story-img-margin-bottom: 20px;
  --sw-story-p-margin: 14px 0;
  --sw-story-p-font-size: 15px;
  --sw-story-tekst-max-height: 106px;
  --sw-story-tekst-overflow-y: auto;
  --sw-story-tekst-color: var(--sw-text-color);

  /*  ------------------------------------------------ */
  /*  CARD                                             */
  --sw-card-flex-direction: column;
  --sw-card-bg-color: var(--sw-white);
  --sw-card-text-color: var(--sw-text-color);
  --sw-card-border-radius: var(--sw-border-radius);
  --sw-card-box-shadow: var(--sw-box-shadow);
  --sw-card-font-size: var(--sw-font-size);
  --sw-card-line-height: var(--sw-line-height);
  --sw-card-icon-size: 1.125rem;
  --sw-card-link-color: var(--sw-link-color);
  --sw-card-button-width: auto;
  --sw-card-button-padding: 0.5rem 1rem;
  --sw-card-button-border-radius: var(--sw-border-radius);
  --sw-card-button-text-color: var(--sw-light);
  --sw-card-button-bg-color: var(--sw-primary);
  --sw-card-header-icon-size: inherit;
  --sw-card-header-icon-bg-color: var(--sw-light);
  --sw-card-expand-icon-size: 1.5em;
  --sw-card-body-padding: 1.25rem 1.25rem;
  --sw-card-body-gap: 0.375rem;
  --sw-card-body-flex-direction: column;
  --sw-card-image-bg-color: var(--sw-light);
  --sw-card-title-color: var(--sw-primary);
  --sw-card-title-font-size: 1.25em;
  --sw-card-title-line-height: var(--sw-line-height);
  --sw-card-title-font-weight: 600;
  --sw-card-info-font-size: var(--sw-font-size);
  --sw-card-info-line-height: var(--sw-line-height);
  --sw-card-info-flex-direction: column;
  --sw-card-info-item-padding: 0;
  --sw-card-info-item-icon-size: var(--sw-icon-size);
  --sw-card-info-item-icon-color: var(--sw-primary);
  --sw-card-info-item-icon-padding: 0.125rem 0;
  --sw-card-info-item-gap: 0.5rem;
  --sw-card-info-item-action-padding: 0;
  --sw-card-icon-link-size: 1.5rem;
  --sw-card-icon-link-color: var(--sw-card-title-color);

  /*  ------------------------------------------------ */
  /*  LAYERSWITCH                                      */
  --sw-layerswitch-width: auto;
  --sw-layerswitch-font-size: var(--sw-font-size);
  --sw-layerswitch-line-height: var(--sw-line-height);
  --sw-layerswitch-text-color: var(--sw-text-color);
  --sw-layerswitch-bg-color: var(--sw-bg-color);
  --sw-layerswitch-bg-color: transparent;
  --sw-layerswitch-border: 1px solid var(--sw-border-color);
  --sw-layerswitch-border-radius: var(--sw-border-radius);
  --sw-layerswitch-box-shadow: var(--sw-box-shadow);
  --sw-layerswitch-spacer-left: var(--sw-spacer-sm);
  --sw-layerswitch-spacer-bottom: var(--sw-spacer-sm);
  --sw-layerswitch-listcontainer-max-height: min(400px, calc(var(--sw-map-height) - var(--sw-search-input-height) - (var(--sw-spacer) * 2)));
  --sw-layerswitch-listcontainer-bg-color: var(--sw-bg-color);
  --sw-layerswitch-listcontainer-border-bottom: 1px solid var(--sw-border-color);
  --sw-layerswitch-buttoncontainer-bg-color: var(--sw-bg-color);
  --sw-layerswitch-buttoncontainer-border-radius: var(--sw-border-radius);
  --sw-layerswitch-buttoncontainer-padding: 6px 8px;
  --sw-layerswitch-buttoncontainer-margin-top: 0;
  --sw-layerswitch-buttoncontainer-margin-bottom: 2px;
  --sw-layerswitch-select-all-bg-color: transparent;
  --sw-layerswitch-select-all-border-bottom: 0px solid var(--sw-border-color);
  --sw-layerswitch-select-all-font-size: var(--sw-font-size);
  --sw-layerswitch-select-all-font-weight: 500;
  --sw-layerswitch-select-all-padding: 0 10px;
  --sw-layerswitch-select-all-icon-size: 16px;
  --sw-layerswitch-select-all-text-font-size: 16px;
  --sw-layerswitch-select-all-text-padding-left: 6px;
  --sw-layerswitch-layer-item-hover-bg-color: var(--sw-bg-hover-color);
  --sw-layerswitch-layer-item-hover-text-color: var(--sw-text-hover-color);
  --sw-layerswitch-layer-item-padding: 8px 12px 8px 34px;
  --sw-layerswitch-layer-item-border-radius: 0;
  --sw-layerswitch-layer-item-border-top: 0px solid var(--sw-border-color);
  --sw-layerswitch-layer-item-border-bottom: 0px solid var(--sw-border-color);
  --sw-layerswitch-layer-item-span-margin-top: 0;
  --sw-layerswitch-layer-item-span-margin-left: -24px;
  --sw-layerswitch-layer-item-span-font-size: 16px;
  --sw-layerswitch-layer-item-span-color: var(--sw-text-color);
  --sw-layerswitch-layer-item-span-is-disabled-padding-left: 10px;
  --sw-layerswitch-layer-item-icon-width: 24px;
  --sw-layerswitch-layer-item-icon-height: 24px;
  --sw-layerswitch-layer-item-icon-margin-top: -3px;
  --sw-layerswitch-layer-item-icon-padding-left: 32px;
  --sw-layerswitch-layer-item-style-width: 22px;
  --sw-layerswitch-layer-item-style-height: 16px;
  --sw-layerswitch-layer-item-style-margin-top: 0px;
  --sw-layerswitch-layer-item-style-margin-left: 2px;
  --sw-layerswitch-layer-item-style-margin-right: 2px;
  --sw-layerswitch-layer-item-inner-padding: 0;
  --sw-layerswitch-layer-item-inner-line-height: var(--sw-line-height);
  --sw-layerswitch-layer-item-inner-font-size: var(--sw-font-size);
  --sw-layerswitch-layer-item-inner-font-weight: 500;
  --sw-layerswitch-layercount-padding: 0 0 0 12px;
  --sw-layerswitch-layercount-font-size: 11px;
  --sw-layerswitch-group-bg-color: none;
  --sw-layerswitch-group-padding: 0px 0px;
  --sw-layerswitch-group-border-top: 1px solid var(--sw-border-color);
  --sw-layerswitch-groupheader-font-size: var(--sw-font-size);
  --sw-layerswitch-groupheader-font-weight: inherit;
  --sw-layerswitch-groupheader-text-color: var(--sw-text-color);
  --sw-layerswitch-groupheader-bg-color: var(--sw-bg-color);
  --sw-layerswitch-groupheader-border-bottom: 0px solid var(--sw-border-color);
  --sw-layerswitch-groupheader-padding: 6px 12px;
  --sw-layerswitch-groupheader-icon-size: 16px;
  --sw-layerswitch-groupheader-icon-line-height: var(--sw-line-height);
  --sw-layerswitch-headerbutton-width: 100%;
  --sw-layerswitch-headerbutton-height: 34px;
  --sw-layerswitch-headerbutton-padding: 0px 10px;
  --sw-layerswitch-headerbutton-bg-color: var(--sw-bg-color);
  --sw-layerswitch-headerbutton-text-transform: none;
  --sw-layerswitch-headerbutton-font-size: var(--sw-font-size);
  --sw-layerswitch-headerbutton-font-weight: 500;
  --sw-layerswitch-headerbutton-icon-size: 18px;
  --sw-layerswitch-headerbutton-icon-margin-right: 6px;
  --sw-layerswitch-legend-padding: 0;
  --sw-layerswitch-legend-font-size: var(--sw-font-size);
  --sw-layerswitch-legend-text-color: var(--sw-text-color);
  --sw-layerswitch-legend-span-padding: 0 0 0 8px;
  --sw-dmp-layerswitch-container-height: 100%;
}

/*  ------------------------------------------------------------------------------------------------ */
/*  TABLET                                                                                           */
/*	------------------------------------------------------------------------------------------------ */

@media (max-width: 820px) {
  :where(:root) {
    --sw-font-size: 14px;
    --sw-icon-size: 18px;
    --sw-search-spacer-left: 0;
    --sw-buttoncontainer-spacer-top: calc(var(--sw-spacer) * 1);
    --sw-input-slider-thumb-width: 1.5rem;
    --sw-input-slider-thumb-height: 1.5rem;
  }
}

/*  ------------------------------------------------------------------------------------------------ */
/*  MOBILE                                                                                           */
/*	------------------------------------------------------------------------------------------------ */

@media (max-width: 460px) {
  :where(:root) {
    --sw-map-height: 480px;
    --sw-map-copyright-padding: 2px 4px;
    --sw-map-copyright-font-size: 10px;
  }
}

css

• Type: string | string[]

Angiv en sti til en css-fil, der skal loades helt til at starte med. Herved vil det være muligt at lave en brugertilpasset style af Septima Widget.

Indlæs én eller flere CSS filer på denne måde:

"css": [
  "https://septima.dk/widget/custom.css"
]

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:

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

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

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

Det er også muligt at aktivere debug mode vha. URL parameteren widget-debug=true som f.eks. her: https://widget.cdn.septima.dk/latest/examples/table32.html?widget-debug=true.

Tilgængelig komponenter

• Aktivér kort (overlay)

  Skal brugeren aktivere kortet inden brug? Dette er specielt hensigtsmæssigt i forbindelse med scroll på mobile enhender, men også når brugeren scroller med musehjulet. Her vil denne funktion forhindre, at der hovedløst zoomes eller panoreres i kortet

• Aktuelle position (location)

  Zoom til brugerens aktuelle GPS position. Kan bruges til blot at flytte kortet til et relevant sted, men positionen kan også bruges til at foretage en konfliktsøgning

• Analytics fra Google eller Siteimprove (analytics)

  Hvordan anvender brugerne Septima Widget? Med Analytics funktionen, er det muligt at følge med i, om brugeren klikker på en feature i kortet, vælger noget i listevisningen, tænder og slukker lag eller filtrerer data

• Billede (image)

  Vis et billede på din hjemmeside. Det kan f.eks. bruges til at vise en generel signaturforklaring

• Data (data)

  Elementet "data" definerer et kommunikationslag som erstatning for f.eks. et kort. Herved er det muligt at få adgang til data uden at få vist et kort

• Direkte links (directlink)

  Klik på et objekt i kortet, åbner med det samme en side, der er relateret til dette objekt

• Filter (filter)

  Filtrer hvilke objkekter der skal vises i kortet, lister m.m

• Find nærmeste (route)

  Find de nærmeste objekter i kortet ud fra f.eks. en adresse, brugerens aktuelle position eller et klik i kortet

• Flow (flow)

  Brug Septimas højdeservice, til at se hvilken vej en væske flyder. Det kan f.eks. bruges til at se hvor, der skal sættes ind, hvis en gylletank lækker eller en tankvogn forulykker. Anvendelsen af denne funktion kræver at man har tilkøbt adgang til Septimas højdeservice

• Formular (form)

  Formular til indsamling af data fra brugerne

• Fullscreen (fullscreen)

  Få kortet vist, så det fylder hele skrærmen

• Google Street View (googlestreetview)

  Vis Google Street View for et givent punkt i kortet

• Graf (chart)

  Vis grafer ud fra data

• HTML (html)

  Tilføj indhold til din hjemmeside ud fra data. Det kan bruges til at vise forklaringer, billeder m.m. på siden ud fra indlæste data.

• Historie (story)

  Fortæl en historie med dine data. I stedet for blot at vise en masse prikker på et kort, kan man med denne funktion guide brugeren gennem oplysingerne

• Højdeprofil (profile)

  Tegn en strækning på kortet og få vist højdeforskelle på strækningen. Viser både højde ved jordoverfladen og højde af bygninger, etc. Kan også vise en sigtelinje henover strækningen.

• Info (info)

  Få vist en infoboks når brugeren klikker på et objekt i kortet

• Kommuneplan (kommuneplan)

  Hent oplysninger direkte fra Plandata.dk og få oplysingerne vist så de er til at forstå for brugeren

• Konfliktsøgning (conflict)

  Foretag en konfliktsøgning på f.eks. en adresse, et klik i kortet eller brugerens aktuelle position

• Kontekst på siden (context)

  Tilføj links på siden til objekter i kortet. Hvis der f.eks. står 'Børnehuset spiren' på siden, så kan brugeren klikke på det og der zoomes hen til det i kortet

• Kort (map)

  Elementet "map" definerer en widgets overordnede kortegenskaber

• Lagfilter (layerfilter)

  Få et ekstra niveau i lagvælgeren. Der tilføjes en række overordnede knapper. Når brugeren klikker på en knap, så vises de lag, der hører til denne knap. De andre lag skjules

• Lagvælger (layerswitch)

  Almindelig lagvælger med mulighed for at tilføje grupper m.m

• Lagvælger (layerswitch2)

  Tilgængelig lagvælger med mulighed for grupperinger og signaturforklaring

• Lagvælger 3 (layerswitch3)

  Tilgængelig lagvælger med søgning, grupper, omarrangering, katalog, slots og persistence

• Listevisning (table)

  Vis data som en liste. Det er specielt anvendeligt hvis man gerne vil gøre sine data tilgængelig for synsbesværede og andre handicappede. Hvis listen vises sammen med et kort, er der interaktion mellem listen og kortet. Det betyder at når brugeren klikker på et objekt i kortet, scolles der til objektet i listen og der kommer en markering i listen. Hvis man klikker i listen, zoomes der til objektet i kortet

• Maplinks (maplinks)

  Åben et eksternt link direkte med en koordinat fra kortet

• Mål afstand og areal (measure)

  Tilføj et måleværktøj til kortet, så det er muligt at måle afstande og arealer

• Oversigtskort (overviewmap)

  Vis et oversigtskort for det aktuelle kortudsnit

• Rute (routing)

  Beregn ruten mellem to punkter i kortet ved at klikke i kortet eller søge et punkt via søgefeltet.

• Skift baggrundskort (layertoggle)

  Skift baggrundskort i stil med Google Maps

• Skråfoto (oblique)

  Vis Skråfoto for et givent punkt i kortet

• Swipe (swipe)

  Sammenlign to lag i kortet vha. "Swipe" funktionen

• Søg (search)

  Søgning på flere ting, herunder adresser, stednavne, lokale data m.m. Funktionen bruger Septima Search, og alt hvad der kan søges i via Septima Search, kan der søges i her

• Tegn i kortet (draw)

  Giver brugeren mulighed for at tegne i kortet. Dette kan f.eks. bruges i forbindelse med konfliktsøgning og formular, men det kan også være relevant i forbindelse med integration til andre systemer

• Tooltip i kortet (hover)

  Få vist en simple infoboks når musen føres over objekter i kortet

• Udskriv (print)

  Udskriv kortet som PDF og meget mere.

• Upload (upload)

  Giver brugeren mulighed for at indlæse egne data i kortet. Dette kan f.eks. bruges hvis man vil se hvordan egne data ser ud

• Viewgenerator (viewgenerator)

  Med "viewgenerator" er det muligt at få vist informationer om det aktuelle kortudsnit. Oplysningerne kan kopieres direkte ind i konfigurationen, hvilket gør det nemt at bruge.

• Vis markering (showpoint)

  Få et simpelt kort med markering af en adresse eller en koordinat

• Zoom til (locate)

  Zoom til data. Det kan f.eks. bruges til at vise et kort, der er zoomet ind på en bestemt børnehave. Men det kan også bruges til at zoome ind til et bestemt område i kortet ud fra et ID

• Zoom til data (zoomtolayer)

  Zoom til data i kortet. Det er f.eks. hvis data ændrer sig, så vil denne funktion sikre, at startudsnittet altid er det rigtige, når kortet vises

• Zoom til startudsnit (fullextent)

  Tilføjer en knap, så det er nemt for brugeren at komme tilbage til det sted hvor kortet startede