DOCS

Uso avanzado

Técnicas avanzadas de integración, consejos de rendimiento y patrones de integración.

Atributos del widget

El componente web <tickadoo-map> acepta estos atributos:

AtributoTipoPredeterminadoDescripción
map-idstring—Tu ID de mapa (obligatorio)
localestring"en"Idioma de la interfaz (en, de, es, fr, it, pt, ja, zh, cs)
themestring"system"Tema de color: light, dark o system
mobile-list-variantstring"carousel"Estilo de lista móvil: carousel o drawer
enable-routingbooleanfalseMostrar indicaciones con selector de caminar/bicicleta/conducir
centerstring—Centro inicial del mapa como "lng,lat" (ej. "14.42,50.08")
zoomnumber10Nivel de zoom inicial (1–20)
booking-modestring"calendar"Tipo de flujo de reserva
use-category-colorsbooleanfalseUsar colores de marcador por categoría

Carga diferida

Si el mapa no es visible inmediatamente (por ejemplo, debajo del pliegue o en una pestaña), difiere la carga para mejorar el rendimiento de la página:

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

Con loading="lazy", el mapa se inicializa solo cuando el elemento entra en el viewport.

Diseño responsivo

El widget es responsivo por defecto, pero aquí tienes patrones para diseños comunes:

Sección de ancho completo

Sección de ancho completo 
<section style="width: 100%; height: 70vh; min-height: 400px">
  <tickadoo-map map-id="YOUR_MAP_ID" style="width: 100%; height: 100%">
  </tickadoo-map>
</section>

Diseño con barra lateral

Diseño con barra lateral 
<div style="display: flex; gap: 1rem; height: 600px">
  <div style="flex: 1">
    <!-- Tu contenido -->
  </div>
  <tickadoo-map map-id="YOUR_MAP_ID" style="flex: 1">
  </tickadoo-map>
</div>

Content Security Policy (CSP)

Si tu sitio usa una Content Security Policy, necesitarás permitir estos dominios:

DirectivaDominioPropósito
script-srcb2b.tickadoo.comScript del widget
connect-srcapi.tickadoo.comPeticiones de API
connect-srcpmtiles.tickadoo.comDatos de mosaicos del mapa
img-src*.tickadoo.comImágenes e iconos
style-src'unsafe-inline'Estilos del widget
Ejemplo de cabecera CSP 
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';
Consideraciones de rendimiento

El script del widget pesa aproximadamente 315 KB comprimido con gzip (incluyendo el renderizador del mapa). Carga los mosaicos del mapa bajo demanda a medida que el usuario se desplaza y hace zoom. Para el mejor rendimiento:

  • Usa defer en la etiqueta script para evitar bloquear el renderizado de la página
  • Usa loading="lazy" en el web component si está debajo del pliegue
  • El widget gestiona automáticamente el almacenamiento en caché de mosaicos en el navegador
Single Page Applications (SPAs)

Si tu sitio es una SPA (React, Vue, Angular, etc.), usa el enfoque de web component. El elemento <tickadoo-map> funciona con el renderizado DOM de cualquier framework.

Específicamente para React:

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

Asegúrate de que el script se cargue una vez, por ejemplo, en tu index.html o mediante un useEffect en un componente de nivel superior.

Tip

Un paquete oficial de React (@tickadoo/map-react) está disponible para una integración de primera clase. Contáctanos en support@tickadoo.com para obtener acceso. El web component también funciona como módulo ESM para otros frameworks.