Zum Hauptinhalt springen

Tiles — gestaltete Basiskarte einbetten

product="tile" bettet eine gestaltete Kaleidr-Basiskarte anhand der Style-ID in ein iframe ein. Sie besitzt ihre eigene Karte; steuere sie über die kaleidr-embed:*-postMessage-Schnittstelle.

  • Einbindung: iframe — die Karte wird innerhalb von map-embed.kaleidr.com geladen.
  • Erforderlicher Scope: maps.
  • Mindestplan: Free — ein Free-Schlüssel wird mit ["maps"]-Scope und ["tile"]-Produktzulassung erstellt. Tile ist das einzige schlüsselbasierte Produkt, das Free ausführen kann.

Bevor du beginnst​

  • Der Origin deiner Seite muss in der Origin-Allowlist des Schlüssels enthalten sein. Andernfalls schlägt der Session-Austausch mit 403 session_origin_mismatch fehl. file:// sendet keinen Origin und schlägt immer fehl — nutze HTTP(S). Siehe API-Schlüssel erhalten.
  • Deine CSP muss den SDK-Loader und den Frame-Host map-embed.kaleidr.com erlauben. Für ein reines Tile-Embed werden keine Tile-/Vendor-Bild-Hosts benötigt — diese laufen innerhalb des Kaleidr-iframes. Siehe Content Security Policy.

Mount​

<kaleidr-map product="tile" publishable-key="kld_pk_live_…" style-id="kaleidr-morning"
             center="-0.12,51.5" zoom="11" style="height:480px"></kaleidr-map>

Integrierte Style-IDs sind unter anderem kaleidr-morning, kaleidr-afternoon, kaleidr-night, kaleidr-editorial, kaleidr-plain (und Registry-Aliase).

Handle​

const handle = Kaleidr.mount('#basemap', {
  product: 'tile',
  publishableKey: 'kld_pk_live_…',
  styleId: 'kaleidr-night',
});

handle.setCamera({ center: [2.35, 48.85], zoom: 12 });
handle.setStyle('kaleidr-editorial');   // live style swap — tile only
handle.destroy();

setStyle(styleId) ist nur auf dem Tile-Handle verfügbar. Ein Aufruf bei Chat, Editor oder Viewer protokolliert eine [kaleidr]-Warnung und kehrt zurück.

Ein Schlüssel, ein Pool

Der publishable-key (maps-Scope) autorisiert den Basemap-Zugriff — es gibt keinen separaten Tile-Schlüssel — und jede Basemap-Session zählt zum gemeinsamen monatlichen Map-Loads-Kontingent deines Plans. Siehe Tiles verwenden.