Indlejring

Vidi kan indlejres på en hjemmeside vha. embed.js scriptet.

Eksempel på indlejring:

<!-- Scriptet kan loades både i toppen og bunden af siden -->
<script src="https://vidi.swarm.gc2.io/js/embed.js"></script>

<!-- Eksempel på et Vidi div element -->
<div data-vidi-token="eyJ0aXRsZSI......" data-vidi-width="800px" data-vidi-height="600px" data-vidi-tmpl="embed.tmpl"></div>

Der en række data attributer, som skal/kan sættes:

  • data-vidi-token (obligatorisk)
    • Projektets "token" som indeholder state-id, host, database mv. Skal angives.
  • data-vidi-width (valgfri)
    • Bredde på kort. Standard 100% 
  • data-vidi-height (valgfri,)
    • Højde på kort. standard 100%
  • data-vidi-tmpl (valgfri)
    • Hvilken template kortet skal bruge. Standard embed.tmpl, som er en template beregnet til indlejring.
  • data-vidi-search (valgfri)
    • Kan sættes til "none" hvis søgeboksen skal skjules. Standard ikke sat.
  • data-vidi-history (valgfri)
    • Kan sættes til "none" hvis forrige/næste udsnit kanpperne skal skjules. Standard ikke sat.
  • data-vidi-use-config (valgfri)
    • Kan sættes til "true" og derved bruges config'en fra token, hvis den indeholder en config.
  • data-vidi-use-schema (valgfri)
    • Kan sættes til "true" og derved bruges schemaet fra token, hvis den indeholder et schema.
  • data-vidi-host (valgfri)
    • Kan sættes til en host (fx "https://example.com") som bruges i stedet for host angivet i token.

Scriptet embed.js anvender MutationObserver API'et til at detektere Vidi div elementernes opståen. Hvis hjemmesiden skal anvendes i ældre browsere (< IE11) skal scriptet placeres i bunden efter alle Vidi div elementerne eller der skal loades en polyfill for MutationObserver.

Eksempel på indlejring:

https://s3-eu-west-1.amazonaws.com/mapcentia-www/test/test.html