Hungry Tickets - Ticket Evolution Seatmaps
[](https://standardjs.com)
[](https://snyk.io/test/github/ticketevolution/seatmaps-client?targetFile=package.json)
A client side JavaScript library that enables users to view seatmaps customized based on zones by:
1. Fetching the map SVG and manifest JSON, with the given `venueId` and `configurationId`, from Ticket Evolution AWS S3 buckets using the `mapsDomain` (defaults to maps.ticketevolution.com). Customized manifests and map SVGs are used for certain seatmaps that have been customized.
1. Rendering the map in the provided DOM element via the `.build` function which accepts the `id` of the element as an argument (see below for an example DOM setup).
1. Color map sections according to the zones.
1. Render a tooltip when the user hovers over a section, which will provide details of best offer.
_Note: Sections will not color and you will not be able to highlight/toggle sections via the map or the API until ticket groups are supplied to the map, either through `ticketGroups` configuration or `updateTicketGroups` API._
After instantiation, a [public API](#public-api) is available with a limited number of functions to interact with the map.
# Installation and Usage Options
## CommonJS
### 1. Install via `npm` or `yarn`
```sh
npm install --save @sukra-infotek/hungry-tickets-seatmap-client
```
or
```sh
yarn add @sukra-infotek/hungry-tickets-seatmap-client
```
### 2. Create a script that includes `@sukra-infotek/hungry-tickets-seatmap-client`
```js
// main.js
import { SeatmapFactory } from "@sukra-infotek/hungry-tickets-seatmap-client";
// create a new seatmap
const seatmap = new SeatmapFactory({
venueId: "896",
configurationId: "14341",
ticketGroups: [
{
tevo_section_name: "lower level corner 104",
retail_price: 100,
},
],
});
// turn element with ID of 'my-map' into a seatmap for config 14341
const seatmapApi = seatmap.build("my-map");
// perform some actions, like highlighting section "lower level corner 104"
seatmapApi.highlightSection("lower level corner 104");
```
### In case your app is a React app, you can use the `TicketMap` component
```tsx
import { createRoot } from "react-dom/client";
import { TicketMap } from "@ticketevolution/seatmaps-client";
const rootEl = document.getElementById("my-map");
if (!rootEl) {
throw new Error("no root element in html");
}
const root = createRoot(rootEl);
root.render(
,
);
```
## API Reference
### `class Tevomaps`
#### `new Tevomaps(options: object)`
Options:
| Name | Required | Type | Default Value | Description |
| --------------------- | -------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `venueId` | ✓ | `string` | | Ticket Map Venue ID |
| `configurationId` | ✓ | `string` | | Ticket Map Configuration ID |
| `mapFontFamily` | | `string` | | Set a default font for the map. Native browser fonts available, a list below is provided but results may vary depending upon the browser and browser version.
• Helvetica
• Arial
• Times
• Times New Roman
• Courier
• Courier New
• Verdana
• Tahoma |
| `mapsDomain` | | `string` | `https://maps.ticketevolution.com` | The domain from which map SVGs and manifests will be fetched. To pull maps from the development environment, use `https://maps-dev.ticketevolution.com` |
| `onSelection` | | `function` | | A function which will be called by Tevomaps when a section of the map has been clicked. It will pass as a zone of the currently selected section and expect nothing back. |
| `selectedSections` | | `string[]` | `[]` | An array of section IDs for the map to initially highlight by default when it is rendered. |
| `ticketGroups` | | [`TicketGroup[]`](#interfaces) | `[]` | An array of ticket groups to be used for section pricing. Expects each ticket group to adhere to the [TicketGroup interface](#interfaces). This API was designed for you to directly pass into the client library the response from the [Ticket Evolution `/v9/listings` endpoint](https://ticketevolution.atlassian.net/wiki/spaces/API/pages/2853797930/Listings+Index). |
| `showControls` | | `boolean` | `true` | When set to true, the map controls (the zoom in, zoom out, reset zoom, and clear selection buttons) will be visible. |
| `showLegend` | | `boolean` | `true` | When set to true, the map legend will be visible. |
| `mouseControlEnabled` | | `boolean` | `true` | When set to true, the map will respond to mouse events (such as click, move, and hover). |
| `showZoomHelper` | | `boolean` | `true` | When set to `true`, the ZoomHelper overlay will appear when the page loads on mobile devices.
**Note:** This flag applies only when `mouseControlEnabled` is set to `true`. |
#### `updateTicketGroups(groups: TicketGroup[])`
Changes the collection of ticket groups in the map used to calculate available sections and section prices. Useful if you have a feature for filtering ticket groups and you want the map to update.
#### `highlightSection(section: string)`
Temporarily colors the given section by making it more opaque. This is the same effect used for hovering on a section.
#### `unhighlightSection(section: string)`
Removes the highlight effect of the given section, if it's not selected, by reverting it back to its base transparency. This is the same effect used for hovering off on a section.
#### `selectSection(section: string)`
This is the same effect used for clicking on a section to select it. It colors the section and will not revert back by hovering off it or calling `unhighlightSection`. Calls the `onSelection` callback with the updated array of selected sections.
#### `deselectSection(section: string)`
This is the same effect used for clicking on a section to deselect it. It reverts the color of the section and is the only way to unhighlight a selected section. Calls the `onSelection` callback with the updated array of selected sections.
# Interfaces
| Name | Properties |
| ----------- | --------------------------------------------------------------------------------------------------------------------- |
| TicketGroup | `{`
`tevo_section_name: string;`
`retail_price: number;`
`}` |