Zoom Settings

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = '91fe16c5-81b1-421c-969a-9bf0c040ceda';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10
11  // At this level a transition will happen from outlines selecion to a seat selection
12  seatSelectionMinZoom: 0.25,
13
14  // All fields are mandatory for zoomSettings
15  zoomSettings: {
16    // List of zoom levels where user will have a stop after clicking zoom in or zoom out
17    // Smaller value like 0.5 equals eagle view when bigger part of the venue is visible
18    // Bigger value like 2 equals to helicopter view when seats are visible at closes range
19    // This presets will be extended by extra value equal to zoom-to-fit scale, calculated during initial render
20    presets: [0.05, 0.25, 0.5, 0.75, 1, 2, 4],
21    // We calculate zoom level to fit the venue during initial render. There is an option to limit it for small venues
22    maxZoomToFitScale: 1,
23    // For tablets and phones user can pinch the venue skipping preset levels
24    // We just need to provide min and max values to limit the zoom user can apply with pinch
25    minPinchZoom: 0.05,
26    maxPinchZoom: 4,
27  },
28
29  visibilitySettings: {
30    seats: {
31      visible: {
32        from: 0.75,
33        to: 1,
34      },
35      selectable: {
36        from: 1,
37      },
38    },
39    outlines: {
40      visible: {
41        to: 0.5,
42      },
43      selectable: {
44        to: 0.25,
45      },
46    },
47  },
48
49  onZoomStart: (to, from) => {
50    console.log('onZoomStart', to, from);
51  },
52  onZoomEnd: (to, from) => {
53    console.log('onZoomEnd', to, from);
54  },
55};
56
57(() => {
58  const el = document.getElementById('root');
59  if (!el) {
60    return;
61  }
62
63  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
64
65  renderer.loadEvent(eventId);
66})();

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>