Référence Editor

product="editor" monte les outils de modification cartographique de Kaleidr dans votre page. L’éditeur crée sa propre carte à l’intérieur de la cible de montage et superpose ses panneaux. Il s’exécute dans le document, pas dans une iframe.

L’éditeur intégré conserve son travail dans la mémoire de la page. Il n’est possible ni d’enregistrer, ni d’exporter, ni de publier depuis cette intégration ; aucun rappel de modification n’est proposé. Recharger la page ou appeler handle.destroy() annule toutes les modifications.


Clé	Une clé publiable (`kld_pk_live_…`). Obligatoire.
Portée	`design`. Incluse par défaut dans les nouvelles clés.
Offre	Toutes les offres, y compris Free.
Affichage	Dans votre page.
Persistance	Aucune.
Instances	Une par page.
CSP	Voir la partie Editor de Content Security Policy.

Pour un tutoriel, consultez Intégrer l’éditeur.

Fonctions disponibles

Inclus	Non inclus
Texte placé sur la carte	L’onglet Données et l’importation de jeux de données
Image : images placées sur la carte	Le catalogue de cartes et styles de Studio
Marqueur	Le panneau IA
Fenêtre contextuelle	La bibliothèque de modèles 3D
Arrière-plan : fond derrière la carte	Partage et publication
Couche : étiquettes de fond de carte, bâtiments 3D, lumière et relief	Projets : enregistrer, ouvrir et lister des cartes
Design : sélectionner un objet du fond de carte, une catégorie ou une région pour en modifier le style	Connexion au compte
Légende : paramètres des libellés et de la légende

La colonne de gauche correspond, dans l’ordre, à la barre d’outils de l’éditeur. Design dans l’intégration sert à modifier les styles ; le catalogue de designs de Studio n’en fait pas partie.

Montage

const handle = Kaleidr.mount('#editor', {
  product: 'editor',
  publishableKey: 'kld_pk_live_…',
  styleId: 'kaleidr-night',
  center: [-0.1276, 51.5072],
  zoom: 12,
});

<kaleidr-map product="editor" publishable-key="kld_pk_live_…"
             style-id="kaleidr-night" center="-0.1276,51.5072" zoom="12"
             style="display:block; height:640px"></kaleidr-map>

La cible de montage doit avoir une hauteur. L’éditeur occupe toute sa largeur et toute sa hauteur. Il ajoute ses éléments à la cible sans supprimer ceux déjà présents : utilisez un conteneur vide.

Paramètres

Option de montage	Attribut	Type	Défaut	Obligatoire	Description
`product`	`product`	`'editor'`	aucun	oui	Sélectionne l’éditeur.
`publishableKey`	`publishable-key`	chaîne	aucun	oui	Clé `kld_pk_…` avec portée `design`. Une clé serveur (`kld_sk_…`) est refusée dans le navigateur avant toute requête.
`styleId`	`style-id`	chaîne	fond de carte par défaut de votre organisation, sinon `kaleidr-morning`	non	Identifiant de style comme `kaleidr-night` ou URL complète de style. Voir identifiants de style. Fixé au montage.
`center`	`center`	`[longitude, latitude]` ; l’attribut est `"longitude,latitude"`	`[0, 0]`	non	Centre initial.
`zoom`	`zoom`	nombre	`2`	non	Zoom initial. Fonctionne sans `center`.
`pitch`	`pitch`	nombre, degrés	`0`	non	Inclinaison initiale.
`bearing`	`bearing`	nombre, degrés	`0`	non	Rotation initiale.
`theme`	`theme`	objet ou chaîne JSON contenant un objet	aucun	non	Jusqu’à 17 clés nommées. Voir Clés de thème. Lu une seule fois au montage.
`apiBase`	`api-base`	URL	`https://api.kaleidr.com/inference-api`	non	API pour l’échange de session. Doit inclure `/inference-api`. Inutile en production.
`tileBase`	`tile-base`	URL	`https://tile.kaleidr.com`	non	Hôte permettant de résoudre les identifiants de style. Inutile en production.
`base`	`base`	URL	`https://cdn.kaleidr.com`	non	Origine où le SDK charge `editor.js`. Seule l’origine compte, parmi celles autorisées dans Remplacement de la base.
`enabled`	`flag`	booléen	aucun	non	Contrôle individuel du mécanisme d’activation.

shareId, map, mapTarget, contained et viewerBase sont sans effet sur l’éditeur. Il n’existe pas d’option styleUrl : transmettez l’URL comme styleId.

Fond de carte

L’éditeur choisit son fond de carte dans cet ordre :

styleId, si vous le fournissez.
Le fond de carte par défaut de votre organisation, s’il est défini.
kaleidr-morning.

Le fond de carte ne peut pas changer après le montage, et handle.setStyle n’est pas pris en charge par l’éditeur. Pour le remplacer, détruisez l’éditeur puis remontez-le. Cela efface les modifications.

Caméra

center commence par la longitude.
Chaque valeur peut être un nombre ou une chaîne numérique.
Une option de montage qui n’est pas un nombre fini est ignorée et remplacée par le défaut. La console affiche par exemple [kaleidr:editor] ignored zoom: abc is not a finite value — using 2 instead.
Un attribut de caméra non numérique sur l’élément est ignoré sans message, et le défaut est utilisé.

Clés de thème

theme est un objet dont les clés doivent figurer dans la liste ci-dessous. Chaque valeur est une chaîne CSS. Toute autre clé ou valeur qui n’est pas une chaîne non vide est ignorée sans message : fontSizeBase: 14 ne fait rien, alors que fontSizeBase: '14px' fonctionne.

Clé	Style	Exemple
`brandColor`	Boutons principaux, anneaux de focus et outil actif.	`'#0b5fff'`
`brandColorHover`	État au survol de `brandColor`.	`'#0847c2'`
`brandColorOn`	Texte et icônes affichés sur `brandColor`.	`'#ffffff'`
`textColor`	Texte courant et titres.	`'#111827'`
`textColorMuted`	Texte secondaire comme les légendes.	`'#6b7280'`
`surfaceColor`	Fond des cartes et boîtes de dialogue.	`'#ffffff'`
`borderColor`	Bordures et séparateurs.	`'#e5e7eb'`
`glassBg`	Fond des panneaux translucides : barre latérale et volets. Indiquez une couleur opaque pour un rendu plat.	`'rgba(255,255,255,0.8)'`
`glassBlur`	Valeur `backdrop-filter` des panneaux.	`'blur(12px)'`
`cardRadius`	Arrondi des cartes et boîtes de dialogue.	`'12px'`
`buttonRadius`	Arrondi des boutons et pastilles.	`'8px'`
`listRadius`	Arrondi des lignes de liste.	`'6px'`
`fontPrimary`	`font-family` principale.	`'"Inter", system-ui, sans-serif'`
`fontMono`	`font-family` à chasse fixe.	`'ui-monospace, monospace'`
`fontSizeBase`	Taille de police de base.	`'14px'`
`sidebarRailWidth`	Largeur du rail latéral.	`'64px'`
`quickActionsWidth`	Largeur de la barre flottante d’actions rapides.	`'320px'`

Kaleidr.mount('#editor', {
  product: 'editor',
  publishableKey: 'kld_pk_live_…',
  theme: {
    brandColor: '#0b5fff',
    brandColorOn: '#ffffff',
    fontPrimary: '"Inter", system-ui, sans-serif',
    buttonRadius: '8px',
  },
});

Comportement :

Le thème n’accepte pas des propriétés CSS arbitraires. Une clé comme '--my-color' est ignorée.
Les valeurs sont appliquées à la racine du document tant que l’éditeur est monté, afin que ses dialogues en bénéficient partout. Les valeurs précédentes sont restaurées à sa destruction.
Le thème est lu une seule fois au montage. handle.setTheme n’est pas pris en charge sur l’éditeur ; modifier l’attribut theme après le montage affiche un avertissement sans effet.
Une chaîne theme doit être du JSON commençant par {. Toute autre valeur est ignorée avec un avertissement console.

Poignée de contrôle

Kaleidr.mount renvoie la poignée immédiatement. Voir la matrice des poignées pour tous les produits.

Membre	Sur l’éditeur
`handle.product`	`'editor'`
`handle.setCamera(camera)`	Déplace la caméra de la carte.
`handle.setTheme(theme)`	Non pris en charge. Affiche un avertissement sans effet.
`handle.setStyle(style)`	Non pris en charge. Affiche un avertissement sans effet.
`handle.destroy()`	Supprime l’éditeur et sa carte, rétablit les valeurs de thème et arrête le renouvellement de session. Efface les modifications.

La poignée n’a pas de membre map. Votre page ne peut accéder à l’objet carte de l’éditeur.

`setCamera(camera)`

handle.setCamera({ center: [2.3522, 48.8566], zoom: 12, duration: 1000 });

Champ	Type	Description
`center`	`[number, number]`	Longitude, latitude.
`zoom`	nombre	Niveau de zoom.
`pitch`	nombre	Inclinaison en degrés.
`bearing`	nombre	Rotation en degrés.
`duration`	nombre	Durée de l’animation en millisecondes. Valeur omise ou `0` : déplacement immédiat.

Les appels effectués pendant le chargement de l’éditeur sont mis en attente, puis exécutés dès son démarrage.

Attributs après le montage

Sur un <kaleidr-map product="editor"> déjà monté, modifier center, zoom, pitch ou bearing déplace la caméra sans animation. Modifier style-id, theme ou un autre attribut ne change rien.

Cycle de vie

Événement	Résultat
`Kaleidr.mount(...)` ou connexion de l’élément	L’échange de session et le chargement de `editor.js` sont lancés en parallèle. L’éditeur démarre quand les deux sont terminés.
`handle.destroy()` ou retrait de l’élément	L’éditeur et ses modifications disparaissent.
Déplacement de l’élément dans un autre parent	Il est détruit puis remonté. Les modifications sont perdues.
Montage d’un second éditeur alors qu’un existe	Non pris en charge. Détruisez le premier avant d’en monter un autre.
Rechargement de la page	Les modifications sont perdues.

Ce qui s’exécute dans votre page

À la différence des produits dans une iframe, l’éditeur affecte la page qui l’héberge :

Il charge editor.js, un module de plusieurs mégaoctets, depuis https://cdn.kaleidr.com.
Il ajoute ses feuilles de style au document avec JavaScript.
Il demande le style, les tuiles, les sprites et les polices du fond de carte à https://tile.kaleidr.com. Les demandes de style, de sprites et de polices portent votre clé publiable dans le paramètre de requête key, afin que l’hôte reconnaisse votre page. Les demandes de tuiles ne portent aucune clé. Le jeton de session n’est jamais placé dans une URL.
Il démarre des workers depuis des URL blob: pour la carte.
Il applique des valeurs de thème à la racine du document pendant le montage.

Les directives CSP correspondantes figurent dans Content Security Policy.

Messages console

Message	Signification
`[kaleidr:editor] [editor-embed] attach() requires an { apiKey }`	Aucune clé n’a été fournie. Rien ne s’affiche.
`[kaleidr:editor] kaleidr session exchange failed (<status>)`	Échange de session refusé. La cause figure dans la réponse, visible dans l’onglet Réseau. Une réponse 403 place son code dans `detail`, par exemple `insufficient_scope` si `design` manque ; une réponse 429 dans `error`.
Erreur CORS pour `…/sdk/sessions`, suivie d’une erreur fetch `[kaleidr:editor]`	La clé est inconnue ou révoquée, ou l’origine de la page n’est pas autorisée.
`[kaleidr:editor] Kaleidr: a server key (kld_sk_…) must never be used in the browser — it is a standing secret. …`	Une clé serveur a été transmise. Aucune requête n’est effectuée.
`[kaleidr:editor] ignored <field>: <value> is not a finite value — using <default> instead.`	Une option de caméra de `Kaleidr.mount` n’était pas numérique. Les attributs de l’élément ne produisent jamais ce message.
`[kaleidr:editor] <message>`	La carte de l’éditeur a signalé une erreur, par exemple l’échec du chargement d’un style ou d’une tuile.
`[kaleidr] theme string must be JSON …; named string themes are not supported. Ignored.`	`theme` est une chaîne qui n’est pas un objet JSON.
`[kaleidr] theme JSON parse failed (…); ignored.`	`theme` contient du JSON incorrect.
`[kaleidr] setTheme() is not supported on product "editor" — the call is a no-op. …`	`setTheme` a été appelé, ou `theme` a changé après le montage.
`[kaleidr] setStyle() is not supported on product "editor" — the call is a no-op. …`	`setStyle` a été appelé.

Fonctionnalités indisponibles

Enregistrer, exporter ou publier les modifications.
Événement de changement, événement de disponibilité ou rappel d’erreur.
Accéder à l’objet carte, ajouter des couches personnalisées ou lire les dessins.
Changer le fond de carte ou le thème après le montage.
Monter plusieurs éditeurs sur une page.

Pages associées

Intégrer l’éditeur
Le chargeur kaleidr.js
L’élément <kaleidr-map>
Intégrer une carte publiée, pour les cartes persistantes

Fonctions disponibles​

Montage​

Paramètres​

Fond de carte​

Caméra​

Clés de thème​

Poignée de contrôle​

setCamera(camera)​

Attributs après le montage​

Cycle de vie​

Ce qui s’exécute dans votre page​

Messages console​

Fonctionnalités indisponibles​

Pages associées​