Row Visualization

Enhance user orientation with clear row indicators in this specialized demonstration of the SeatmapBookingRenderer’s row visualization capabilities.

The implementation shows how to display row information alongside seats, helping users easily identify their position within the venue. The interface provides four control buttons: standard zoom controls (+ and -) for navigation, and section management buttons to disable (ds) and enable (es) specific sections, allowing developers to test how row visualization behaves when sections are toggled on and off.

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  showRows: true,
11
12  onSectionClick: (sector) => {
13    console.log('onSectionClick', sector);
14  },
15};
16
17const el = document.getElementById('root');
18
19if (el) {
20  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
21  renderer.loadEvent(eventId);
22}

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>