Opsæt indlejrede kort

Formål og versionsgrundlag

Vejledningen beskriver indlejring i Nordiq nqgis-2026-10-sep, herunder Share, apiPlugins.js og EmbeddedContext. Udgangspunktet er den kode, Del genererer. Live eksempler ligger under Eksempler: Embedded.

Forudsætninger

Adgang til den aktive frontendkonfiguration og hjemmesidens CSP/CORS-opsætning.
Et kort-id og eventuelt et kontekstnavn.
En HTML-container med en entydig id.

Berørte filer og tjenester

mapstore/configs/localConfig.json (useCORS og Share)
mapstore/js/apiPlugins.js
mapstore/js/components/EmbeddedContext/
Share-overridet og webserverens sikkerhedsheadere

Trin-for-trin

Tag backup af aktiv konfiguration.
Kontrollér Share-konfigurationen. Nordiq-referencen har showAPI: true for kortressourcer og genererer også iframe-kode.
Brug den kode, som Del-værktøjet genererer, som udgangspunkt.
Ved iframe-indlejring indsættes den genererede iframe med src til embedded.html og kort-id.
Ved API-indlejring opret en container og kald MapStore2.create med mindst det genererede kort-id. Der kan kun være ét API-kort pr. side.
Brug om nødvendigt contextName til tema og pluginopsætning. mapId og contextName kan ændres senere uden at skifte metode.
Tilføj hjemmesidens domæne til useCORS i localConfig.json, hvis browseren blokerer kald med CORS.
Test indlejringen fra hjemmesidens rigtige domæne.

Konfiguration

Iframe

<iframe
  allowFullScreen
  style="border: none; width: 100%; height: 400px;"
  src="https://SITENAVN/mapstore/embedded.html#/KORTID">
</iframe>

JavaScript-API

<div id="container"></div>
<script id="ms2-api" src="https://SITENAVN/mapstore/dist/nqgis-api.js"></script>
<script>
  function msInit() {
    MapStore2.create('container', {
      configUrl: "https://SITENAVN/mapstore/rest/geostore/data/KORTID",
      theme: { theme: "embedded" },
      contextName: "KONTEKSTNAVN"
    });
  }
  window.addEventListener("load", msInit);
</script>

Erstat SITENAVN, KORTID og KONTEKSTNAVN med kundens værdier. Kopiér først den genererede kode fra Del, og ret derefter kun det nødvendige.

EmbeddedContext understøtter pluginSource med værdierne context, inline og merge. context bruger kontekstplugins, inline bruger den angivne pluginliste, og merge overskriver eller tilføjer inline-plugins oven på kontekstens liste.

Brug kun verificerede options fra den genererede kode og den aktuelle apiPlugins.js.

CORS

Hvis browseren viser, at et kald er blocked by CORS policy, skal hjemmesidens origin tilføjes til useCORS i localConfig.json. Referencen indeholder allerede et eksempeldomæne; erstat eller udvid listen med kundens CMS-domæne.

Aktivering eller genstart

Udrul frontendændringer og opdatér hjemmesidens CSP efter de lokale procedurer. Ændringer i kontekstens pluginliste kræver normalt ikke ændring af CMS-koden, når pluginSource er context.

Kontrol og rollback

Test siden som anonym og som relevant bruger.
Kontrollér browserkonsollen for CSP-, CORS- og scriptfejl (F12).
Kontrollér at tema, kort, kontekst og plugins indlæses.
Ved fejl gendannes tidligere konfiguration og tidligere indlejringskode.

Sikkerhed

Indsæt aldrig tokens eller adgangskoder i klientkode. Brug HTTPS. Tillad kun kendte domæner i CSP/CORS, og håndhæv dataadgang i GeoStore, GeoServer og backend.

Fejlfinding

MapStore2 findes ikke: Kontrollér at det korrekte API-script indlæses før kaldet, og at container-id’et matcher MapStore2.create.
Kortet vises ikke: Kontrollér container-id, at nqgis-api.js er indlæst, og browserkonsollen.
Kortet er langsomt: Færre tændte lag, mindre container og caching på datakilder.
Funktioner virker ikke: Kontrollér at pluginet er i konteksten, og at contextName og pluginSource er korrekte.
Kontekstplugins mangler: Kontrollér contextName og pluginSource.
Iframe blokeres: Kontrollér CSP frame-ancestors og øvrige iframe-headere.