Admin Renderer

The Admin Renderer is a variant of the Seatmap renderer designed for building internal tools and venue management interfaces. Use it when you need to let staff select, inspect, or manage sections rather than book seats.

Overview

Import and instantiate the Admin Renderer:

import { SeatmapAdminRenderer } from '@seatmap.pro/renderer';

const renderer = new SeatmapAdminRenderer(
  document.getElementById('renderer-container'),
  {
    publicKey: 'your-public-key',
  }
);
renderer.loadEvent('your-event-id');

Activating selectSections mode

The Admin Renderer supports four interaction modes: 'pan', 'select', 'selectRows', and 'selectSections'. To activate section selection mode:

renderer.setMode('selectSections');

The other three modes ('pan', 'select', 'selectRows') are unaffected by this change and can be set the same way.

Interaction in selectSections mode

Click — toggles the selection state of the clicked section (selected / deselected).
Drag — draws a rectangle over the canvas and selects all sections that intersect it.

Admin renderer with multiple sections selected

Drag rectangle being drawn over sections

Keyboard modifiers for drag selection

When drawing a drag selection rectangle, the following modifier keys change how the selection is applied:

Modifier	Behavior
None	REPLACE — replaces the current selection with the sections inside the rectangle.
Shift or Cmd / Meta	ADD — adds the intersecting sections to the current selection.
Alt / Option	SUBTRACT — removes the intersecting sections from the current selection.

onSectionsSelectionChange callback

Use the onSectionsSelectionChange callback to receive the final selection after each user interaction:

const renderer = new SeatmapAdminRenderer(
  document.getElementById('renderer-container'),
  {
    publicKey: 'your-public-key',
    onSectionsSelectionChange: (sections) => {
      sections.forEach((section) => {
        console.log(section.id, section.name, section.seatCount);
      });
    },
  }
);
renderer.loadEvent('your-event-id');

Each element in the sections array is an ISection object. The primary fields for this use case are:

id — unique section identifier.
name — display name of the section.
seatCount — number of seats in the section.

ISection contains additional fields; the three above cover the most common admin use cases.

onSectionsSelectionChange fires once after the full selection is finalized — once per click and once per completed drag. By contrast, onSectionClick fires once for every affected section: once on a single-click toggle, and once per intersecting section during a drag. Consumers relying on onSectionClick in selectSections mode should be aware that it fires multiple times per drag operation.

seatCount on ISection

seatCount is available on ISection in both onSectionsSelectionChange and onSectionClick callbacks.