Aller au contenu principal

Éditeur

L’éditeur intègre les outils de modification de cartes de Kaleidr à votre page : un fond de carte Kaleidr et des outils pour ajouter du texte, des images, des marqueurs, des fenêtres contextuelles et modifier l’apparence de la carte.

Comprendre les limites avant de développer

L’éditeur intégré est un outil qui s’exécute dans la page et conserve ses modifications en mémoire. Rien n’est enregistré, exporté ni publié depuis l’intégration, et votre page ne reçoit aucun rappel lors des changements. Le rechargement de la page ou la destruction de l’éditeur fait perdre les modifications. Cet outil ne fournit pas de parcours de publication de cartes à vos utilisateurs. Pour créer des cartes enregistrées, partagées et intégrées, utilisez Kaleidr Studio, puis affichez-les avec Viewer.

Vue d’ensemble​

QuestionRéponse
Que faut-il ?Une clé publiable (kld_pk_live_…) disposant de la portée design, incluse par défaut dans les nouvelles clés.
Quelle offre ?Toutes les offres, y compris Free.
Comment s’affiche-t-il ?Directement dans votre page, sans iframe. La carte et les panneaux de l’éditeur sont des éléments du document.
Où vont les modifications ?Nulle part. Elles restent en mémoire jusqu’au rechargement de la page ou à la destruction de l’éditeur.
Mon code peut-il lire les modifications ?Non. Il n’existe ni événement de modification, ni exportation, ni accès à l’objet carte.
Combien par page ?Un seul.

Intégration minimale​

<div id="editor" style="height:640px"></div>

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  const handle = Kaleidr.mount('#editor', {
    product: 'editor',
    publishableKey: 'kld_pk_live_…',
  });
</script>

Le conteneur de montage doit avoir une hauteur. L’éditeur le remplit entièrement.

Ce que contient l’éditeur intégré​

La barre latérale de l’éditeur comporte huit entrées :

  • Texte : titres et corps de texte placés sur la carte.
  • Image : images placées sur la carte.
  • Marqueur : marqueurs associés à un lieu.
  • Fenêtre contextuelle : fenêtres rattachées à un lieu.
  • Arrière-plan : le fond derrière la carte.
  • Couche : couches propres au fond de carte : étiquettes, bâtiments 3D, éclairage et terrain.
  • Design : sélection d’un élément du fond de carte, d’une catégorie d’éléments ou d’une région pour changer son style.
  • Légende : paramètres des libellés et des légendes.

Ce qu’il ne comprend pas​

Les éléments suivants de Kaleidr Studio sont absents de l’intégration :

  • L’onglet Données : aucun import de jeu de données n’est possible ; les outils destinés à styliser des données importées n’ont donc rien à traiter.
  • Le catalogue de designs de Studio, avec ses cartes d’exemple et types de styles.
  • Le panneau IA.
  • La bibliothèque de modèles 3D.
  • Le partage et la publication.
  • Les projets : aucune liste de cartes enregistrées, ni ouverture ni sauvegarde.
  • La connexion : l’intégration utilise votre clé, pas le compte Kaleidr d’un utilisateur.

Fonctionnement​

  1. Le SDK échange votre clé publiable contre une session de courte durée. Il vérifie ainsi la clé, sa portée design et l’origine de votre page.
  2. En parallèle, le SDK charge le bundle de l’éditeur, editor.js, depuis https://cdn.kaleidr.com. Il pèse plusieurs mégaoctets et n’est chargé qu’au montage d’un éditeur. Celui-ci démarre lorsque les deux opérations sont terminées.
  3. L’éditeur crée une carte dans son conteneur et charge le fond de carte depuis https://tile.kaleidr.com. Les demandes de style, de sprites et de polices contiennent votre clé publiable, ce qui permet au serveur du fond de carte de reconnaître votre page. Le jeton de session ne figure jamais dans une URL.
  4. Les panneaux de l’éditeur apparaissent au-dessus de la carte, dans le conteneur.

Tout fonctionnant dans votre page, votre politique de sécurité du contenu doit autoriser davantage de ressources que pour Viewer ou Tile. Les directives exactes figurent dans Politique de sécurité du contenu.

Actions possibles depuis votre page​

  • Choisir le fond de carte avec styleId, par exemple kaleidr-night.
  • Définir la caméra initiale avec center, zoom, pitch et bearing.
  • Déplacer la caméra ensuite avec handle.setCamera(...).
  • Adapter à votre marque avec theme, un objet comportant 17 clés nommées, dont brandColor et fontPrimary.
  • Supprimer l’éditeur avec handle.destroy().

Limites​

  • Rien n’est enregistré, exporté ou publié et aucun rappel de modification n’existe.
  • Le handle ne donne pas accès à la carte. Vous ne pouvez pas ajouter vos propres couches ni lire ce que l’utilisateur a dessiné.
  • Le fond de carte et le thème sont fixés lors du montage. Pour modifier l’un ou l’autre, détruisez puis remontez l’éditeur, ce qui efface les modifications.
  • Un seul éditeur est autorisé par page.
  • Les valeurs du thème sont appliquées à tout le document lorsque l’éditeur est monté, puis restaurées à sa destruction.
  • Aucun signal de disponibilité ou d’erreur n’est envoyé à votre code. Les échecs apparaissent dans la console du navigateur.

Pour aller plus loin​