Seatmap Canvas

// est. 2016 · licencia MIT · retirado con honores

seatmap-canvas, nuestro veterano

Publicado en 2016 y congelado en su sitio, y aun así sigue cumpliendo su función en producción por todo el mundo. Que siga así mucho tiempo.

Explorar Seatmap Canvas NextNueva versiónVer en GitHubLeer la documentación
  • Licencia MIT
  • @alisaitteke/seatmap-canvas
  • D3.js · SVG
  • TypeScript
seatmap.io/demo
La demo original de seatmap-canvas v1, con zoom en las localidades
la demo original, circa 2016, sigue activa en /demo

Congelado, no olvidado

La v1 está terminada, deliberadamente. Esto es lo que significa para ti.

Sin nuevas funciones

No hay funciones nuevas ni versiones nuevas: lo que hay en npm es definitivo. Lo que integras hoy se comportará igual mañana.

MIT, para siempre

La licencia no cambia. Autoalójalo, inclúyelo en lo que construyas, sin debernos nada: sin tarifas por localidad, nunca.

Las mismas direcciones

La documentación, los ejemplos y la demo conservan sus URLs de siempre en seatmap.io, así que los enlaces citados y los marcadores siguen funcionando.

En marcha en minutos

Trae tu propio JSON del recinto y tu backend: la v1 es el renderizador y el widget de selección, no un sistema de venta de entradas.

  1. Instalar

    npm install @alisaitteke/seatmap-canvas añade el renderizador y los tipos de TypeScript.

  2. Introduce tu recinto

    Pasa bloques y localidades como JSON plano con replaceData(). El inventario, los precios y las retenciones permanecen en tu backend.

  3. Captura los clics

    SEAT.CLICK se dispara en cada pulsación; alterna la selección y luego lee getSelectedSeats() en el proceso de compra.

Wrappers oficiales

  • Vanilla JS
  • React
  • Vue 3
  • Next.js
  • Angular
venue-picker.tsx
import { SeatmapCanvas } from "@alisaitteke/seatmap-canvas/react";
import "@alisaitteke/seatmap-canvas/dist/seatmap.canvas.css";
 
export function VenuePicker({ blocks }) {
  return (
    <SeatmapCanvas
      options={{
        legend: true,
        style: { seat: { hover: "#8fe100", selected: "#8fe100" } },
      }}
      data={blocks}
      onSeatClick={(seat) =>
        seat.isSelected() ? seat.unSelect() : seat.select()
      }
    />
  );
}
React · @alisaitteke/seatmap-canvasSEAT.CLICK

¿No quieres escribir JSON del recinto a mano? Seatmap Studio es el editor visual de planos de la plataforma mantenida.

Ver Seatmap Studio →

La demo original, sigue activa

El mismo entorno de pruebas que la comunidad usa desde hace años: haz zoom desde el recinto hasta la butaca, prueba formas y selecciones.

seatmap.io/demoInterfaz de la demo seatmap-canvas v1 con dos bloques de localidades y un panel de selección
El entorno de pruebas v1: intacto, sin autenticación, gratis para probar. Abrir la demo en vivo →

Documentación y código fuente

Comparar

Lo que puede sostener seatmap-canvas v1, y lo que abre Seatmap Canvas Next
seatmap-canvas v1Seatmap Canvas Next
Hasta dónde llegaUna sala de unos miles de localidadesUn estadio que sigue desplazándose y haciendo zoom
Arriba y abajoUna sola plantaNueve plantas — palco sobre patio, camarote sobre camarote
Lo que cabe en la nocheLocalidades en bloquesLocalidades, de pie, stands, mesas de banquete
El suelo donde puede vivirUn plano interiorUn teatro, un recinto de festival, un circuito en un mapa
El camino hasta la localidadRecinto, luego bloque, luego la localidadDel mapa, por las plantas, hasta la localidad
Cómo nace el recintoLo escribes en JSONLo dibujas en Studio. El mapa lo reproduce.
Lo que puede decir una localidadUn título y una notaPrecio, categoría, una foto — la oferta en la localidad
Cuando se llena la salaEnvías un JSON nuevoVendido y retenido llegan al mapa al momento
Sin puntero—Recorrer el mapa con el teclado

Técnico

Motor, API y empaquetado: seatmap-canvas v1 y Seatmap Canvas Next
seatmap-canvas v1Seatmap Canvas Next
RenderizadorD3.js · SVGWebGL2
Formato del planoblocks[] + seats[]Studio ChartDocument (blocks, objects, floors, geo)
API de selecciónSEAT.CLICK, select / unselectLos mismos eventos host-toggle
Estado de localidadEl host reescribe el JSONsetSeatStatus, applyObjectAvailability
TooltipTítulo / notaresolveTooltipOffer
Paquetes de frameworkReact, Vue 3, Next.js, AngularVanilla JS
Parser PretixIntegradoNo se envía
LicenciaMITComercial
Instalaciónnpm i @alisaitteke/seatmap-canvasBundle con licencia, no está en npm
Explorar Seatmap Canvas Next