Saltar al contenido principal

Editor — montar el editor de mapas

product="editor" monta el editor de mapas de Kaleidr en tu página. Crea y controla su propio mapa MapLibre dentro del elemento — un método attach, no un iframe.

  • Método de integración: attach — MapLibre se ejecuta en el documento principal.
  • Ámbito requerido: design.
  • Plan mínimo: Pro — las claves Free no permiten el ámbito design.

Antes de comenzar​

  • El origen de tu página debe estar en la lista de orígenes permitidos de la clave. De lo contrario, el intercambio de sesión falla con 403 session_origin_mismatch. file:// no envía ningún Origin y siempre falla — utiliza HTTP(S). Consulta Obtener una clave API.
  • Tu CSP debe permitir el cargador del SDK, 'wasm-unsafe-eval' (MapLibre dentro de la página) y los hosts de tiles/proveedores — consulta Content Security Policy.

Montaje​

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.
});

La integración independiente ejecuta las herramientas del editor del lado del cliente — las superficies de edición sobre el mapa se montan sobre el mapa base y los cambios permanecen en la especificación en memoria de la integración (nada se guarda). Las superficies impulsadas por AI (diseño de mapas y Control Tower) y la biblioteca de modelos 3D no forman parte de la integración independiente; necesitan un backend de Kaleidr y recursos servidos por el host.

Para un mapa base de desarrollo, pasa tileBase: 'https://tile-dev.kaleidr.com' — los IDs de estilo del catálogo se resolverán contra este host en lugar de tile.kaleidr.com de producción. Consulta Adjuntar el editor.

Opciones de cámara​

center, zoom, pitch y bearing se respetan al montar. El SDK unificado también transmite los cambios declarativos posteriores de los atributos de cámara mediante el handle del editor.

Handle​

handle.destroy();
handle.setCamera({ center: [-0.12, 51.5], zoom: 11 });  // supported
  • handle.setTheme(...) acepta un objeto JSON de tokens CSS al montar; la actualización en vivo mediante el handle llegará en una versión posterior del SDK (al montar ya funciona).
  • handle.setStyle(...) no está disponible en editor. Utiliza styleId al montar, o la API de estilos del mapa MapLibre subyacente para cambiar estilos después del montaje.

Las solicitudes de mapas base incluyen tu clave automáticamente​

Los mapas base de Kaleidr requieren autorización mediante clave — tile.kaleidr.com rechaza los orígenes de navegador que no reconoce. Por ello, la integración añade automáticamente tu clave publishable a las solicitudes de mapas base mediante 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 };

Dos consecuencias importantes:

  • Los orígenes permitidos de tu clave deben incluir el origen de la página. Una clave creada sin el origen de tu sitio devuelve 429 tile_access_restricted para cada tile. Actualízala en kaleidr.com/api-keys.
  • Solo se reescriben las URL de tiles de Kaleidr. Si pasas una styleUrl alojada en otro host, la integración deja esas solicitudes intactas — tu clave nunca se adjunta a un origen de terceros.