Skip to content

10 - Section Navigation

Some maps that use the blockmap-seatmap map typology have extra sections on the seatmaps that allow you to load neighbor seatmaps. Those sections have the special node type "section_nh".

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
import { loadModule } from "@3ddv/dvm";

const venue_id = "nam-us-10169-orioles";
const topview = "blockmap";

loadModule("map_viewer", {
    container: "viewer-container",
    styles_by_groups: true,
    instanced_nodes: true,
})
    .then((viewer) => {
        window.viewer = viewer;
        start(viewer);
    })
    .catch((err) => {
        console.error(err);
    });

function start(viewer) {
    const btn_back = document.getElementById("btn-back");
    btn_back.addEventListener("click", () => goBack());

    // Just for the example purpose
    viewer.flags.scroll_with_mod_key = true;

    viewer.subscribe("load_success", (_obj) => {
        setRandomAvailability();
    });

    viewer.subscribe("load_error", (err) => {
        console.error(err);
    });

    viewer.subscribe("click", (obj) => {
        const node = obj.nodes[0];
        if (node) {
            switch (node.type) {
                case "section":
                case "section_nh":
                    loadOnClick(node);
                    break;
            }
        }
    });

    // Start map-viewer
    void viewer.loadMap({ venue_id, map_id: topview });

    function loadOnClick(node) {
        // Load a map with node.id if it is available and it is not already loaded
        if (node.state === "available" && node.id !== viewer.getMapId()) {
            void viewer.loadMap({ venue_id, map_id: node.id });
        }
    }

    // Go back to the topview if it is not already loaded
    function goBack() {
        if (viewer.getMapId() !== topview) {
            void viewer.loadMap({ venue_id, map_id: topview });
        }
    }


    // Just for the purpose of having some random availability on the map
    function setRandomAvailability(prob = 0.6) {
        if (viewer && viewer.isLoaded()) {
            viewer.getTypesList().forEach((type) => {
                const availability = viewer.getNodesByType(type).filter(() => Math.random() < prob);
                viewer.setAvailability(type, availability);
            });
        }
    }
}