Venue Outlines

Visualize the architectural framework of venues with this outline-focused demonstration of the SeatmapBookingRenderer.

The example highlights how structural elements and boundaries are rendered to provide spatial context for the seating arrangement, helping users understand the venue’s layout. The interface includes two zoom control buttons (+ and -) that allow users to examine outline details at different magnification levels, from overall venue structure to specific section boundaries.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = '5ab4c87e-05ed-4a9a-9426-70deda060a2b';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10
11  disableOutlinesInHelicopterView: true,
12};
13
14(() => {
15  const el = document.getElementById('root');
16  if (!el) {
17    return;
18  }
19
20  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
21
22  renderer.loadEvent(eventId);
23})();

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>