Utilizzo avanzato

Tecniche di integrazione avanzate, suggerimenti sulle prestazioni e modelli di integrazione.

Il componente web <tickadoo-map> accetta i seguenti attributi:

Attributo	Tipo	Predefinito	Descrizione
`map-id`	string	—	Il tuo ID mappa (obbligatorio)
`locale`	string	`"en"`	Lingua dell’interfaccia (`en`, `de`, `es`, `fr`, `it`, `pt`, `ja`, `zh`, `cs`)
`theme`	string	`"system"`	Tema colore: `light`, `dark` o `system`
`mobile-list-variant`	string	`"carousel"`	Stile lista mobile: `carousel` o `drawer`
`enable-routing`	boolean	`false`	Mostra indicazioni con selezione a piedi/bici/auto
`center`	string	—	Centro iniziale della mappa come `"lng,lat"` (es. `"14.42,50.08"`)
`zoom`	number	`10`	Livello di zoom iniziale (1–20)
`booking-mode`	string	`"calendar"`	Tipo di flusso di prenotazione
`use-category-colors`	boolean	`false`	Usa colori dei marcatori per categoria

Caricamento differito

Se la mappa non e immediatamente visibile (ad es. sotto la piega o in una scheda), differisci il caricamento per migliorare le prestazioni della pagina:

Lazy loading

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

Con loading="lazy", la mappa si inizializza solo quando l’elemento entra nel viewport.

Design responsivo

Il widget e responsivo per impostazione predefinita, ma ecco alcuni modelli per i layout piu comuni:

Sezione a larghezza piena

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 con barra laterale

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>

Content Security Policy (CSP)

Se il tuo sito utilizza una Content Security Policy, dovrai consentire questi domini:

Direttiva	Dominio	Scopo
`script-src`	`b2b.tickadoo.com`	Script del widget
`connect-src`	`api.tickadoo.com`	Richieste API
`connect-src`	`pmtiles.tickadoo.com`	Dati delle tile della mappa
`img-src`	`*.tickadoo.com`	Immagini e icone
`style-src`	`'unsafe-inline'`	Stili del widget

CSP header example

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

Considerazioni sulle prestazioni

Lo script del widget pesa circa 315KB compresso (gzip), incluso il motore di rendering della mappa. Carica le tile su richiesta mentre l’utente naviga e zooma. Per le migliori prestazioni:

Usa defer sul tag script per evitare di bloccare il rendering della pagina
Usa loading="lazy" sul web component se si trova sotto la piega
Il widget gestisce automaticamente il caching delle tile nel browser

Applicazioni a pagina singola (SPA)

Se il tuo sito e una SPA (React, Vue, Angular, ecc.), usa l’approccio web component. L’elemento <tickadoo-map> funziona con il rendering DOM di qualsiasi framework.

Per React nello specifico:

React usage

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

Assicurati che lo script venga caricato una sola volta, ad esempio nel tuo index.html o tramite un useEffect in un componente di livello superiore.

Tip

Un pacchetto React ufficiale (@tickadoo/map-react) e disponibile per un’integrazione di prima classe. Contattaci a support@tickadoo.com per l’accesso. Il web component funziona anche come modulo ESM per altri framework.