DOCS

Advanced Usage

Advanced embedding techniques, performance tips, and integration patterns.

Widget attributes

The <tickadoo-map> web component accepts these attributes:

AttributeTypeDefaultDescription
map-idstring—Your map ID (required)
localestring"en"UI language. Bundled: en, de, cs, es, fr, it. Other values fall back to English.
themestring"system"Color theme: light, dark, or system
mobile-list-variantstring"carousel"Mobile experience list style: carousel or drawer
enable-routingbooleanfalseShow directions with walk/bike/drive transport mode selector
centerstring—Initial map center as "lng,lat" (e.g. "14.42,50.08")
zoomnumber10Initial zoom level (1–20)
booking-modestring"calendar"Booking flow type
use-category-colorsbooleanfalseUse category-specific marker colors

Lazy loading

If the map isn’t immediately visible (e.g., below the fold or in a tab), defer loading to improve page performance:

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

With loading="lazy", the map initializes only when the element enters the viewport.

Responsive design

The widget is responsive by default, but here are patterns for common layouts:

Full-width section

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>
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)

If your site uses a Content Security Policy, you’ll need to allow these domains:

DirectiveDomainPurpose
script-srcb2b.tickadoo.comWidget script
connect-srcapi.tickadoo.comAPI requests
connect-srcpmtiles.tickadoo.comMap tile data
img-src*.tickadoo.comImages and icons
style-src'unsafe-inline'Widget styles
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';
Performance considerations

The widget script is approximately 315KB gzipped (including the map renderer). It loads map tiles on demand as the user pans and zooms. For best performance:

  • Use defer on the script tag to avoid blocking page rendering
  • Use loading="lazy" on the web component if it’s below the fold
  • The widget automatically handles tile caching in the browser
Single Page Applications (SPAs)

If your site is a SPA (React, Vue, Angular, etc.), use the web component approach. The <tickadoo-map> element works with any framework’s DOM rendering.

For React specifically:

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

Make sure the script is loaded once, e.g., in your index.html or via a useEffect in a top-level component.

Tip

An official React package (@tickadoo/map-react) is available for first-class integration. Contact us at support@tickadoo.com for access. The web component also works as an ESM module for other frameworks.