<tl-map-key>
The seat map's key: a minimap of the whole venue with the part the map shows outlined (choose a section to go there), and the price bands, each category's colour and lowest price, with the seat states
| HTML tag | <tl-map-key> |
| React | import { TlMapKey } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
The seat map's key: a minimap of the whole venue with the part the map shows outlined (choose a section to go there), and the price bands, each category's colour and lowest price, with the seat states drawn in shape as well as colour. In staff mode a Status tab counts the seats in each state the box office's map draws: available by price category, this sale, each hold by name, comps, sold, other carts and killed.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
collapsed | collapsed | Start closed, showing only the tabs | boolean | false |
eventId | event-id | The event, for the prices; without it the prices the page has already read | string | undefined | undefined |
occurrenceId (required) | occurrence-id | The occurrence whose seat map this is the key to | string | undefined |
staff | staff | Box office mode, on a client that offers the staff capabilities: a Status tab counting available seats by price category, this sale, each hold and each allocation by name, comps, sold, other carts and killed seats | boolean | false |
tab | tab | The tab to open on: the venue minimap, the price bands, or in staff mode the seat states | "bands" | "status" | "venue" | 'venue' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-map-key__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlSectionRequest | The buyer chose a section on the minimap (null: the whole venue); the map is asked to show it | CustomEvent<{ sectionId: string | null; }> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.
Related elements#
Used by: <tl-seat-explorer>