Aller au contenu principal

Démarrage rapide

Intégrez une carte Kaleidr en deux lignes.

1. Ajouter le chargeur​

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>

kaleidr.js est très léger — il n’inclut ni MapLibre ni React. Il charge à la demande le bundle du produit réellement utilisé depuis cdn.kaleidr.com/embed/v1/<product>.js.

2. Ajouter un élément​

Les deux fonctionnent avec le forfait Free. Viewer est protégé par un lien de partage (aucune clé) ; Tile utilise une clé publishable Free limitée à maps / tile.

<!-- A published map — no key needed (share-link gated) -->
<kaleidr-map product="viewer" share-id="abcd1234" style="height:480px"></kaleidr-map>

<!-- A designed basemap — your publishable key, maps scope -->
<kaleidr-map product="tile" publishable-key="kld_pk_live_…" style-id="kaleidr-morning"
             style="height:480px"></kaleidr-map>

Deux prérequis que le navigateur ne vous signalera pas — consultez Obtenir une clé API pour les étapes exactes :

  1. L’origine de votre page doit être dans la liste des origines autorisées de la clé, sinon l’échange de session du SDK est rejeté avec session_origin_mismatch. Les embeds file:// échouent toujours — utilisez HTTP(S).
  2. Votre CSP doit autoriser le chargeur SDK et l’iframe de la carte — consultez Content Security Policy.

Ou monter de manière impérative​

Ajoutez le chat AI à une carte déjà présente sur la page. Chat nécessite la portée ai et Pro ou supérieur — les clés Free ne peuvent pas créer de session Chat. contained: true ancre le panneau dans l’élément de montage ; sans cette option, le panneau est placé sur document.body.

const handle = Kaleidr.mount('#chat', {
  product: 'chat',
  publishableKey: 'kld_pk_live_…',
  map: myMap, // your live Mapbox / MapLibre / Google instance
  contained: true,
});

// later: handle.destroy();

Kaleidr.mount(target, opts) renvoie immédiatement un handle ; le bundle du produit se charge en arrière-plan et les appels en attente sont exécutés après le chargement. Remarque : handle.setCamera(...) est un no-op sur chat — le handle chat ne pilote pas la caméra de la carte. Utilisez l’API de caméra de votre propre instance de carte.

Ensuite​