Seatmap Canvas is an advanced, open-source library for interactive seat selection in various settings such as stadiums, theaters, and event spaces. Designed with d3.js, this code version is optimized for developers looking for a customizable and efficient solution to handle seat arrangements and user interactions.

• React Integration: Designed specifically for React projects, offering a streamlined development experience.
• Dynamic Seat Selection: Enables interactive selection, categorization, and location of seats.
• Customizable Styles: Extensive styling options for seats, blocks, and labels to fit your application's design.
• Interactive Seat Models: Define properties and behaviors for seats, including salability, notes, and custom data.
• Block Model Configuration: Organize seats into blocks with customizable titles, colors, and labels.
• Event Handling: Simplified event listeners for seat interactions, allowing dynamic responses to user actions.

• Vue Integration: Designed specifically for Vue or Nuxt projects, offering a streamlined development experience.
• Angular Integration: Designed specifically for Angular projects, offering a streamlined development experience.

LIVE DEMO

• Seat selection
• Seat categorizing
• Locating
• Turnstile and Gate information

npm i @alisaitteke/seatmap-canvas --save OR yarn add @alisaitteke/seatmap-canvas --save 

{ "resizable": true, "seat_style": { "radius": 12, "color": "#6796ff", "hover": "#5671ff", "not_salable": "#424747", "selected": "#56aa45", "focus": "#435fa4", "focus_out": "#56aa45" }, "block_style": { "fill": "#e2e2e2", "stroke": "#e2e2e2" }, "label_style": { "color": "#000", "radius": 12, "font-size": "12px", "bg": "#ffffff" } } 

var seatmap = new SeatmapCanvas(".seats_container",config);

{ "id": 1, "title": "49", "x": 0, "y": 0, "salable": true, "note": "note test", "color":"#ffffff", "custom_data": { "any": "things" } }

{ "blocks": [ { "id": 1, "title": "Test Block 1", "color": "#2c2828", "labels": [ { "title": "A", "x": -30, "y": 0 }, { "title": "B", "x": 120, "y": 30 } ], "seats": [ { "id": 1, "x": 0, "y": 0, "salable": true, "note": "note test", "title": "49" }, { "id": 2, "x": 30, "y": 0, "salable": true, "note": "note test", "title": "47" } ] } ] } 

seatmap.setData(data);

seatmap.addEventListener("seat_click", (seat) => { console.log(seat); if (seat.selected) { seatmap.seatUnselect(seat); } else { seatmap.seatSelect(seat); } });

let config = { click_enable_sold_seats: true // default false }

seatmap.addEventListener("seat_click", (seat) => { var selectedSeats = seatmap.getSelectedSeats(); });

Ali Sait TEKE alisaitt@gmail.com