Seatmap Canvas

// est. 2016 · mit licensed · retired in honor

seatmap-canvas, notre vétéran

Sorti en 2016 et figé en l'état, mais toujours discretement en service en production partout dans le monde. Qu'il continue longtemps.

Explorer Seatmap Canvas NextNouvelle versionVoir sur GitHubLire la documentation
  • Licence MIT
  • @alisaitteke/seatmap-canvas
  • D3.js · SVG
  • TypeScript
seatmap.io/demo
La démo originale seatmap-canvas v1, zoomée sur ses places
la démo originale, vers 2016, toujours en ligne sur /demo

Figé, pas oublié

La v1 est terminée, volontairement. Voici ce que cela signifie pour vous.

Figé en fonctionnalités

Pas de nouvelles fonctionnalités, pas de nouvelles versions : ce qui est sur npm est définitif. Ce que vous intégrez aujourd'hui se comporte de la même façon demain.

MIT, pour toujours

La licence ne change jamais. Auto-hébergez-le, intégrez-le dans tout ce que vous construisez, sans rien nous devoir : pas de frais par place, jamais.

Les mêmes adresses

Documentation, exemples et démo conservent leurs URL historiques sur seatmap.io, donc les liens cités et les favoris continuent de fonctionner.

Opérationnel en quelques minutes

Apportez votre propre JSON de salle et votre backend : la v1 est le moteur de rendu et le widget de sélection, pas une stack de billetterie.

  1. Installer

    npm install @alisaitteke/seatmap-canvas ajoute le moteur de rendu et les types TypeScript.

  2. Alimentez-le avec votre salle

    Passez blocs et places en JSON brut via replaceData(). Inventaire, tarification et blocages temporaires restent dans votre backend.

  3. Intercepter les clics

    SEAT.CLICK se déclenche à chaque tap ; basculez la sélection, puis lisez getSelectedSeats() au paiement.

Wrappers officiels

  • 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

Vous ne voulez pas écrire le JSON de salle à la main ? Seatmap Studio est l'éditeur visuel de plans de la plateforme maintenue.

Découvrir Seatmap Studio →

La démo originale, toujours en ligne

Le même terrain de jeu que la communauté utilise depuis des années : zoomez de la salle jusqu'à la place, testez formes et sélections.

seatmap.io/demoInterface de démo seatmap-canvas v1 avec deux blocs de places et un panneau de sélection
Le terrain de jeu v1 : intact, sans authentification, libre d'essai. Ouvrir la démo en direct →

Documentation et code source

Comparer

Ce que seatmap-canvas v1 peut porter, et ce que Seatmap Canvas Next ouvre
seatmap-canvas v1Seatmap Canvas Next
Jusqu'où ça vaUne salle de quelques milliers de placesUn stade qui se déplace et zoome encore
Au-dessus et en dessousUn seul niveauNeuf étages — balcon sur parterre, cabine sur cabine
Ce que la soirée peut tenirDes places en blocsPlaces, debout, stands, tables de banquet
Le sol où ça peut vivreUn plan indoorUn théâtre, un champ de festival, un circuit sur une carte
Le chemin jusqu'à la placeLa salle, puis le bloc, puis la placeDe la carte, à travers les étages, jusqu'à la place
Comment naît la salleVous l'écrivez en JSONVous la dessinez dans Studio. La carte la rejoue.
Ce qu'une place peut direUn titre et une noteLe prix, la catégorie, une image — l'offre sur la place
Quand la salle se remplitVous renvoyez un JSONVendu et optionné arrivent sur la carte au fil de l'eau
Sans pointeur—Parcourir la carte au clavier

Technique

Moteur, API et distribution : seatmap-canvas v1 et Seatmap Canvas Next
seatmap-canvas v1Seatmap Canvas Next
Moteur de renduD3.js · SVGWebGL2
Format du planblocks[] + seats[]Studio ChartDocument (blocks, objects, floors, geo)
API de sélectionSEAT.CLICK, select / unselectMêmes événements host-toggle
État des placesL'hôte réécrit le JSONsetSeatStatus, applyObjectAvailability
InfobulleTitre / noteresolveTooltipOffer
Paquets frameworkReact, Vue 3, Next.js, AngularVanilla JS
Parseur PretixIntégréNon livré
LicenceMITCommerciale
Installationnpm i @alisaitteke/seatmap-canvasBundle sous licence, pas sur npm
Explorer Seatmap Canvas Next