@alisaitteke/seatmap-canvas

Seat Model

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

Block Model

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

Configuration Options

{
  click_enable_sold_seats: true,  // Enable clicking on unavailable seats (default: false)
  
  // Global Background Image
  background_image: "assets/stadium.jpg",      // Image URL (PNG, JPG, SVG, WebP, GIF)
  background_opacity: 0.3,                     // 0-1 (default: 0.3)
  background_fit: "cover",                     // "cover" | "contain" | "fill" | "none"
  background_x: 0,                            // Manual X position (optional, auto-detect if null)
  background_y: 0,                            // Manual Y position (optional)
  background_width: 1500,                     // Manual width (optional)
  background_height: 1000                     // Manual height (optional)
}

Global Background

Add a background image to the entire stage:

const seatmap = new SeatmapCanvas(".container", {
  background_image: "assets/concert-hall.jpg",
  background_opacity: 0.3,
  background_fit: "cover"
});

With Manual Positioning:

const seatmap = new SeatmapCanvas(".container", {
  background_image: "assets/stadium.jpg",
  background_x: -500,        // Position X
  background_y: -500,        // Position Y
  background_width: 3000,    // Width
  background_height: 2500,   // Height
  background_opacity: 0.4,
  background_fit: "contain"  // Preserve aspect ratio
});

Block-Level Background

Add custom backgrounds to individual blocks:

{
  blocks: [{
    id: "vip-section",
    title: "VIP Area",
    background_image: "assets/vip-lounge.jpg",
    background_opacity: 0.6,
    background_fit: "cover",
    seats: [...]
  }, {
    id: "general",
    title: "General Admission",
    background_image: "assets/general-area.jpg",
    background_opacity: 0.5,
    seats: [...]
  }]
}

With Manual Positioning:

{
  blocks: [{
    id: "block-a",
    background_image: "section-a.jpg",
    background_x: 100,         // Exact X coordinate
    background_y: 200,         // Exact Y coordinate
    background_width: 500,     // Exact width
    background_height: 400,    // Exact height
    background_opacity: 0.7,
    background_fit: "cover",
    seats: [...]
  }]
}

Fit Modes

• cover (default) - Image covers entire area, may crop
• contain - Image fits inside area, preserves aspect ratio
• fill - Image stretches to fill area
• none - Image keeps original size, centered

Features

• ✅ Auto-Detection: X, Y, Width, Height auto-calculated from bounds if not specified
• ✅ Clip-Path Masking: Block backgrounds clipped to exact block shape
• ✅ Opacity Control: Adjustable transparency (0-1)
• ✅ Auto-Hide Bounds: Block borders/fills hidden when background exists
• ✅ Zoom Preserved: Bounds calculations still work for zoom levels
• ✅ Format Support: PNG, JPG, SVG, WebP, GIF, all web-compatible formats
• ✅ Performance: Browser-native image loading and caching

Use Cases

Stadium/Arena:

// Stadium overview as background
background_image: "stadium-aerial.jpg"

Theater:

// Stage photo per seating section
blocks: [
  { id: "orchestra", background_image: "orchestra-view.jpg" },
  { id: "balcony", background_image: "balcony-view.jpg" }
]

Restaurant:

// Floor plan as background
background_image: "floor-plan.png",
background_opacity: 0.5,
background_fit: "contain"

Event Space:

// Custom venue layout
background_image: "venue-layout.svg",
background_fit: "contain"

Important Notes

• Background images don't affect zoom calculations (bounds preserved)
• Block borders/fills automatically hidden when background assigned
• CORS: Images must be same-origin or CORS-enabled
• Performance: Use optimized images (< 500KB recommended)