Section Filtering

Spotlight specific venue areas with this advanced section filtering demonstration of the SeatmapBookingRenderer.

The interface provides six control buttons: standard zoom controls (+ and -) for navigation, and four section management buttons - disable sections (ds), enable sections (es), filter sections (fs) to highlight selected sections while dimming others, and remove filter (rfs) to restore the default view. This implementation showcases different approaches to section visibility management, allowing developers to create focused user experiences that guide attention to relevant venue areas.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = 'a7f2453a-e00a-4d3a-a62b-335d4e4b389d';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10
11  theme: {
12    svgSectionStyles: {
13      default: {},
14      unavailable: {
15        bgColor: '#bbb',
16      },
17      filtered: {
18        bgColor: '#999',
19      },
20      hovered: {
21        bgColor: '#ffff00',
22        stroke: {
23          color: '#0000ff',
24        },
25        cursor: 'pointer',
26      },
27      selected: {
28        bgColor: '#0000ff',
29        stroke: {
30          color: '#000000',
31          opacity: 0.4,
32        },
33      },
34    },
35  },
36
37  onSectionClick: (sector) => {
38    console.log('onSectionClick', sector);
39  },
40};
41
42const el = document.getElementById('root');
43
44if (el) {
45  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
46
47  renderer.loadEvent(eventId);
48
49  window.disableSvgSectionsByIds = () => {
50    renderer?.disableSvgSectionsByIds([1026795, 1026801, 1026800, 1026799, 1026798]);
51  };
52
53  window.enableSvgSectionsByIds = () => {
54    renderer?.enableSvgSectionsByIds([1026795, 1026801, 1026800, 1026799, 1026798]);
55  };
56
57  window.filterSvgSectionsByIds = () => {
58    renderer?.filterSvgSectionsByIds([1026792, 1026794, 1026797, 1026798]);
59  };
60
61  window.removeFilterSvgSectionsByIds = () => {
62    renderer?.removeFilterSvgSectionsByIds();
63  };
64}

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="disableSvgSectionsByIds()">ds</div>
6  <div class="ZoomButton" onclick="enableSvgSectionsByIds()">es</div>
7  <div class="ZoomButton" onclick="filterSvgSectionsByIds()">fs</div>
8  <div class="ZoomButton" onclick="removeFilterSvgSectionsByIds()">rfs</div>
9</div>