Exemplos da Embed API

Cada exemplo é um mapa ao vivo que você pode usar, seguido da página completa que o produz. Todos controlam o mesmo mapa publicado (2.480 cidades do mundo e 233 países do Natural Earth), para que você veja quanto um único mapa pode fazer a partir da página ao redor.

Exemplo Mostra
Exibir um mapa Monte um Icon Map publicado em uma página com uma única chamada e leia o que o mapa vai responder.
Voar até um local Controle a câmera de um Icon Map incorporado: voe até um local, enquadre uma caixa delimitadora ou uma camada inteira e leia a vista de volta.
Alternar camadas Crie seu próprio seletor de camadas para um Icon Map incorporado a partir das camadas que o mapa informa e mantenha-o sincronizado com o leitor.
Filtrar com segmentações Controle as segmentações de um Icon Map incorporado a partir da sua própria interface de filtros e mantenha as duas em sincronia, nos dois sentidos.
Filtrar a partir da sua página Aplique filtros declarados a um Icon Map incorporado a partir da sua própria página e veja um filtro não declarado ser recusado.
Selecionar e realçar Realce de forma cruzada uma lista na sua página e as feições de um Icon Map incorporado, nos dois sentidos.
Indicadores, cenas e tours Aplique os indicadores do autor, capture e restaure suas próprias vistas, copie um link para a vista atual e reproduza um tour em um Icon Map incorporado.
Mudar o estilo da incorporação Alterne mapas base, oculte os controles do próprio Icon Map incorporado, desenhe sua própria legenda a partir dos dados da legenda e exporte o mapa como imagem.
Comandos de pop-up e eventos Adicione sua própria ação ao pop-up de feição de um Icon Map incorporado e acompanhe os eventos que ele gera, cada um com um motivo.

Como usar o código

Cada listagem é uma página HTML completa. Até que o SDK esteja no npm, ele fica hospedado aqui: https://www.icon-map.com/js/iconmap-embed/2/iconmap-embed.umd.min.js (cerca de 17 KB, sem dependências; define um único objeto global, IconMapEmbed).

Para executar um exemplo com o seu próprio mapa:

  1. Publique o mapa no Icon Map e adicione seu site em Allowed origins.
  2. Substitua "pub_..." pelo seu ID de publicação.
  3. Substitua os nomes de camadas, segmentações e campos pelos do seu mapa, ou melhor, construa a interface a partir de getLayers(), getSlicers() e getFilterSchema(), como vários dos exemplos fazem.

Novo na API? Comece por Introdução.