Utilisation avancee

Techniques d'integration avancees, conseils de performance et modeles d'integration.

Le composant web <tickadoo-map> accepte les attributs suivants :

Attribut	Type	Par défaut	Description
`map-id`	string	—	Votre ID de carte (obligatoire)
`locale`	string	`"en"`	Langue de l’interface (`en`, `de`, `es`, `fr`, `it`, `pt`, `ja`, `zh`, `cs`)
`theme`	string	`"system"`	Thème de couleur : `light`, `dark` ou `system`
`mobile-list-variant`	string	`"carousel"`	Style de liste mobile : `carousel` ou `drawer`
`enable-routing`	boolean	`false`	Afficher les itinéraires avec sélection marche/vélo/voiture
`center`	string	—	Centre initial de la carte en `"lng,lat"` (ex. `"14.42,50.08"`)
`zoom`	number	`10`	Niveau de zoom initial (1–20)
`booking-mode`	string	`"calendar"`	Type de flux de réservation
`use-category-colors`	boolean	`false`	Utiliser les couleurs de marqueurs par catégorie

Chargement differe

Si la carte n’est pas immediatement visible (par ex. sous la ligne de flottaison ou dans un onglet), differez le chargement pour ameliorer les performances de la page :

Lazy loading

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

Avec loading="lazy", la carte s’initialise uniquement lorsque l’element entre dans la zone visible.

Design responsif

Le widget est responsif par defaut, mais voici des modeles pour les mises en page courantes :

Section pleine largeur

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>

Mise en page avec barre 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)

Si votre site utilise une Content Security Policy, vous devrez autoriser ces domaines :

Directive	Domaine	Objectif
`script-src`	`b2b.tickadoo.com`	Script du widget
`script-src`	`calendar-js.tickadoo.com`	Script du calendrier de réservation
`connect-src`	`concierge.tickadoo.com`	Requetes API
`connect-src`	`calendar-js.tickadoo.com`	Traductions du calendrier de réservation
`connect-src`	`pmtiles.tickadoo.com`	Donnees des tuiles de carte
`connect-src`	`mapbox.tickadoo.com`	Services d’itinéraire
`img-src`	`*.tickadoo.com`	Images et icones
`style-src`	`'unsafe-inline'`	Styles du 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';

Considerations de performance

Le script du widget pese environ 315 Ko compresse (gzip), incluant le moteur de rendu cartographique. Il charge les tuiles a la demande lorsque l’utilisateur navigue et zoome. Pour de meilleures performances :

Utilisez defer sur la balise script pour eviter de bloquer le rendu de la page
Utilisez loading="lazy" sur le web component s’il est sous la ligne de flottaison
Le widget gere automatiquement la mise en cache des tuiles dans le navigateur

Applications monopage (SPA)

Si votre site est une SPA (React, Vue, Angular, etc.), utilisez l’approche web component. L’element <tickadoo-map> fonctionne avec le rendu DOM de n’importe quel framework.

Pour React specifiquement :

React usage

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

Assurez-vous que le script est charge une seule fois, par exemple dans votre index.html ou via un useEffect dans un composant de haut niveau.

Tip

Un package React officiel (@tickadoo/map-react) est disponible pour une integration de premiere classe. Contactez-nous a support@tickadoo.com pour y acceder. Le web component fonctionne egalement comme module ESM pour d’autres frameworks.