Indlejring af Vidi på andre hjemmesider

Embed.js script

Vidi kan indlejres på en hjemmeside vha. embed.js scriptet. Dette script skal loades på hjemmesiden, hvor Vidi skal indlejres.

Scriptet skal ikke nødvendigvis hentes fra samme server, hvor Vidi findes. Man kan fx selv hoste scriptet eller placere det inline på sin hjemmeside.

<script src="https://vidi.swarm.gc2.io/js/embed.js"></script>

Scriptet kan både placeres i toppen og bunden af hjemmesiden.

Indlejring af Vidi

Indlejring af Vidi sker ved at placere et div element på hjemmeside, hvor Vidi ønskes placeret. En række data attributer styrer hvordan kortet vises.

<div data-vidi-token="eyJ0aXRsZSI......" data-vidi-width="800px" data-vidi-height="600px"></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. Læse mere om Projekter

  • 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-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.

  • data-vidi-frame-name (valgfri)

  • Navn på det indsatte kort. Dette er nødvendig hvis Embed API skal anvendes.

  • data-vidi-no-tracking (valgfri)

  • Kan sættes til »true« for at undgå at Vidi’s tracking cookie bliver sat. Cookien anvendes bl.a til anonyme projekter og print, hvilket der typisk ikke er behov for på indlejrede kort.

  • data-vidi-schemata (valgfri)

  • Kan sættes til en valid schemata tekststreng. Matchende lag bliver hentet ind sammen med hvad, der må være angivet i en evt. config.

  • data-vidi-title (valgfri)

  • Sætter title attributen på iframen.

Følgende attributer styrer hvilke funktioner, der skal være synlige.

Følgende funktioner er synlige, men kan sættes til »none« hvis funktionerne skal skjules:

  • data-vidi-brand (valgfri)

  • Brandnavn.

  • data-vidi-search (valgfri)

  • Søgeboksen.

  • data-vidi-history (valgfri)

  • Forrige/næste udsnit knapperne.

  • data-vidi-legend (valgfri)

  • Signatur-knappen.

  • data-vidi-layer (valgfri)

  • Lag-knappen.

  • data-vidi-background (valgfri)

  • Baggrund-knappen.

  • data-vidi-fullscreen (valgfri)

  • Fuldskærms-knappen.

  • data-vidi-about (valgfri)

  • Om-knappen.

  • data-vidi-location (valgfri)

  • Find-mig-knappen.

  • data-vidi-signin (valgfri)

  • Login-knappen.*

  • data-vidi-toggler (valgfri)

  • Navbar toggle-knappen, som vises i på smal skærm.

Følgende funktioner er skjulte, men kan sættes til »inline« hvis funktionerne skal være synlige:

  • data-vidi-measurement (valgfri)

  • Måleværktøjet.

  • data-vidi-boxzoom (valgfri)

  • »Elastik«-zoom-knappen.

  • data-vidi-reset (valgfri)

  • Reset-knappen.

  • data-vidi-clear (valgfri)

  • Ryd-kort-knappen.

  • data-vidi-screenshot (valgfri)

  • Screenshot-knappen.

Embed API

Embed scriptet udstiller et API, så det er muligt at ændre Vidi’s tilstand og definere callback funtioner fra den hjemmeside det er indlejret på.

Pt. er der to funktioner udstillet gennem API’et:

tabel 1 Embed API

Funktion

Beskrivelse

embedApi.switchLayer(<string> layername, <bool> on, <string> frame)

Tænder/slukker et lag.

Fx embedApi.switchLayer('planer.lokalplan', true, 'plankort')

embedApi.allOff(<string> frame)

Slukker alle tændte lag

Fx embedApi.allOff('plankort')

Callbacks

Det muligt at definere callback funktioner for 1) når Vidi er loaded og klar og 2) når aktive lag fra projektet er loaded [1]. Callbacks kan anvendes til at automatisk at kalde API metoder, efter Vidi og lag er færdig-loaded.

Hvis et kort er indlejret med data-vidi-frame-name="kort1" kan callbacks defineres på følgende måde:

embedApi.vidiReady["kort1"] = () => {
    console.log("Vidi er klar")
}

embedApi.activeLayersReady["kort1"] = () => {
    console.log("Aktive lag er klar")
}