Integration recipes

Filter a listing on section click

map.on("select", ({ section }) => showOnly(section));
map.on("deselect", () => showAll());

Highlight the map from a listing card

card.querySelector("button").onclick = () => map.select(card.dataset.section);

Inventory-aware shading

Fetch availability from the API server-side or client-side, then:

const { sections } = await fetch(`${apiBase}/v1/venues/${venue}/availability?event=${event}`,
  { headers: { "X-Api-Key": key } }).then((r) => r.json());
map.setAvailability(sections); // null → show everything

Event configuration comes from the event

A Bulls game, a Blackhawks game and a concert are different products with different renders, polygons and surfaces. Pass the product for the page's event and the map will not show a dropdown:

Seatpano.load({ …, product: event.venueConfiguration /* "bulls" | "blackhawks" | "events-180" | "events-360" */ });

Omit product only on pages with no event context; the SDK then shows an in-map dropdown as a fallback.

"View 3D" behaviours

• popover.view3d: "viewer" (default) opens the section viewer: embedded 3D Virtual Venue plus a gallery of the section's seat/interior stills.
• popover.view3d: "image" opens the seat-view still in a lightbox.
• popover.view3d: "iomedia" opens the venue's own Virtual Venue in a new tab.
• popover.view3d: "none" only emits view3d; render your own modal (buildGallery() gives you the same item list).

Deep links

Read section from your URL on load and call map.select(section) after the ready event. Write it back inside your select handler.

Replacing an existing 3D Digital Venue embed

The event model is intentionally close: DVM.loadModule("map_viewer", …) → Seatpano.load(…); DVM click with nodes[0].id → select with section; enter/leave → hover. Section ids are the same venue section keys.