WebGL Custom Styling

Unleash creative design possibilities with this advanced styling demonstration of the SeatmapBookingRenderer in WebGL mode.

The implementation showcases sophisticated visual customization including custom seat styles, dynamic styling based on seat properties, custom icons, and price-based coloring. The interface includes two zoom control buttons (+ and -) that allow users to examine the detailed styling at different magnification levels, revealing how the WebGL renderer maintains crisp visuals and smooth performance even with complex custom styling applied.

Code

  1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
  2import '../main.css';
  3
  4const eventId = 'a4a75361-7823-4847-bf22-336843022e80';
  5const publicKey = '99a77be5-4680-4b5e-b9ce-962e78f9b811';
  6
  7const COLOR_UNAVAILABLE = '#bbb';
  8
  9const settings: IBookingRendererSettings = {
 10  publicKey,
 11  switchToWebGL: true,
 12  theme: {
 13    gridStep: 14,
 14    bgColor: '#f7f7f7',
 15
 16    priceColors: [
 17      [
 18        '#9C27B0',
 19        '#673AB7',
 20        '#3F51B5',
 21        '#2196F3',
 22        '#00BCD4',
 23        '#009688',
 24        '#4CAF50',
 25        '#CDDC39',
 26        '#FFC107',
 27        '#FF9800',
 28        '#FF5722',
 29        '#F44336',
 30        '#E91E63',
 31      ],
 32      ['#2196F3'],
 33      ['#2196F3', '#FFC107'],
 34      ['#673AB7', '#2196F3', '#FFC107'],
 35    ],
 36
 37    // Put your SVG icons here
 38    images: {
 39      checkmark:
 40        '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 8.5l5 5 10-10" stroke="#fff" stroke-width="2"/></svg>',
 41      star: '<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 0l2.163 5.023 5.445.505-4.108 3.61 1.202 5.334L8 11.68l-4.702 2.792L4.5 9.137.392 5.527l5.445-.504L8 0z" fill="#fff"/></svg>',
 42    },
 43
 44    // Here you can redefine default seat styles
 45    seatStyles: {
 46      default: {
 47        size: 16,
 48        color: COLOR_UNAVAILABLE,
 49      },
 50      unavailable: {
 51        size: 6,
 52        color: COLOR_UNAVAILABLE,
 53      },
 54      hovered: {
 55        size: 38,
 56        color: COLOR_UNAVAILABLE,
 57        seatName: {
 58          font: '18px Arial, sans-serif',
 59          color: '#fff',
 60        },
 61      },
 62      selected: {
 63        size: 42,
 64        color: COLOR_UNAVAILABLE,
 65        imageId: 'checkmark',
 66        shadow: {
 67          blur: 20,
 68          color: 'rgba(0, 0, 0, 0.3)',
 69        },
 70      },
 71    },
 72  },
 73
 74  onBeforeSeatDraw: (e) => {
 75    let newStyle = Object.assign({}, e.style);
 76
 77    // You can use custom condition or conditions
 78    // state: 'default' | 'unavailable' | 'hovered' | 'selected'
 79    const isStarred = e.seat.name === '7' && e.state === 'default' && e.seat.priceId;
 80
 81    if (isStarred) {
 82      newStyle = {
 83        size: 28,
 84        color: COLOR_UNAVAILABLE,
 85        imageId: 'star',
 86      };
 87    }
 88
 89    // Add price coloring
 90    if (e.seat.priceId) {
 91      newStyle.color = e.context.pricesById[Number(e.seat.priceId)].color;
 92    }
 93    return newStyle;
 94  },
 95};
 96
 97const el = document.getElementById('root');
 98
 99if (el) {
100  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
101  renderer.loadEvent(eventId);
102}

HTML

1<div id="root"></div>
2<div class="ZoomButtonList">
3  <div class="ZoomButton" onclick="seatmapRenderer.zoomIn()">+</div>
4  <div class="ZoomButton" onclick="seatmapRenderer.zoomOut()">–</div>
5</div>