Skip to content

Blockmap - Seatmap (Double instance)

Levels

These maps have 1 level.

Types

The following node types are available on these maps.

  • section
  • general_admission
  • area
  • areaprice
  • seat

These types may change on some exceptions. You can always check what types a map have with the method getTypesList.

States

The node state indicates the logic behind its interaction. The available states are the following:

  • available: An available node represents a node that can be selected.
  • unavailable: An unavailable node represents a node that cannot be selected.
  • selected: A selected node represents a node that was previously available and has been selected.
  • disabled: A disabled node behaves the same way that an unavailable node, but its state cannot change to available (although this could be forced with enable and disable methods).

You can read more about state changes here.

Nodes have the following state machine:

Seats state machine

Example

Map Viewer

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
const root_id = "blockmap";
const venue_id = "eu-gb-00006-liverpool";

const p1 = DVM.loadModule("map_viewer", { container: "blockmap-container" });
const p2 = DVM.loadModule("map_viewer", { container: "seatmap-container" });

Promise.all([p1, p2]).then((result) => {
  const [blockmap, seatmap] = result;
  start(blockmap, seatmap);
});

function start(blockmap, seatmap) {
  blockmap.max_selection = 1;
  blockmap.flags.automatic_selection = false;

  blockmap.subscribe("load_success", loadSuccess);
  seatmap.subscribe("load_success", loadSuccess);

  blockmap.subscribe("load_error", loadError);
  seatmap.subscribe("load_error", loadError);

  blockmap.subscribe("click", (obj) => {
    if (blockmap.getMapId() === root_id) {
      const node = obj.nodes[0];
      if (node && node.type === "section") {
        if (node.state === "available" || node.state === "selected") {
          blockmap.unselectAll();
          blockmap.select(node);
          loadSeatmap(seatmap, node.id);
        }
      }
    }
  });

  loadRoot(blockmap);
}

function loadSuccess(obj) {
  setFullAvailability(obj.instance);
}

function loadError(err) {
  console.error(err);
}

function goBack(viewer) {
  const current = viewer.getMapId();
  if (current && current !== root_id) {
    loadRoot(viewer);
  }
}

function loadRoot(viewer) {
  return viewer.loadMap({ venue_id: venue_id, map_id: root_id }).then((obj) => {
    viewer.max_selection = 1;
    viewer.flags.automatic_selection = false;
  });
}

function loadSeatmap(viewer, id) {
  return viewer.loadMap({ venue_id: venue_id, map_id: id }).then((obj) => {
    viewer.max_selection = Infinity;
    viewer.flags.automatic_selection = true;
  });
}

function setFullAvailability(viewer) {
  viewer.getTypesList().forEach((type) => {
    viewer.setAvailability(type, viewer.getNodesByType(type));
  });
}