Pular para o conteúdo principal

Editor

O Editor incorpora as ferramentas de edição de mapas da Kaleidr à sua página: um mapa base da Kaleidr com recursos para adicionar textos, imagens, marcadores e pop-ups e para mudar o estilo dos elementos do mapa.

Entenda o escopo antes de desenvolver

O editor incorporado é uma ferramenta executada dentro da página, cujas alterações permanecem na memória dela. Nada é salvo, exportado ou publicado a partir da incorporação, e sua página não recebe callbacks quando algo muda. Ao recarregar a página ou destruir o editor, as alterações são perdidas. Ele não permite oferecer aos usuários um fluxo de publicação de mapas. Para mapas salvos, compartilhados e incorporados, crie-os no Kaleidr Studio e mostre-os com o Viewer.

Visão geral​

PerguntaResposta
Do que preciso?Uma chave publicável (kld_pk_live_…) com o escopo design. Novas chaves o incluem por padrão.
Qual plano?Todos os planos, inclusive Free.
Como é exibido?Na sua página, não em um iframe. O mapa e os painéis do editor são elementos do seu documento.
Onde ficam as alterações?Em lugar nenhum. Permanecem na memória da página até o recarregamento ou destruição do editor.
Meu código pode ler as alterações?Não. Não há evento de alteração, exportação nem acesso ao objeto do mapa.
Quantos por página?Um.

A menor incorporação​

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

O elemento de destino precisa ter altura. O editor o preenche.

O que o editor incorporado inclui​

A barra de ferramentas do editor tem oito entradas:

  • Texto: títulos e corpo de texto posicionados no mapa.
  • Imagem: imagens colocadas no mapa.
  • Marcador: marcadores em locais específicos.
  • Pop-up: janelas vinculadas a um local.
  • Plano de fundo: o fundo atrás do mapa.
  • Camada: camadas do próprio mapa base: rótulos, edifícios 3D, iluminação e terreno.
  • Design: escolha um elemento do mapa base, uma categoria de elementos ou uma região e altere seu estilo.
  • Legenda: configurações de rótulos e legendas.

O que não inclui​

Estes recursos do Kaleidr Studio não estão disponíveis na incorporação:

  • A aba Dados: não é possível enviar conjuntos de dados, portanto as partes do editor que estilizam dados enviados não têm dados para processar.
  • O catálogo de designs do Studio, com mapas de exemplo e tipos de estilo.
  • O painel de IA.
  • A biblioteca de modelos 3D.
  • Compartilhamento e publicação.
  • Projetos: não há lista de mapas salvos, abertura nem salvamento.
  • Login: a incorporação usa sua chave, não a conta Kaleidr de uma pessoa.

Como funciona​

  1. O SDK troca sua chave publicável por uma sessão de curta duração. Assim verifica a chave, seu escopo design e a origem da página.
  2. Ao mesmo tempo, o SDK carrega o pacote do editor, editor.js, de https://cdn.kaleidr.com. Ele tem vários megabytes e só é carregado quando um editor é montado. O editor inicia quando as duas etapas terminam.
  3. O editor cria um mapa no elemento de destino e carrega o mapa base de https://tile.kaleidr.com. As solicitações de estilo, sprites e fontes levam sua chave publicável, permitindo que o host do mapa base reconheça a página. O token de sessão nunca aparece em uma URL.
  4. Os painéis do editor aparecem sobre o mapa, dentro do elemento de destino.

Como tudo isso é executado na página, a Política de Segurança de Conteúdo precisa permitir mais recursos do que para Viewer ou Tile. Veja as diretivas exatas em Política de Segurança de Conteúdo.

O que sua página pode fazer​

  • Escolher o mapa base com styleId, por exemplo kaleidr-night.
  • Definir a câmera inicial com center, zoom, pitch e bearing.
  • Mover a câmera depois com handle.setCamera(...).
  • Aplicar a identidade visual com theme, objeto de 17 chaves nomeadas, como brandColor e fontPrimary.
  • Remover o editor com handle.destroy().

Limites​

  • Nada é salvo, exportado ou publicado e não há callback de alteração.
  • O handle não expõe o mapa. Você não pode adicionar suas próprias camadas nem ler o que a pessoa desenhou.
  • O mapa base e o tema são fixados na montagem. Para alterar qualquer um deles, destrua e monte o editor novamente, o que descarta as alterações.
  • Somente um editor por página.
  • Os valores do tema são aplicados ao documento inteiro enquanto o editor está montado e restaurados quando é destruído.
  • Não há sinal de prontidão ou falha para seu código. Os erros aparecem no console do navegador.

Próximos passos​