Section Hover Effects

Enhance user interaction with dynamic section highlighting in this demonstration of the SeatmapBookingRenderer’s hover capabilities.

The interface provides four control buttons: standard zoom controls (+ and -) for navigation, a hover button (h) that activates section highlighting, and an unhover button (u) that removes the effect. This implementation shows how to programmatically manage hover states to guide users’ attention to specific venue sectors during the booking process.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = '526b78be-331e-44ea-a342-098ad7572074';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10};
11
12const el = document.getElementById('root');
13
14if (el) {
15  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
16
17  renderer.loadEvent(eventId);
18
19  window.setSectionHover = () => {
20    renderer?.highlightSector(1692884);
21  };
22
23  window.unsetSectionHover = () => {
24    renderer?.clearSectorHighlight();
25  };
26}

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 class="ZoomButton" onclick="setSectionHover()">h</div>
6  <div class="ZoomButton" onclick="unsetSectionHover()">u</div>
7</div>