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  // This field is depricated
13  seatSelectionMinZoom: 0.25,
14
15  // All fields are mandatory for zoomSettings
16  zoomSettings: {
17    // List of zoom levels where user will have a stop after clicking zoom in or zoom out
18    // Smaller value like 0.5 equals eagle view when bigger part of the venue is visible
19    // Bigger value like 2 equals to helicopter view when seats are visible at closes range
20    // This presets will be extended by extra value equal to zoom-to-fit scale, calculated during initial render
21    presets: [0.05, 0.25, 0.5, 0.75, 1, 2, 4],
22    // We calculate zoom level to fit the venue during initial render. There is an option to limit it for small venues
23    maxZoomToFitScale: 1,
24    // For tablets and phones user can pinch the venue skipping preset levels
25    // We just need to provide min and max values to limit the zoom user can apply with pinch
26    minPinchZoom: 0.05,
27    maxPinchZoom: 4,
28  },
29
30  // Define the visibility of elements on zoom levels
31  // It is related to zoom settings where 1 usually means normal view when seats are clearly visible, and lovest value of 0.1 ( depending on the venue size ) represents eagle view when whole venue is visible
32  // We have two options to configure: configure seats behaviour and outlines behaviour
33  // For each option we can configure two states: visible and selectable. Visible state will show the element, selectable will enable action on the element: it will be select for seat and zoom in for outlines
34  // To configure when the state works there are two properties: from and to, if to is not provided we will take biggest zoom level possible, if from not provided we will take 0 as furthermost zoom out level.
35  visibilitySettings: {
36    seats: {
37      visible: {
38        from: 0.75,
39        to: 1,
40      },
41      selectable: {
42        from: 1,
43      },
44    },
45    outlines: {
46      visible: {
47        to: 0.5,
48      },
49      selectable: {
50        to: 0.25,
51      },
52    },
53  },
54
55  onZoomStart: (to, from) => {
56    console.log('onZoomStart', to, from);
57  },
58  onZoomEnd: (to, from) => {
59    console.log('onZoomEnd', to, from);
60  },
61};
62
63(() => {
64  const el = document.getElementById('root');
65  if (!el) {
66    return;
67  }
68
69  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
70
71  renderer.loadEvent(eventId);
72})();

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>