WebGL Renderer

Experience the power of WebGL rendering with this demonstration of the SeatmapBookingRenderer.

The interface showcases how to initialize the renderer with WebGL mode and load an event, featuring two intuitive zoom control buttons (+ and -) that allow users to zoom in and out of the seatmap for easy venue navigation.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = 'b754ade8-09de-4bc9-ba30-14f5679fe3db';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10  switchToWebGL: true,
11};
12
13const el = document.getElementById('root');
14
15if (el) {
16  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
17
18  renderer.loadEvent(eventId);
19
20  window.filterSeatsByIds = () => {
21    renderer.filterSeatsByIds([
22      133985, 133984, 134003, 134004, 134026, 134025, 134024, 134022, 134021, 134020, 134019,
23      134009, 134007, 134008, 134006, 134005, 134002, 133983, 133986, 133987, 133989, 133988,
24      133990, 133982, 134001, 134000, 133999, 133998, 133979, 133980, 133981, 133978, 133977,
25      133996, 133976, 133994, 133975, 133995, 133993, 134012, 134011, 134010, 133974, 134014,
26      134015, 134016, 134017, 134018,
27    ]);
28  };
29
30  window.removeFilter = () => {
31    renderer.removeFilter();
32  };
33}

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>