Seat Filtering

Focus on specific seats with this filtering demonstration of the SeatmapBookingRenderer’s seat isolation capabilities.

The interface provides four intuitive control buttons: standard zoom controls (+ and -) for navigation, a filter button (f) that highlights selected seats by their IDs while dimming others, and a remove filter button (rf) that restores the default view. Perfect for scenarios requiring attention on particular seats while maintaining overall context.

Code

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

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 class="ZoomButton" onclick="filterSeatsByIds()">f</div>
6  <div class="ZoomButton" onclick="removeFilter()">rf</div>
7</div>