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>