Section Outline Layer

Improve spatial awareness with animated section boundaries in this specialized demonstration of the SeatmapBookingRenderer’s outline layer capabilities.

The implementation shows how to enable section outlines during animations, providing users with clear visual cues about section boundaries during interactions like zooming and panning. The interface includes two zoom control buttons (+ and -) that allow users to test how the outline layers respond to viewport changes, enhancing the overall user experience by maintaining context during navigation.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = '304cafc3-ec91-490a-983a-f80a52432363';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10
11  showOutlineLayerOnAnimation: true,
12
13  // Mandatory for selections to work
14  onSectionClick: (sector) => {
15    console.log('onSectionClick', sector);
16  },
17};
18
19(() => {
20  const el = document.getElementById('root');
21  if (!el) {
22    return;
23  }
24
25  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
26
27  renderer.loadEvent(eventId);
28})();

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>