Section Selection
Master section highlighting techniques with this interactive demonstration of the SeatmapBookingRenderer’s section selection capabilities.
The interface features five control buttons: standard zoom controls (+ and -), section selection by IDs (si), section selection by names (sn), and a deselection button (d) to clear highlights. This example showcases flexible approaches to emphasize specific venue areas using both section identifiers and human-readable section names.
Code
1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
2import '../main.css';
3
4const eventId = '526b78be-331e-44ea-a342-098ad7572074';
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.setSectionSelectionWithIds = () => {
20 renderer?.setSectionSelection([1692884, 1692886, 1692892, 1692835]);
21
22 console.log(renderer?.getSvgSectionBySelection());
23 };
24
25 window.setSectionSelectionWithNames = () => {
26 renderer?.setSectionSelection(['303', '304', '305', '306', '307', '308']);
27
28 console.log(renderer?.getSvgSectionBySelection());
29 };
30
31 window.unsetSectionSelection = () => {
32 renderer?.setSectionSelection();
33
34 console.log(renderer?.getSvgSectionBySelection());
35 };
36}
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="setSectionSelectionWithIds()">si</div>
6 <div class="ZoomButton" onclick="setSectionSelectionWithNames()">sn</div>
7 <div class="ZoomButton" onclick="unsetSectionSelection()">d</div>
8</div>