Canvas

Cada hover, clic y zoom es un evento.

Suscríbete a eventos de localidad, bloque, objeto, sección, planta y zoom con una API de listener, y recibe tus metadatos de localidad devueltos en cada payload.

Explorar destacados

¿Te suena familiar?

Un mapa que no habla

Rastrear el DOM de un widget para saber qué clicó el usuario es arqueología frágil. Una API de eventos real informa de cada interacción.

Polling del estado

Leer la selección en un bucle con timeout es una condición de carrera con sombrero. Los eventos empujan en el momento del cambio.

Payloads sin contexto

Un clic que dice «localidad 42» y nada más te obliga a rederivar todo. custom_data devuelve tus ids, precios y refs.

El mapa es un componente, no una caja negra

01Una llamada subscribeaddEventListener con nombres de evento planos, seat_click, zoom_level_change, cambios de planta y compañía.
02La superficie completaLocalidades, bloques, objetos, secciones, plantas, niveles de zoom y ready. Cada interacción informa.
03Props nativas del frameworkReact recibe onSeatClick y similares; Vue emite @seat-click, mismos eventos, forma idiomática.
04Metadatos en el payloadTu custom_data vuelve con cada evento. La integración con la cesta se escribe sola.
05Granularidad a nivel hoverMouse enter y leave en localidades alimentan tooltips y previsualizaciones sin adivinar.
06Consciente del ciclo de vidaREADY te dice cuándo el mapa es de verdad interactivo, sin competir con el render.

Conéctalo en minutos

seatmap.ts
seatmap.addEventListener("ready", () => {
  console.log("map is live");
});
 
seatmap.addEventListener("seat_click", (seat) => {
  // tus metadatos vuelven en cada evento
  cart.preview({
    priceId: seat.custom_data.priceId,
    label: seat.label,
  });
});
 
seatmap.addEventListener("zoom_level_change", (level) => {
  breadcrumbs.sync(level); // "venue" | "block" | "seat"
});
TypeScript · seatmap-canvasseat_click · zoom_level_change

Escucha el mapa

Eventos con tus metadatos, en vivo en la demo.