Pular para o conteúdo principal

Início rápido

Incorpore um mapa Kaleidr em duas linhas.

1. Adicione o loader​

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>

kaleidr.js é muito pequeno — não inclui MapLibre nem React. Ele carrega sob demanda o bundle do produto que você realmente usa a partir de cdn.kaleidr.com/embed/v1/<product>.js.

2. Adicione um elemento​

As duas opções funcionam no plano Free. Viewer é protegido por link de compartilhamento (sem chave nenhuma); Tile usa uma chave publishable do Free restrita a maps / tile.

<!-- A published map — no key needed (share-link gated) -->
<kaleidr-map product="viewer" share-id="abcd1234" style="height:480px"></kaleidr-map>

<!-- A designed basemap — your publishable key, maps scope -->
<kaleidr-map product="tile" publishable-key="kld_pk_live_…" style-id="kaleidr-morning"
             style="height:480px"></kaleidr-map>

Há dois pré-requisitos que o navegador não informará — consulte Obter uma chave de API para ver as etapas exatas:

  1. A origem da sua página deve estar na lista de origens permitidas da chave, ou a troca de sessão do SDK será rejeitada com session_origin_mismatch. Incorporações file:// sempre falham — use HTTP(S).
  2. Sua CSP deve permitir o loader do SDK e o iframe do mapa — consulte Content Security Policy.

Ou monte de forma imperativa​

Anexe o chat com AI a um mapa que já existe na página. Chat requer o escopo ai e Pro ou superior — chaves Free não podem criar uma sessão Chat. contained: true fixa o painel dentro do elemento de montagem; sem isso, o painel é movido para document.body.

const handle = Kaleidr.mount('#chat', {
  product: 'chat',
  publishableKey: 'kld_pk_live_…',
  map: myMap, // your live Mapbox / MapLibre / Google instance
  contained: true,
});

// later: handle.destroy();

Kaleidr.mount(target, opts) retorna um handle de forma síncrona; o bundle do produto é carregado em segundo plano e as chamadas em fila são executadas após o carregamento. Observação: handle.setCamera(...) é um no-op em chat — o handle de chat não controla a câmera do mapa. Use a API de câmera da sua própria instância do mapa.

Próximo​