Pokročilé použití

Pokročilé techniky vkládání, tipy pro výkon a vzory integrace.

Atributy widgetu

Webová komponenta <tickadoo-map> přijímá tyto atributy:

Atribut	Typ	Výchozí	Popis
`map-id`	string	—	ID vaší mapy (povinné)
`locale`	string	`"en"`	Jazyk rozhraní (`en`, `de`, `es`, `fr`, `it`, `pt`, `ja`, `zh`, `cs`)
`theme`	string	`"system"`	Barevný motiv: `light`, `dark` nebo `system`
`mobile-list-variant`	string	`"carousel"`	Styl mobilního seznamu: `carousel` nebo `drawer`
`enable-routing`	boolean	`false`	Zobrazit navigaci s výběrem chůze/kola/auta
`center`	string	—	Počáteční střed mapy jako `"lng,lat"` (např. `"14.42,50.08"`)
`zoom`	number	`10`	Počáteční úroveň přiblížení (1–20)
`booking-mode`	string	`"calendar"`	Typ rezervačního procesu
`use-category-colors`	boolean	`false`	Použít barvy značek podle kategorií

Lazy loading

Pokud mapa není okamžitě viditelná (např. pod ohybem stránky nebo v záložce), odložte načítání pro zlepšení výkonu stránky:

Lazy loading

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

S loading="lazy" se mapa inicializuje až když element vstoupí do viditelné oblasti.

Responzivní design

Widget je ve výchozím nastavení responzivní, ale zde jsou vzory pro běžné rozložení:

Sekce na plnou šířku

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

Rozložení s postranním panelem

<div style="display: flex; gap: 1rem; height: 600px">
  <div style="flex: 1">
    <!-- Váš obsah -->
  </div>
  <tickadoo-map map-id="YOUR_MAP_ID" style="flex: 1">
  </tickadoo-map>
</div>

Content Security Policy (CSP)

Pokud váš web používá Content Security Policy, budete muset povolit tyto domény:

Direktiva	Doména	Účel
`script-src`	`b2b.tickadoo.com`	Script widgetu
`script-src`	`calendar-js.tickadoo.com`	Skript rezervačního kalendáře
`connect-src`	`concierge.tickadoo.com`	API požadavky
`connect-src`	`calendar-js.tickadoo.com`	Překlady rezervačního kalendáře
`connect-src`	`pmtiles.tickadoo.com`	Data mapových dlaždic
`connect-src`	`mapbox.tickadoo.com`	Směrovací služby
`img-src`	`*.tickadoo.com`	Obrázky a ikony
`style-src`	`'unsafe-inline'`	Styly widgetu

Příklad CSP hlavičky

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';

Poznámky k výkonu

Script widgetu má přibližně 315 KB po gzip kompresi (včetně mapového rendereru). Mapové dlaždice se načítají na vyžádání, když uživatel posouvá a přibližuje mapu. Pro nejlepší výkon:

Použijte defer na script tagu, abyste neblokovali vykreslování stránky
Použijte loading="lazy" na web komponentě, pokud je pod ohybem stránky
Widget automaticky spravuje cachování dlaždic v prohlížeči

Single Page Applications (SPA)

Pokud je váš web SPA (React, Vue, Angular atd.), použijte přístup s web komponentou. Element <tickadoo-map> funguje s DOM vykreslováním jakéhokoli frameworku.

Konkrétně pro React:

Použití v Reactu

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

Ujistěte se, že script je načten jednou, např. ve vašem index.html nebo přes useEffect v komponentě nejvyšší úrovně.

Tip

Oficiální React balíček (@tickadoo/map-react) je k dispozici pro prvotřídní integraci. Kontaktujte nás na support@tickadoo.com pro přístup. Web komponenta funguje také jako ESM modul pro ostatní frameworky.