Saltar al contenido principal

Editor

Editor integra las herramientas de edición sobre mapas de Kaleidr en tu página: un mapa base de Kaleidr con herramientas para añadir texto, imágenes, marcadores y ventanas emergentes, y para cambiar el estilo de los elementos del mapa.

Conoce el alcance antes de desarrollar

El editor integrado es una herramienta de la página cuyo trabajo permanece en la memoria del navegador. El componente integrado no guarda, exporta ni publica nada, y tu página no recibe callbacks cuando algo cambia. Cuando se recarga la página o se destruye el editor, los cambios se pierden. No sirve para ofrecer a tus usuarios un flujo de publicación de mapas. Para crear mapas que se guarden, compartan e integren, utilízalo en Kaleidr Studio y muéstralos con Viewer.

De un vistazo​

PreguntaRespuesta
¿Qué necesito?Una clave publicable (kld_pk_live_…) con el permiso design. Las claves nuevas lo incluyen por defecto.
¿Qué plan?Todos los planes, incluido Free.
¿Cómo se muestra?En tu página, no en un iframe. El mapa y los paneles del editor son elementos del documento.
¿Dónde quedan los cambios?No se guardan. Permanecen en la memoria de la página hasta que se recarga o se destruye el editor.
¿Puede mi código leer los cambios?No. No hay eventos de cambio, exportación ni acceso al objeto del mapa.
¿Cuántos por página?Uno.

Integración mínima​

<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>

El elemento donde se monta debe tener una altura. El editor lo ocupa por completo.

Qué incluye el editor integrado​

La barra lateral del editor tiene ocho entradas:

  • Texto: títulos y párrafos situados sobre el mapa.
  • Imagen: imágenes colocadas en el mapa.
  • Marcador: marcadores en una ubicación.
  • Ventana emergente: ventanas vinculadas a una ubicación.
  • Fondo: el fondo detrás del mapa.
  • Capa: capas propias del mapa base: etiquetas, edificios 3D, iluminación y terreno.
  • Diseño: selecciona un elemento del mapa base, una categoría de elementos o una región y modifica su estilo.
  • Leyenda: ajustes de etiquetas y leyendas.

Qué no incluye​

Estas partes de Kaleidr Studio no están incluidas en el componente integrado:

  • La pestaña Datos: no permite subir conjuntos de datos, por lo que las herramientas que aplican estilos a los datos subidos no tienen información sobre la que actuar.
  • El catálogo de diseños de Studio con mapas de muestra y tipos de estilo.
  • El panel de IA.
  • La biblioteca de modelos 3D.
  • Compartir y publicar.
  • Proyectos: no hay lista de mapas guardados ni funciones para abrir o guardar.
  • Inicio de sesión. El componente funciona con tu clave, no con la cuenta Kaleidr de una persona.

Cómo funciona​

  1. El SDK intercambia tu clave publicable por una sesión de corta duración. Así comprueba la clave, su permiso design y el origen de tu página.
  2. Al mismo tiempo, carga el paquete del editor, editor.js, desde https://cdn.kaleidr.com. Ocupa varios megabytes y solo se carga cuando se monta el editor. El editor comienza cuando ambos procesos terminan.
  3. El editor crea un mapa dentro del elemento de montaje y carga el mapa base desde https://tile.kaleidr.com. Las solicitudes de estilo, sprites y fuentes incluyen tu clave publicable para que el servidor del mapa base reconozca la página. El token de sesión nunca aparece en una URL.
  4. Los paneles del editor aparecen sobre el mapa, dentro del elemento de montaje.

Como todo se ejecuta en tu página, tu Política de Seguridad de Contenido debe permitir más recursos que para Viewer o Tile. Las directivas exactas se encuentran en Política de Seguridad de Contenido.

Qué puede hacer tu página​

  • Elegir el mapa base mediante styleId, por ejemplo kaleidr-night.
  • Establecer la cámara inicial con center, zoom, pitch y bearing.
  • Mover la cámara después mediante handle.setCamera(...).
  • Adaptarlo a tu marca mediante theme, un objeto con 17 claves definidas como brandColor y fontPrimary.
  • Eliminar el editor mediante handle.destroy().

Limitaciones​

  • No se guarda, exporta ni publica nada y no hay callbacks de cambio.
  • El controlador no expone el mapa. No puedes añadir tus propias capas ni leer lo que dibuja el usuario.
  • El mapa base y el tema quedan fijados al montar. Para cambiarlos, destruye el editor y móntalo de nuevo, lo que elimina los cambios.
  • Solo se admite un editor por página.
  • Los valores del tema afectan a todo el documento mientras el editor está montado y se restauran al destruirlo.
  • Tu código no recibe señales de preparación ni de error. Los fallos aparecen en la consola del navegador.

Próximos pasos​