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>