Zoom to Section Programmatically

 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
11  switchToWebGL: true,
12};
13
14const el = document.getElementById('root');
15
16if (el) {
17  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
18
19  renderer.loadEvent(eventId);
20
21  window.zoomToSection = (name: string) => {
22    renderer.zoomToSection(name, { focus: true });
23  };
24}

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="zoomToSection('102')">102</div>
6  <div class="ZoomButton" onclick="zoomToSection('107')">107</div>
7  <div class="ZoomButton" onclick="zoomToSection('310')">310</div>
8  <div class="ZoomButton" onclick="zoomToSection('315')">315</div>
9</div>