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:
- Publique o mapa no Icon Map e adicione seu site em Allowed origins.
- Substitua
"pub_..."pelo seu ID de publicação. - Substitua os nomes de camadas, segmentações e campos pelos do seu mapa, ou melhor, construa a interface a partir de
getLayers(),getSlicers()egetFilterSchema(), como vários dos exemplos fazem.
Novo na API? Comece por Introdução.