Søg i Septima Widget K

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

json
{
  "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 anvenedligt, hvis man altid bruger det samme bagrundskort, eller altid vil have den samme funktion med.

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

URL'er og normal json kan selvfølgelig kombinesres 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:

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>

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:

json
{
  "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.

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

Vis generelle CSS variabler
css
/*  ------------------------------------------------------------------------------------------------ */
/*  GENERAL                                                                                          */
/*	------------------------------------------------------------------------------------------------ */

: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 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);

  /*  ------------------------------------------------ */
  /*  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;
}

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

: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: 18px;
  --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.5);
  --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: .25em .25em;
  --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                                                                                           */
/*	------------------------------------------------------------------------------------------------ */

: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: #ffffff;
  --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: 13px;
  --sw-input-toggle-height: 13px;
  --sw-input-toggle-bg-color: #ffffff;
  --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                                                                                   */
/*	------------------------------------------------------------------------------------------------ */

:root {
  --sw-control-header-bg-color:        transparent;
  --sw-control-header-gap:             0.75em;
  --sw-control-header-padding:         0.65em 0.65em 0.65em 1em;
  --sw-control-header-border-radius:   var(--sw-border-radius);
  --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-filled);
}

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

: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: drop-shadow(0 1em 1em #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: var(--sw-box-shadow);
  --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: 4px 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: 20px;
  --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;

  /*  ------------------------------------------------ */
  /*  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-light);

  /*  ------------------------------------------------ */
  /*  TABLE LIST                                       */
  --sw-table-ul-margin: 0;
  --sw-table-ul-padding: 0;
  --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: #ffffff;
  --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) {
  :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) {
  :root {
    --sw-layertoggle-item-width: 40px;
    --sw-layertoggle-item-height: 40px;
    --sw-map-copyright-padding: 2px 4px;
    --sw-map-copyright-font-size: 10px;
  }
}

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>

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 ​