Uso Avancado

Tecnicas avancadas de incorporacao, dicas de desempenho e padroes de integracao.

O componente web <tickadoo-map> aceita os seguintes atributos:

Atributo	Tipo	Padrão	Descrição
`map-id`	string	—	Seu ID do mapa (obrigatório)
`locale`	string	`"en"`	Idioma da interface (`en`, `de`, `es`, `fr`, `it`, `pt`, `ja`, `zh`, `cs`)
`theme`	string	`"system"`	Tema de cor: `light`, `dark` ou `system`
`mobile-list-variant`	string	`"carousel"`	Estilo da lista mobile: `carousel` ou `drawer`
`enable-routing`	boolean	`false`	Mostrar direções com seleção de caminhada/bicicleta/carro
`center`	string	—	Centro inicial do mapa como `"lng,lat"` (ex. `"14.42,50.08"`)
`zoom`	number	`10`	Nível de zoom inicial (1–20)
`booking-mode`	string	`"calendar"`	Tipo de fluxo de reserva
`use-category-colors`	boolean	`false`	Usar cores de marcadores por categoria

Carregamento lazy

Se o mapa nao e imediatamente visivel (ex.: abaixo da dobra ou em uma aba), adie o carregamento para melhorar o desempenho da pagina:

Lazy loading

<tickadoo-map map-id="YOUR_MAP_ID" style="height: 500px" loading="lazy">
</tickadoo-map>

Com loading="lazy", o mapa so inicializa quando o elemento entra no viewport.

Design responsivo

O widget e responsivo por padrao, mas aqui estao padroes para layouts comuns:

Secao em largura total

Full-width section

<section style="width: 100%; height: 70vh; min-height: 400px">
  <tickadoo-map map-id="YOUR_MAP_ID" style="width: 100%; height: 100%">
  </tickadoo-map>
</section>

Layout com barra lateral

Sidebar layout

<div style="display: flex; gap: 1rem; height: 600px">
  <div style="flex: 1">
    <!-- Your content -->
  </div>
  <tickadoo-map map-id="YOUR_MAP_ID" style="flex: 1">
  </tickadoo-map>
</div>

Politica de Seguranca de Conteudo (CSP)

Se seu site usa uma Politica de Seguranca de Conteudo, voce precisara permitir estes dominios:

Diretiva	Dominio	Finalidade
`script-src`	`b2b.tickadoo.com`	Script do widget
`script-src`	`calendar-js.tickadoo.com`	Script do calendário de reservas
`connect-src`	`concierge.tickadoo.com`	Requisicoes da API
`connect-src`	`calendar-js.tickadoo.com`	Traduções do calendário de reservas
`connect-src`	`pmtiles.tickadoo.com`	Dados dos tiles do mapa
`connect-src`	`mapbox.tickadoo.com`	Serviços de rotas
`img-src`	`*.tickadoo.com`	Imagens e icones
`style-src`	`'unsafe-inline'`	Estilos do widget

CSP header example

Content-Security-Policy:
  script-src 'self' b2b.tickadoo.com calendar-js.tickadoo.com;
  connect-src 'self' concierge.tickadoo.com calendar-js.tickadoo.com pmtiles.tickadoo.com mapbox.tickadoo.com;
  img-src 'self' *.tickadoo.com;
  style-src 'self' 'unsafe-inline';

Consideracoes de desempenho

O script do widget tem aproximadamente 315KB compactado (incluindo o renderizador de mapa). Ele carrega tiles do mapa sob demanda conforme o usuario navega e aplica zoom. Para melhor desempenho:

Use defer na tag script para evitar bloquear a renderizacao da pagina
Use loading="lazy" no Web Component se ele estiver abaixo da dobra
O widget trata automaticamente o cache de tiles no navegador

Aplicacoes de Pagina Unica (SPAs)

Se seu site e uma SPA (React, Vue, Angular, etc.), use a abordagem de Web Component. O elemento <tickadoo-map> funciona com a renderizacao DOM de qualquer framework.

Para React especificamente:

React usage

function MapSection({ mapId }: { mapId: string }) {
  return (
    <div style={{ height: "500px" }}>
      <tickadoo-map map-id={mapId} />
    </div>
  );
}

Certifique-se de que o script seja carregado apenas uma vez, por exemplo, no seu index.html ou via useEffect em um componente de nivel superior.

Tip

Um pacote React oficial (@tickadoo/map-react) esta disponivel para integracao de primeira classe. Entre em contato em support@tickadoo.com para acesso. O Web Component tambem funciona como modulo ESM para outros frameworks.