⚠️ React Compatibility Notice
- Use
^3.5.1if your app is on React 18- Use
^5.0.0if your app is on React 19+- For non-React apps, do not use v4.0.0.
- Use
3.5.1or^5.0.0.
⚠️ Breaking Change in v5.0.0
The.build()method now returns a Promise instead of directly returning the API. You must useawaitor.then()to access the seatmap API.
A client side JavaScript library that enables users to view seatmaps for available tickets on Ticket Evolution by:
- Fetching the map SVG and manifest JSON, with the given
venueIdandconfigurationId, from Ticket Evolution AWS S3 buckets using themapsDomain(defaults to maps.ticketevolution.com). - Rendering the map in the provided DOM element via the
.buildfunction which accepts theidof the element as an argument (see below for an example DOM setup). - Color map sections according to the
sectionPercentileconfigurations and the availableticketGroups(and anyselectedSectionsif provided). - Render a tooltip when the user hovers over a section, which will provide quantity and price information.
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 is available with a limited number of functions to interact with the map.
Help: Ticket Evolution
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Seatmap Example</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#my-map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="my-map"></div>
<script src="https://cdn.jsdelivr.net/npm/@ticketevolution/seatmaps-client/dist/bundle.js"></script>
<script>
// create a new seatmap
(async () => {
const seatmap = new Tevomaps.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
// Note: build() now returns a Promise in v5.0.0+
const seatmapApi = await seatmap.build("my-map");
// perform some actions, like highlighting section "lower level corner 104"
if (seatmapApi) {
seatmapApi.highlightSection("lower level corner 104");
}
})();
</script>
</body>
</html><script>
const seatmap = new Tevomaps.SeatmapFactory({
venueId: "896",
configurationId: "14341",
ticketGroups: [
{
tevo_section_name: "lower level corner 104",
retail_price: 100,
},
],
});
seatmap.build("my-map").then(function (seatmapApi) {
if (seatmapApi) {
seatmapApi.highlightSection("lower level corner 104");
}
});
</script>For React <19:
npm install @ticketevolution/seatmaps-client@^3.5.1
# or
yarn add @ticketevolution/seatmaps-client@^3.5.1For React 19+:
npm install @ticketevolution/seatmaps-client@^5.0.0
# or
yarn add @ticketevolution/seatmaps-client@^5.0.0For v5.0.0+ (React 19+):
// main.js
import { SeatmapFactory } from "@ticketevolution/seatmaps-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
// Note: build() returns a Promise in v5.0.0+
const seatmapApi = await seatmap.build("my-map");
// perform some actions, like highlighting section "lower level corner 104"
if (seatmapApi) {
seatmapApi.highlightSection("lower level corner 104");
}For v3.5.1 (React 18):
// main.js
import { SeatmapFactory } from "@ticketevolution/seatmaps-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
// Note: build() returns the API directly in v3.5.1
const seatmapApi = seatmap.build("my-map");
// perform some actions, like highlighting section "lower level corner 104"
seatmapApi.highlightSection("lower level corner 104");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(
<TicketMap
venueId="896"
configurationId="14341"
ticketGroups={[
{
tevo_section_name: "lower level corner 104",
retail_price: 100,
},
]}
/>,
);Options:
| Name | Required | Type | Default Value | Description |
|---|---|---|---|---|
venueId |
✓ | string |
Ticket Map Venue ID | |
configurationId |
✓ | string |
Ticket Map Configuration ID | |
sectionPercentiles |
object |
{'0.2': '#FFC515','0.4': '#f2711c','0.6': '#D6226A','0.8': '#a333c8','1': '#2A6EBB'} |
Define percentiles to color sections based on their average ticket group price. Ticket groups which fall within a given range will display the associated color on the map for their section. ie. Given an event with 100 ticket groups, with each ticket group price incrementing by $1 from $100 to $200, a section whose average ticket group price is $110 will be displayed as #FFC515, and a section whose average price of $175 will be displayed as #a333c8. |
|
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 arguments an array of all currently selected section IDs and expect nothing back.onSelection: function (sectionIds) {console.log(sectionIds); //=> ['id-1','id-2']}Note: This method is also called when a section is deselected. If all sections are deselected, the sectionIds array will be empty.Note: This method will always return lower case section names, you will need to take that in consideration when you do string comparisons. |
||
selectedSections |
string[] |
[] |
An array of section IDs for the map to initially highlight by default when it is rendered. | |
ticketGroups |
TicketGroup[] |
[] |
An array of ticket groups to be used for section pricing. Expects each ticket group to adhere to the TicketGroup interface. This API was designed for you to directly pass into the client library the response from the Ticket Evolution /v9/listings endpoint. |
|
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. |
After calling .build(), the following methods are available on the returned API object:
Changed in v5.0.0: This method now returns a Promise that resolves to the PublicApi object.
Renders the seatmap into the DOM element with the given ID. In v5.0.0+, you must use await or .then() to access the API.
Example (v5.0.0+):
const api = await seatmap.build("my-map");
// or
seatmap.build("my-map").then(api => {
// use api here
});Example (v3.5.1):
const api = seatmap.build("my-map");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.
Temporarily colors the given section by making it more opaque. This is the same effect used for hovering on a section.
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.
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.
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.
The main breaking change in v5.0.0 is that the .build() method now returns a Promise instead of directly returning the API object.
Before (v3.5.1):
const seatmapApi = seatmap.build("my-map");
seatmapApi.highlightSection("section-1");After (v5.0.0):
// Option 1: async/await
const seatmapApi = await seatmap.build("my-map");
if (seatmapApi) {
seatmapApi.highlightSection("section-1");
}
// Option 2: .then()
seatmap.build("my-map").then((seatmapApi) => {
if (seatmapApi) {
seatmapApi.highlightSection("section-1");
}
});| Name | Properties |
|---|---|
| TicketGroup | {tevo_section_name: string;retail_price: number;} |