Skip to content

Multilevel

Levels

These maps have 2 levels that change with the scaling factor.

At level 0, only sections, general admission and their labels are shown. At level 1, the sections "open" and seats are shown.

Usually the change of level threshold is scaling_factor = 5, but it may change if the map is very small.

These maps scaling factor represents 1 pixel = 1 seat ( at scaling_factor == 1, a seat would be a pixel).

Types

The following node types are available on these maps.

  • section
  • general_admission
  • 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.

Seats nodes have the following state machine:

Seats state machine

Section and general admission nodes have the following state machine:

Sections state machine

This means that nodes with section or general_admission as type cannot have the selected state.

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
72
73
74
75
76
77
78
79
80
81
82
var input_options = {
    container: "viewer-container" // Container where the viewer will be appended
};

// ---- LOADING MODULE ----
DVM.loadModule("map_viewer", input_options)
    .then(function(viewer) {
        console.log(`Module '${viewer.getModuleName()}' initialized:`, viewer);
        start(viewer);

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


function start(viewer) {
    // ---- LOADING MAP ----
    var load_options = {
        venue_id: "eu-es-00008-default" // Venue to be loaded. 3ddigitalvenue will provide these IDs
    };

    // Load the map
    viewer.loadMap(load_options)
        .then(function(obj) {
            // Successfully loaded

            // Get sections availability
            var available_sections = getSectionAvailability();
            // Apply sections availability
            viewer.setAvailability("section", available_sections);

            // Get seats availability
            var available_seats = getSeatAvailability();
            // Apply seats availability
            viewer.setAvailability("seat", available_seats);

            console.log("LOADED!");
        })
        .catch(function(err) {
            // Error while loading
            console.error(err);
        });


    // ---- AVAILABILITY FUNCTIONS ----
    // Get sections availability. For the purpose, we generate a RANDOM availability.
    function getSectionAvailability() {
        var sections = viewer.getNodesByType("section");
        var available_sections = [];

        for (var i = 0; i < sections.length; ++i) {
            var section = sections[i];
            if (Math.random() < 0.7) {
                available_sections.push(section.id);
            }
        }

        return available_sections;
    }


    // Get seats availability. For the purpose, we generate a RANDOM availability.
    function getSeatAvailability() {
        // Only generate availability for seats with an AVAILABLE parent section
        var available_sections = viewer.getNodesByState("section", "available");
        var available_seats = [];

        for (var i = 0; i < available_sections.length; ++i) {
            var section = available_sections[i];
            var seats = viewer.getNodesByParent(section.id);
            for (var j = 0; j < seats.length; ++j) {
                var seat = seats[j];
                if (Math.random() < 0.7) {
                    available_seats.push(seat.id);
                }
            }
        }

        return available_seats;
    }
}