@ticketevolution/seatmaps-client v3.1.1

A client side JavaScript library that enables users to view seatmaps for available tickets on Ticket Evolution 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).
2. 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).
3. Color map sections according to the sectionPercentile configurations and the available ticketGroups (and any selectedSections if provided).
4. 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

Installation and Usage Options

Window Object

1. Download tevomaps.js

wget https://raw.githubusercontent.com/ticketevolution/seatmaps-client/master/build/tevomaps.js

2. Load tevomaps.js, create a map root, and build a map

<div id='my-map'></div>
<script src="tevomaps.js"></script>
<script>
  // create a new seatmap
  var seatmap = new Tevomaps({
    venueId: '10',
    configurationId: '1046',
    ticketGroups: [{
      tevo_section_name: 'upper end zone 232',
      retail_price: 100
    }]
  });

  // turn element with ID of 'my-map' into a seatmap for config 1046
  var seatmapApi = seatmap.build('my-map');

  // perform some actions, like highlighting section "upper end zone 232"
  seatmapApi.highlightSection('upper end zone 232');
</script>

CommonJS

1. Install via npm or yarn

npm install --save @ticketevolution/seatmaps-client

or

yarn add @ticketevolution/seatmaps-client

2. Create a script that includes @ticketevolution/seatmaps-client

// main.js

import Tevomaps from '@ticketevolution/seatmaps-client'

// create a new seatmap
const seatmap = new Tevomaps({
  venueId: '10',
  configurationId: '1046',
  ticketGroups: [{
    tevo_section_name: 'upper end zone 232',
    retail_price: 100
  }]
});

// turn element with ID of 'my-map' into a seatmap for config 1046
const seatmapApi = seatmap.build('my-map');

// perform some actions, like highlighting section "upper end zone 232"
seatmapApi.highlightSection('upper end zone 232')

API Reference

class Tevomaps

new Tevomaps(options: object)

Options:

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

Contributing & Development

The below instructions will get the project up and running on your local machine for development and testing purposes.

System Prerequisites

• node
• yarn
• make
• git

Using make

We've made the startup process simple by using a Makefile for all common workflows.

To see what Makefile commands are available, in your terminal shell run make or make help. It will list all the available Makefile commands with their descriptions.

Using yarn or npm

A slew of npm/yarn scripts are also present to make development a bit easier:

Contributing Cont.

Once you have completed the above steps, contribution to the repository is as follows:

1. Create an issue on GitHub to address your concerns
2. In the issue state the feature request or problem (give exact steps for replicating problems)
3. Give a detailed description of a solution to the problem or the behavior of the feature request
4. If you plan to submit a PR then create a branch named as such <issue-number>-<brief-branch-description>
5. should be 2-3 words that can most accurately describe the intent of the code in the branch
6. Write the code to create the feature or address the problem
7. Before opening a PR against master: run npm run build and bump the version number in the package.json according to (semantic versioning rules)https://semver.org
8. Open a PR of your branch against master
9. Respond to any comments
10. When all checks are passing and you have received a :+1:, squash & merge your PR