Aller au contenu principal

Editor — monter l’éditeur de cartes

product="editor" monte l’éditeur de cartes Kaleidr dans votre page. Il crée et pilote sa propre carte MapLibre dans l’élément — un mode attach, pas un iframe.

  • Mode d’intégration : attach — MapLibre s’exécute dans le document parent.
  • Portée requise : design.
  • Forfait minimum : Pro — les clés Free n’autorisent pas la portée design.

Avant de commencer​

  • L’origine de votre page doit figurer dans la liste des origines autorisées de la clé. Sinon, l’échange de session échoue avec 403 session_origin_mismatch. file:// n’envoie aucun Origin et échoue toujours — utilisez HTTP(S). Consultez Obtenir une clé API.
  • Votre CSP doit autoriser le chargeur SDK, 'wasm-unsafe-eval' (MapLibre dans la page) ainsi que les hôtes de tuiles/fournisseurs — consultez Content Security Policy.

Montage​

const handle = Kaleidr.mount('#editor', {
  publishableKey: 'kld_pk_live_…',
  product: 'editor',
  styleId: 'kaleidr-night',  // catalog basemap id or a full style URL
  // Omit it and the organization's stored default applies, falling back to
  // kaleidr-morning when it has none.
});

L’embed autonome exécute les outils côté client de l’éditeur — les surfaces d’édition sur la carte sont montées au-dessus du fond de carte et les modifications restent dans la spécification en mémoire de l’embed (rien n’est enregistré). Les surfaces pilotées par l’AI (map-design et Control Tower) ainsi que la bibliothèque de modèles 3D ne font pas partie de l’embed autonome ; elles nécessitent un backend Kaleidr et des ressources servies par l’hôte.

Pour un fond de carte de développement, fournissez tileBase: 'https://tile-dev.kaleidr.com' — les IDs de style du catalogue seront alors résolus par rapport à celui-ci plutôt qu’à tile.kaleidr.com en production. Consultez Ajouter l’éditeur.

Options de caméra​

center, zoom, pitch et bearing sont pris en compte au montage. Le SDK unifié transmet également les modifications déclaratives ultérieures des attributs de caméra via le handle de l’éditeur.

Handle​

handle.destroy();
handle.setCamera({ center: [-0.12, 51.5], zoom: 11 });  // supported
  • handle.setTheme(...) accepte un objet JSON de tokens CSS au moment du montage ; la mise à jour en direct via le handle arrivera dans une version ultérieure du SDK (le montage fonctionne déjà).
  • handle.setStyle(...) n’est pas exposé sur editor. Utilisez styleId au montage ou l’API de style de la carte MapLibre sous-jacente pour les changements après montage.

Les requêtes de fond de carte transmettent automatiquement votre clé​

Les fonds de carte Kaleidr sont autorisés par clé — tile.kaleidr.com refuse les origines de navigateur qu’il ne connaît pas. L’embed ajoute donc automatiquement votre clé publishable aux requêtes de fond de carte via transformRequest de MapLibre :

// what the embed does internally — you don't write this
transformRequest: (url) =>
  url.startsWith('https://tile.kaleidr.com/')
    ? { url: `${url}?key=kld_pk_live_…` }
    : { url };

Deux conséquences à connaître :

  • Les origines autorisées de votre clé doivent inclure l’origine de la page. Une clé créée sans l’origine de votre site renvoie 429 tile_access_restricted pour chaque tuile. Mettez-la à jour sur kaleidr.com/api-keys.
  • Seules les URL de tuiles Kaleidr sont réécrites. Si vous fournissez une styleUrl sur un autre hôte, l’embed laisse ces requêtes intactes — votre clé n’est jamais jointe à une origine tierce.