Interactive maps

Drop-in seating maps wired to live ticket data (v2 & v3).

Ticketero serves the seating-map bootstrap as JavaScript you inject into a <script> tag. The script renders an interactive map and you feed it the tickets from /search/ticketsMap.

The map scripts are served from the v2 and v3 APIs (/api/v2/search/map, /api/v3/search/map), not v4. Everything else stays on v4.

Load map-ready tickets

curl https://production.ticketero.co/api/v4/search/ticketsMap \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{ "eventId": "5614" }'

Maps v2

Request the map script with your eventId and a callback (the function in your app to invoke once the map data is ready):

GET https://production.ticketero.co/api/v2/search/map?eventId=5614&callback=app.init

Render with the Seatics component, passing the tickets from /search/ticketsMap:

Seatics.config.noMapImageUrl = event.map; // fallback image when no dynamic map exists

Seatics.MapComponent.create({
  imgSrc: params[0].mapImage,
  tickets: ticketsForMap,          // from /search/ticketsMap
  mapData: params[1],
  vfsUrl: "https://vfs.seatics.com",
  container: $("#superMap"),
  presentationInterface: { updateTicketsList: myCreateListFunction },
  mapWidth: 525,
  mapHeight: 545,
  mapName: params[0].mapName,
  enableSectionInfoPopups: true,
});

Maps v3

v3 is the next-generation interactive map. It is not yet enabled for every event, so both versions run side by side. Detect support by checking whether mapData is defined, and fall back to v2 otherwise:

if (typeof mapData !== "undefined" && mapData !== null) {
  TicketeroCreate({
    tickets: this.addons_res,        // array of ticket objects
    mapData: mapData,                // map data object
    updater: this.myCreateListFunction, // fires when an area is selected
    container: $("#superMap"),
    enableTooltips: true,
    containerName: "#superMap",
  });
} else {
  // fall back to the v2 Seatics.MapComponent.create(...) above
  Seatics.MapComponent.create({ /* ... */ });
}

v3 map helpers

The v3 script exposes helpers for richer interactions:

Function What it does
highlightMap() Highlight all sections/categories that have availability.
highlightTicketMap(ticket) Highlight the section matching a ticket.
turnOffMapHighlight() Clear highlighting of unselected sections.
clearTooltip() Remove visible tooltips.
lockMap(lock) Enable/disable hover, leave and click events.
zoomHome() / zoomIn() / zoomOut() Control zoom.
TicketeroCreate(params) Build and configure the map.
  1. Fetch tickets with /search/ticketsMap.
  2. Load the v3 map script for the event; fall back to v2 when mapData is absent.
  3. Wire updateTicketsList / updater to your list UI so selecting a section filters tickets.