SDK de editor de mapas: cómo añadir creación de mapas a un producto SaaS

Un SDK de editor de mapas incorpora la creación o edición de mapas a un producto SaaS sin obligar a los usuarios a pasar a un constructor independiente. La aplicación anfitriona conserva la identidad, los permisos, los proyectos, la facturación, la propiedad de los datos y la política de publicación, mientras que el SDK aporta el lienzo y las herramientas dentro de la página. Kaleidr Editor monta su propio mapa MapLibre, se autentica mediante una clave publicable restringida por origen y mantiene los cambios en memoria hasta que el host define la persistencia.

Las secciones siguientes explican los límites del producto, la arquitectura, el montaje, la persistencia, la seguridad, la experiencia de usuario y los errores habituales. Para conectar una conversación con un renderizador activo, consulta Cómo añadir chat con IA a un mapa. Para conocer la categoría más amplia de SDK, consulta ¿Qué es un SDK de mapas con IA?.

Aspectos esenciales de un SDK de editor de mapas

• Superficie frente a producto: El editor controla el lienzo de edición; el host controla usuarios, proyectos, permisos, persistencia y lanzamiento.
• En memoria por defecto: Kaleidr Editor independiente no conserva los cambios; planifica el guardado y la publicación antes del lanzamiento.
• Clave publicable + design: Utiliza una clave de navegador restringida por origen con el alcance design; nunca expongas claves de servidor.
• Montar una vez, destruir una vez: Vincula el ciclo de vida con las rutas de la SPA y los cambios de tenant.
• Derechos de publicación separados: Editar un borrador no requiere el mismo permiso que publicar un mapa para el público.

¿Cómo se añade un SDK de editor de mapas a un producto SaaS?

Esta guía incorpora un espacio de creación de mapas a un flujo SaaS existente para que el usuario pueda abrir un proyecto, editar sobre un lienzo MapLibre, elegir un estilo de mapa base, utilizar las herramientas disponibles en el mapa y salir sin dejar escapar el estado del SDK. Una vez que existe una integración de persistencia, el guardado, la publicación y la entrega siguen bajo el control del host. Los ejemplos utilizan Kaleidr Editor porque documenta un producto Editor dentro de la página a través del cargador compartido; el mismo modelo de responsabilidades sirve al evaluar cualquier SDK de editor de mapas de terceros.

¿En qué se diferencia un SDK de editor de mapas de Studio, Viewer o GIS?

Un SDK de editor de mapas es un componente reutilizable que añade a otra aplicación herramientas de autoría: navegación, selección, dibujo, estilos y controles relacionados. No debe sustituir el sistema de cuentas, la base de datos, los derechos de acceso, el registro de auditoría ni el flujo de proyectos del host. Una división fiable establece que el editor controla la superficie de edición, mientras que el producto anfitrión controla el usuario, el proyecto, los permisos, la persistencia y la decisión de publicar.

Kaleidr Studio es el producto completo de autoría basado primero en prompts y organizado en Prompt → Process → Refine → Deploy. Kaleidr Editor es la superficie de edición integrable. Kaleidr Viewer muestra un mapa publicado. Estas rutas comparten conceptos de renderizado y estilo, pero no son superficies de producto intercambiables.

¿Cómo debe gestionar la arquitectura SaaS el estado del editor?

Un flujo de edición de mapas en producción requiere responsabilidades claras entre la interfaz contenedora, el editor, las credenciales, las políticas del backend, los sistemas de datos y la entrega. El SaaS anfitrión controla la identidad, el tenant, la navegación, los proyectos, la facturación, los permisos y el flujo de trabajo. Kaleidr Editor controla la superficie de edición dentro de la página, su mapa MapLibre, el ciclo de vida y las herramientas disponibles en el cliente. Una clave publicable concede acceso desde el navegador al producto Editor y a la capacidad design. El backend del host controla autorización, persistencia, versionado, auditoría, importaciones, exportaciones y políticas de publicación. Los sistemas de datos autorizados controlan los conjuntos de datos y las reglas empresariales. Un visor u otro destino entrega los resultados aprobados en modo de solo lectura.

El backend del host no debe confiar en un identificador de proyecto, tenant o conjunto de datos, ni en un destino de publicación enviado por el navegador, sin volver a autorizarlo. Montar el editor hace que la creación de mapas parezca nativa, pero el navegador sigue siendo un entorno no confiable. La documentación pública establece que product: "editor" selecciona el paquete Editor; que la entrada predeterminada es attach/in-process, no iframe; que styleId acepta un identificador de mapa base del catálogo o una URL de estilo completa; que el mapa base predeterminado es kaleidr-morning; y que el handle siempre proporciona destroy(), mientras que las actualizaciones de cámara y tema están disponibles cuando se admiten. La integración independiente no conserva los cambios y tampoco incluye las superficies completas de Studio impulsadas por IA, Control Tower ni una biblioteca autónoma de recursos 3D sin configuración adicional del backend.

¿Cómo se monta Kaleidr Editor de forma segura?

Confirma el acceso Pro o Enterprise para claves de API e integraciones, una clave publicable habilitada para Editor con el alcance design, los orígenes exactos permitidos en desarrollo, staging y producción, un elemento de destino con altura explícita, un estilo inicial, un modelo de proyectos y permisos del host, una estrategia de persistencia y la limpieza de la SPA. Carga una sola vez el cargador versionado desde https://cdn.kaleidr.com/embed/v1/kaleidr.js. El cargador permanece inactivo de forma predeterminada, por lo que debes habilitar las integraciones antes de cargarlo o pasar la opción enabled en cada montaje. Un montaje mínimo tiene este aspecto:

const editor = Kaleidr.mount("#editor", {
  product: "editor",
  publishableKey: "kld_pk_live_REPLACE_ME",
  styleId: "kaleidr-morning",
  enabled: true
});

window.addEventListener("pagehide", () => {
  editor.destroy();
});

Sustituye la clave de ejemplo por una clave publicable real, reserva suficiente altura de lienzo para las herramientas de edición y anuncia el estado de carga o error fuera del mapa. El ejemplo sigue la referencia para adjuntar Editor, la guía de integración de Editor y la referencia del cargador kaleidr.js actuales. Monta el editor, pero no guarda la especificación en memoria, porque la referencia pública del handle no documenta métodos de persistencia. El elemento <kaleidr-map> puede seleccionar product="editor" con publishable-key y style-id cuando basta con marcado declarativo. Prefiere la API imperativa cuando el host necesita un handle explícito o un ciclo de vida gestionado por el framework. En React u otra SPA, monta una vez dentro de un efecto y llama a destroy() durante la limpieza; no vuelvas a montar con cada cambio de un campo del formulario.

¿Cómo se planifican la persistencia, la seguridad y la experiencia de usuario?

La integración independiente conserva los cambios en memoria. Los equipos suelen elegir una de tres rutas: tratar Editor como una superficie temporal para prototipos; mantener toda la autoría en Kaleidr Studio cuando los usuarios pueden salir de la interfaz SaaS; o construir un flujo integrado con el host que incluya carga del proyecto, validación, guardado del borrador, versionado, resolución de conflictos, aprobación, publicación, reversión y auditoría. La referencia pública del SDK de Editor no documenta métodos que puedan inventarse, como funciones de guardado o escuchas de cambios no documentadas; confirma con Kaleidr el mecanismo compatible de transferencia de estado antes de prometer guardado a los clientes. Las rutas design de la plataforma, como el análisis de conjuntos de datos, la aplicación parcial de especificaciones de mapa y los catálogos de estilos o temas, deben estar en el backend del host detrás de una clave de servidor. Editor en el navegador sigue utilizando la clave publicable mediante el SDK.

Restringe las claves publicables a orígenes exactos, exige HTTPS fuera del desarrollo local, limita las claves a design y únicamente a los productos necesarios, y destruye el editor al cambiar de cuenta o tenant. En el backend, autoriza cada proyecto y conjunto de datos por usuario y tenant, valida la propiedad con independencia del estado del navegador, valida las especificaciones del mapa antes de conservarlas o publicarlas y separa los permisos de borrador, revisión y publicación. OWASP API Security Top 10 considera la autorización deficiente a nivel de objeto un riesgo principal: un identificador de proyecto proporcionado por el navegador nunca basta como autorización. Mantén visible la interfaz del producto para que los usuarios sepan qué proyecto están editando, sitúa las acciones de guardar y publicar en la interfaz del host en vez de inventar un estado falso de «Guardado» basado únicamente en cambios en memoria, y reserva más espacio vertical del que suele necesitar un visor. Asigna un nombre accesible a la región del editor, conserva el acceso mediante teclado a las acciones cercanas, evita las trampas de foco, anuncia el estado de guardado y los errores y ofrece alternativas que no requieran arrastrar siempre que sea posible conforme a WCAG 2.2.

Veredicto final

Un SDK de editor de mapas puede incorporar la creación de mapas a un producto SaaS sin reconstruir desde cero todo un lienzo de edición, la integración con el renderizador y el modelo de autenticación del navegador. Kaleidr Editor ofrece actualmente una superficie integrable dentro de la página, basada en MapLibre y autenticada mediante una clave publicable con el alcance design. La integración independiente conserva los cambios en memoria, por lo que montar el editor no equivale a lanzar un sistema de autoría completo y persistente. Elige Editor SDK cuando el producto necesite una superficie de edición integrada y el equipo del host se haga cargo de proyectos, permisos, persistencia, publicación y capacidad de auditoría. Elige Kaleidr Studio cuando sea aceptable un flujo completo de autoría independiente. Confirma la transferencia de estado y cualquier mecanismo asistido por IA antes de prometer guardado a los clientes.

Añade edición de mapas a tu producto SaaS

Monta Kaleidr Editor con el cargador JavaScript versionado, una clave publicable restringida por origen y el alcance design. Lee la guía de integración de Editor para conocer las opciones de montaje y el ciclo de vida. Para autenticación, endpoints de diseño y flujos integrados con el host, consulta la documentación para desarrolladores y los requisitos de Enterprise.

Preguntas frecuentes

¿Qué es un SDK de editor de mapas?

Un SDK de editor de mapas es un componente reutilizable que añade herramientas de creación o edición de mapas a otra aplicación. El producto anfitrión suele conservar usuarios, proyectos, permisos, persistencia y publicación.

¿Se puede integrar Kaleidr Editor en un producto SaaS?

Sí. El SDK actual documenta product: "editor" para montarlo dentro de un elemento de destino. Editor crea su propio mapa MapLibre en la página.

¿Editor independiente guarda los mapas de los usuarios?

No. La documentación pública establece que los cambios viven en una especificación en memoria y que la integración independiente no los conserva. Planifica la persistencia del host antes del lanzamiento.

¿Qué credencial utiliza Editor?

Utiliza mediante el SDK una clave publicable de navegador con el alcance design, restringida a los orígenes aprobados. Nunca incluyas una clave de servidor en código del navegador.

¿Kaleidr Editor es lo mismo que Kaleidr Studio?

No. Studio es el producto completo de creación y publicación basado primero en prompts. Editor es la superficie de edición integrable para utilizarla dentro de otra aplicación.

References

• Kaleidr. Attach the Map Editor. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/guides/attach-the-editor
• Kaleidr. Auth & Scopes. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/platform-api/auth-and-scopes
• Kaleidr. CORS & Allowed Origins. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/platform-api/cors-and-allowed-origins
• Kaleidr. Editor — Mount the Map Editor. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/sdk/editor-attach
• Kaleidr. Endpoints. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/platform-api/endpoints
• Kaleidr. kaleidr.js — the Loader. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/sdk/kaleidr-js
• Kaleidr. Pricing & Plans. kaleidr.com. Accessed 3 August 2026. https://kaleidr.com/pricing
• MapLibre. Map — MapLibre GL JS. Accessed 3 August 2026. https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/
• OWASP. OWASP Top 10 API Security Risks — 2023. Accessed 3 August 2026. https://owasp.org/API-Security/editions/2023/en/0x11-t10/
• World Wide Web Consortium. Web Content Accessibility Guidelines (WCAG) 2.2. Accessed 3 August 2026. https://www.w3.org/TR/WCAG22/

@misc{kaleidr_editor_attach,
  title  = {Editor -- Mount the Map Editor},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/sdk/editor-attach}
}

@misc{kaleidr_editor_guide,
  title  = {Attach the Map Editor},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/guides/attach-the-editor}
}

@misc{kaleidr_loader,
  title  = {kaleidr.js -- the Loader},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/sdk/kaleidr-js}
}

@misc{kaleidr_auth_scopes,
  title  = {Auth and Scopes},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/platform-api/auth-and-scopes}
}

@misc{owasp_api_security,
  title  = {OWASP Top 10 API Security Risks -- 2023},
  author = {{OWASP}},
  note   = {Accessed 3 August 2026},
  url    = {https://owasp.org/API-Security/editions/2023/en/0x11-t10/}
}

@misc{wcag22,
  title  = {Web Content Accessibility Guidelines 2.2},
  author = {{World Wide Web Consortium}},
  note   = {Accessed 3 August 2026},
  url    = {https://www.w3.org/TR/WCAG22/}
}