Seat Selector

The seat selector provides convenience wrappers to render a seat map in the browser. You can modify the behaviour and subscribe to certain callbacks to react to certain events e.g. a user selecting a seat in the map.

Initialize

Attributes

holder

Required

string

The id of the element to hold the map

baseUrl

Required

string

The baseUrl of the seating backend service

https://seatmap.vivenu.comhttps://seatmap.vivenu.dev

eventId

Required

string

The ID of the seating event which holds the state.

Optional Attributes

Collapse all

childEventIds

Optional

array<string>

An array of IDs of the seating events that belongs to the seating event. Important for season events

callbacks

Optional

object

The callbacks are described in the callbacks section

language

Optional

string

The display language of the seatmap

theme

Optional

string

The color theme to be used to display the map

lightdark

options

Optional

object

The options are described in the options section

Was this section helpful?

Yes No

<html>
    <body>
        <div id="map"></div>
        <script type="application/javascript" src="https://seatmap.vivenu.com/js/init.js"></script>
        <script>
            const instance = VIInit();
            instance.initSeatSelector({
                holder: "map",
                baseUrl: "https://seatmap.vivenu.com",
                eventId: "${EVENT_ID}",
                options: options,
            });
        </script>
    </body>
</html>

Options

Attributes

Optional Attributes

Collapse all

ticketTypes[].ignoredForStartingPrice

Optional

boolean

Whether this ticket type should be ignored for starting price of a seat

Optional Attributes

Collapse all

orphan

Optional

object

Optional Attributes

Collapse all

orphan.minSeatDistance

Optional

integer

The minimum number of free seats that should be left in order to avoid orphan seats

orphan.edgeSeatsOrphaning

Optional

boolean

Select if orphan seats at aisles should also be avoided.

theme

Optional

string

The color theme to be used to display the map

lightdark

contingents

Optional

array<string>

An array of contingents IDs to be available

allowSelectionOfUnavailableObjects

Optional

boolean

Whether unavailable objects can be selected

highlightSeatsBlockedByContingent

Optional

boolean

Whether seats that are blocked by a contingent should be highlighted different

currency

Optional

string

An ISO 4217 3-character code of the currency

EURUSDGBPAUDCHFTHBILSCOPMXNDKKNOKSEKQARSAR

visibleLayers

Optional

array<string>

Array of Layer IDs, which are always displayed, ignoring their hidden layer state. Layer Id 'all' means 'all layers shown'

preloadedMap

Optional

object

Map object to be used. Useful if you want to preload the map before the user access the selector

Was this section helpful?

Yes No

{
  "categories": [
    {
      "ref": "68355747-b7c0-4bc4-89c6-38af352e6de1",
      "seatingReference": "6082a1ed75a4b008a1ad4659",
      "v": 200
    }
  ],
  "ticketTypes": [
    {
      "categoryRef": "68355747-b7c0-4bc4-89c6-38af352e6de1",
      "active": true,
      "price": 54.99,
      "v": 200,
      "ignoredForStartingPrice": true
    }
  ],
  "orphan": {
    "minSeatDistance": 1,
    "edgeSeatsOrphaning": true
  },
  "theme": "light",
  "contingents": [],
  "allowSelectionOfUnavailableObjects": true,
  "highlightSeatsBlockedByContingent": true,
  "currency": "EUR",
  "visibleLayers": [
    "layerid1",
    "layerid2"
  ],
  "preloadedMap": {}
}

Seat Object

Attributes

_id

Required

string

The id of the seat. This id is used in the callbacks

_type

Required

integer

Is used to determine the type of the object.

6

categoryId

Required

string

The Id of the seating category

groupName

Required

string

The name of the row group where the seat is located

rowName

Required

string

The name of the row where the seat is located

seatName

Required

string

The seat name

statusId

Required

string

An Id that holds the status of the seat. This id is used to reserve/book/free the seat

Optional Attributes

Collapse all

sectionName

Optional

string

The name of the section where the seat is located

gate

Optional

string

The name of the gate to enter the venue

seatType

Optional

string

Whether the seat has a special type

handicapped

General Admission Object

Attributes

_id

Required

string

The id of the seat. This id is used in the callbacks

_type

Required

integer

Is used to determine the type of the object.

7

categoryId

Required

string

The Id of the seating category

statusId

Required

string

An Id that holds the status of the general admission. This id is used to reserve/book/free seats inside the GA

name

Required

string

The name for the general admission

Optional Attributes

Collapse all

gate

Optional

string

The name of the gate to enter the venue

Callbacks

Event	Trigger
onObjectSelected	When an object gets selected. An object is either a `Seat` or a `GeneralAdmission`
onObjectDeselected	When a `Seat` gets deselected. This event does not apply to `GeneralAdmission`
onSelectionValid	When a selection get validated and is valid
onSelectionInvalid	When a selection get validated and is invalid. Example for an invalid selection is when the selected seats do not satisfy orphanage constraints
onLoadDone	When the initial loading of the Seatmap is done

<html>
    <body>
        <div id="map"></div>
        <script type="application/javascript" src="https://seatmap.vivenu.com/js/init.js"></script>
        <script>
            const instance = VIInit();
            instance.initSeatSelector({
                holder: "map",
                baseUrl: "https://seatmap.vivenu.com",
                eventId: "${EVENT_ID}",
                callbacks: {
                    onObjectSelected: (type, id, resource) => {
                        console.log(id);
                        console.log(resource);
                    },
                    onObjectDeselected: (type, id, resource) => {
                        console.log(id);
                        console.log(resource);
                    },
                    onSelectionValid: (type) => {
                        console.log("selection is valid enable continue")
                    },
                    onSelectionInvalid: (type, violations) => {
                        console.log("selection is invalid");
                        console.log(violations);
                    },
                    onLoadDone: (type) => {
                        console.log("loading is done");
                    }
                },
            });
        </script>
    </body>
</html>

onObjectSelected

This event occurs when an object gets selected. An object can be of type Seat and of type GeneralAdmission.

/**
* This event occurs when an object gets selected.
* @param {string} type - The type of the event. "onObjectSelected"
* @param {string} id - The id of the object which got selected
* @param {SeatInfo|GeneralAdmissionInfo} - resource The resource
*/
const onObjectSelected = (type, id, resource) => {
    console.log(id);
    console.log(resource);
}

onObjectDeselected

This event occurs when an Seat gets deselected.

Caution: This event does not apply to GeneralAdmission. General admission can only be deselected through the setSelectedObjects method.

/**
* This event occurs when an object gets selected.
* @param {string} type - The type of the event. "onObjectDeselected"
* @param {string} id - The id of the object which got selected
* @param {SeatInfo} resource - The resource
*/
const onObjectDeselected = (type, id, resource) => {
    console.log(id);
    console.log(resource);
}

onSelectionInvalid

When a selection get validated and is invalid. Example for an invalid selection is when the selected seats do not satisfy orphanage constraints

interface Violations {
    orphans?: SeatInfo[];
}

/**
  * The event occurs when a selection get validated and is invalid
  * @param {string} type - The type of the event. "onSelectionInvalid"
  * @param {Violations} violations - An object containing information about invalid selection
  */
const onSelectionInvalid = (type, violations) => {
    console.log(violations);
    if (violations.orphans) {
        console.log("There are orphans in your current selection");
        console.log(violations.orphans);
    }
}

Set selected objects

You can update the selection of the user with calling the function selectObjectsInSeatSelector on the VIInit instance.

Notice: You need to call this function in order to get a general admission deselected.

/**
  * Set the objects of the user selection
  * @param {Array<string>} ids - An array of Object-IDs to be selected
  */
selectObjectsInSeatSelector(ids: string[]): void;

<html>
    <body>
        <div id="map"></div>
        <script type="application/javascript" src="https://seatmap.vivenu.com/js/init.js"></script>
        <script>
            let selected = [];
            const instance = VIInit();

            const updateSelection = () => {
                instance.selectObjectsInSeatSelector(selected);
            }

            instance.initSeatSelector({
                holder: "map",
                baseUrl: "https://seatmap.vivenu.com",
                eventId: "${EVENT_ID}",
                callbacks: {
                    onObjectSelected: (type, id, resource) => {
                        selected.push(id);
                        updateSelection();
                    },
                    onObjectDeselected: (type, id, resource) => {
                        selected = selected.filter(selectedId => selectedId != id);
                        updateSelection();
                    }
                },
            });
        </script>
    </body>
</html>

Set categories

You can update the configuration of the category and their availabilities with calling the function setCategories on the VIInit instance.

Notice: Please make sure that you call this function after initialization is done.

/**
  * Set the category configuration
  * @param {Array<SeatMapCategory>} categories - An array of categories
  */
setCategories(categories: SeatMapCategories[]): void;

<html>
    <body>
        <div id="map"></div>
        <script type="application/javascript" src="https://seatmap.vivenu.com/js/init.js"></script>
        <script>
            let selected = [];
            const instance = VIInit();

            const updateSelection = () => {
                instance.selectObjectsInSeatSelector(selected);
            }

            instance.initSeatSelector({
                holder: "map",
                baseUrl: "https://seatmap.vivenu.com",
                eventId: "${EVENT_ID}",
                callbacks: {
                    onLoadDone: () => {
                        instance.setCategories([
                            {
                                "ref": "68355747-b7c0-4bc4-89c6-38af352e6de1",
                                "seatingReference": "6082a1ed75a4b008a1ad4659",
                                "v": 200
                            }
                        ]);
                    }
                }
            });
        </script>
    </body>
</html>

Get best available seats

Through this function you can get the best available seats on the map. This function takes key-value pairs as parameters, where the key is the categoryRef and the value is the requested amount of seats in this category. The function returns key-value pairs, where the key is the categoryRef and the value is array of SeatInfoResource.

Notice: Best available seats are calculated by the distance to the focal point. If a focal point does not exist on the map then the center of the map is considered as the focal point.

interface BestAvailableSeatsParams {
    [categoryRef: string]: number
}

interface BestAvailableSeatsResponse {
    [categoryRef: string]: SeatInfoResource[]
}

/**
  * Get best available seats
  * @param {BestAvailableSeatsParams}
  */
getBestAvailableSeats(params: BestAvailableSeatsParams): Promise<BestAvailableSeatsResponse>;

<html>
    <body>
        <div id="map"></div>
        <script type="application/javascript" src="https://seatmap.vivenu.com/js/init.js"></script>
        <script>
            const instance = VIInit();

            instance.initSeatSelector({
                holder: "map",
                baseUrl: "https://seatmap.vivenu.com",
                eventId: "${EVENT_ID}",
                callbacks: {
                  onLoadDone: async () => {
                    const bestAvailableSeats = await instance.getBestAvailableSeats({
                       "68355747-b7c0-4bc4-89c6-38af352e6de1": 5,
                       "12355747-b7c0-4bc4-89c6-38af352e64b6": 3
                    });
                  }
                }
            });
        </script>
    </body>
</html>

Get view from seat

Through this function you can get the closest viewpoint to a seat. This function takes the seat id as a parameter. The function returns the closest viewpoint to the seat, if the seatmap has atleast one viewpoint placed on the seats layer. Otherwise it returns undefined.

interface ViewPoint {
  _id: string
  _type: number
  imageType: ImageType
  image: string
}

/**
  * Get view from seat
    * @param {string} seatId - The id of the seat
  */
getViewFromSeat(seatId: string): Promise<ViewPoint | undefined>;

<html>
    <body>
        <div id="map"></div>
        <script type="application/javascript" src="https://seatmap.vivenu.com/js/init.js"></script>
        <script>
            const instance = VIInit();

            instance.initSeatSelector({
                holder: "map",
                baseUrl: "https://seatmap.vivenu.com",
                eventId: "${EVENT_ID}",
                callbacks: {
                  onLoadDone: async () => {
                    const view = await instance.getViewFromSeat("6082a1ed75a4b008a1ad4659");
                  }
                }
            });
        </script>
    </body>
</html>

Unmount

You can unmount the seat selector instance. Useful if you're hosting a single page application.
Will remove any seating frames inside holder and close any open socket connections.

/**
* Unmount the seat selector instance.
*/
unmount(): Promise<void>;