Skip to content

Layers

Maps can have multiple layers, and they can be enabled/disabled automatically when certain map conditions are met.

There are some cases when you might want to manually control the layer's behavior. with these advanced API you can disable the automatic behaviors and control them manually.

Info

Remember that every time that the layer level changes, layer_level_changed is triggered.

Warning

Use viewer.layers.flags.automatic_control_level = false flag along with viewer.layers.setLayerLevel(x) method at first. Use the rest of the methods only if you really know what you are doing.

API

This api is in the layers namespace.

Methods

getLayerLevel()

Returns the current layer level. Levels go from 0..N.

Example:
1
const current = viewer.layers.getLayerLevel();

setLayerLevel()

Warning

automatic_control_level should be set to false.

Sets the current layer level manually. Levels go from 0..N.

Input:
  • layer_level (number): Layer level to set.
Example:
1
viewer.layers.setLayerLevel(1);

getLayers()

Returns a list of layer ids that forms the current map.

Output:
  • layers (string[]): Array with the layers unique ids of the current map.
    Example:
1
const layers = viewer.layers.getLayers();

setMainLayer()

Warning

automatic_control_layers should be set to false.

Sets manually the main layer. A main layer should put its nodes first over other layers. For example, if you click a seat that is over a section, the event will show first the node from the main layer (that should be the seats layer).

Input:
  • layer_id (string): id of the layer to be set as main layer.
Example:
1
viewer.layers.setMainLayer("some_layer_id");

showLayer()

Warning

automatic_control_layers should be set to false.

Shows a layer, if it was hidden.

Input:
  • layer_id (string): id of the layer to be shown.
Example:
1
viewer.layers.showLayer("some_layer_id");

hideLayer()

Warning

automatic_control_layers should be set to false.

Hides a Layer.

Input:
  • layer_id (string): id of the layer to be hidden.
Example:
1
viewer.layers.hideLayer("some_layer_id");

resumeLayer()

Warning

automatic_control_layers should be set to false.

Resumes a paused layer.

Input:
  • layer_id (string): id of the layer to be resumed.
Example:
1
viewer.layers.resumeLayer("some_layer_id");

pauseLayer()

Warning

automatic_control_layers should be set to false.

Pauses a layer. A paused layer will stop updating and rendering.

Input:
  • layer_id (string): id of the layer to be paused.
Example:
1
viewer.layers.pauseLayer("some_layer_id");

Flags

automatic_control_level

Info

Every map has its own default value for this flag, and you can override it after loadMap has been resolved.

Disables the automatic control of the layer levels. Layer level won't change when the automatic map conditions are met.

  • If true: Layer level will change automatically when map conditions are met.
  • If false: Layer level will only change when manually triggered with setLayerLevel() method.
Example:
1
viewer.layers.flags.automatic_control_level = false;

automatic_control_layers

Info

Every map has its own default value for this flag, and you can override it after loadMap has been resolved.

When the layer level changes, it triggers some changes on the layers, enabling/disabling some of them, or changing the default main layer. If this flag is false, the state of the layers won't change even if the layer level changes.

  • If true: The layers configuration for the current level will be triggered.
  • If false: Layers configuration won't change when layer level changes.
Example:
1
viewer.layers.flags.automatic_control_layers = false;

Examples

Example 1: Manually set the layer level change threshold

In this example you can customize the scaling factor threshold where the map will change of level.

Map Viewer

Threshold:
Current scaling factor: 1
Current level: 0

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
DVM.loadModule("map_viewer", { container: "example1" })
    .then((viewer) => {
        window.example1 = viewer;
        const input = document.getElementById("example1-input");
        const span_scaling = document.getElementById("example1-scaling-factor");
        const span_level = document.getElementById("example1-level");

        input.addEventListener("input", (event) => {
            current_threshold = input.value;
            updateLayerLevel(viewer);
        });

        let current_scaling = 1;
        let current_threshold = 5;

        viewer.subscribe("update", () => {
            updateScalingLabel(viewer);
            updateLayerLevel(viewer);
        });

        viewer.subscribe("load_success", () => {
            viewer.layers.flags.automatic_control_level = false;
            setFullAvailability(viewer);
            updateScalingLabel(viewer);
            updateLayerLevel(viewer)
        });

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

        viewer.subscribe("layer_level_changed", () => {
            if (viewer.isLoaded()) {
                span_level.innerText = viewer.layers.getLayerLevel().toString();
            } else {
                span_level.innerText = "0";
            }
        });

        function updateLayerLevel(viewer) {
            if (viewer.isLoaded()) {
                const current_scaling_factor = viewer.scaling_factor;
                const current_layer_level = viewer.layers.getLayerLevel();
                if (current_scaling_factor >= current_threshold) {
                    if (current_layer_level !== 1) {
                        viewer.layers.setLayerLevel(1);
                    }
                } else {
                    if (current_layer_level !== 0) {
                        viewer.layers.setLayerLevel(0);
                    }
                }
            }
        }

        function updateScalingLabel(viewer) {
            if (viewer.isLoaded() && viewer.scaling_factor !== current_scaling) {
                current_scaling = viewer.scaling_factor;
                span_scaling.innerText = current_scaling.toFixed(3);
            }
        }

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

        void viewer.loadMap({ venue_id: "nam-us-10126-fullrsvd-2d", map_id: "main" });
    })
    .catch((err) => {
        console.error(err);
    });

Example 2: Layer level change on click

In this example panning and zooming are locked until you click on a section, where it will zoom-in and show seats.

If you zoom-out, the sections will be shown and the map will be locked again

Map Viewer

Current scaling factor: 1
Current level: 0

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
83
84
85
86
87
88
DVM.loadModule("map_viewer", { container: "example2" })
    .then((viewer) => {
        window.example2 = viewer;
        const span_scaling = document.getElementById("example2-scaling-factor");
        const span_level = document.getElementById("example2-level");

        viewer.flags.preserve_min_scaling_factor = true;

        let current_scaling = 1;
        const goto_time = 500;

        viewer.subscribe("update", () => {
            updateScalingLabel(viewer);
            updateLayerLevel(viewer);
        });

        viewer.subscribe("load_success", () => {
            viewer.layers.flags.automatic_control_level = false;
            setFullAvailability(viewer);
            updateScalingLabel(viewer);
            updateLayerLevel(viewer)

            enableSectionsMode();
        });

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

        viewer.subscribe("layer_level_changed", () => {
            if (viewer.isLoaded()) {
                span_level.innerText = viewer.layers.getLayerLevel().toString();
            } else {
                span_level.innerText = "0";
            }
        });

        viewer.subscribe("click", (obj) => {
            const node = obj.nodes[0];
            if (node) {
                console.log("CLICK:", node.id);
                if (viewer.layers.getLayerLevel() === 0) {
                    if (node.type === "section") {
                        enableSeatsMode(node);
                    }
                }
            }
        })

        function enableSectionsMode() {
            viewer.layers.setLayerLevel(0);
            viewer.flags.panning = false;
            viewer.flags.zooming = false;
        }

        function enableSeatsMode(section) {
            viewer.goTo(section, undefined, goto_time);
            viewer.layers.setLayerLevel(1);
            viewer.flags.panning = true;
            viewer.flags.zooming = true;
        }

        function updateLayerLevel(viewer) {
            if (viewer.isLoaded()) {
                if (viewer.layers.getLayerLevel() === 1 && viewer.scaling_factor === viewer.min_scaling_factor) {
                    enableSectionsMode();
                }
            }
        }

        function updateScalingLabel(viewer) {
            if (viewer.isLoaded() && viewer.scaling_factor !== current_scaling) {
                current_scaling = viewer.scaling_factor;
                span_scaling.innerText = current_scaling.toFixed(3);
            }
        }

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

        void viewer.loadMap({ venue_id: "nam-us-10126-fullrsvd-2d", map_id: "main" });
    })
    .catch((err) => {
        console.error(err);
    });

Example 3: Layer level change on click with back button

In this example panning and zooming are locked until you click on a section, where it will zoom-in and show seats.

You can zoom-in and zoom-out until you press the back button, where the map will zoom-out and lock zooming and panning.

Map Viewer

Current scaling factor: 1
Current level: 0

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
83
84
85
86
87
88
DVM.loadModule("map_viewer", { container: "example3" })
    .then((viewer) => {
        window.example3 = viewer;
        const span_scaling = document.getElementById("example3-scaling-factor");
        const span_level = document.getElementById("example3-level");
        const button = document.getElementById("example3-btn-back")

        viewer.flags.preserve_min_scaling_factor = true;

        let current_scaling = 1;
        const goto_time = 500;

        button.addEventListener("click", (event) => {
            enableSectionsMode(true);
        });

        viewer.subscribe("update", () => {
            updateScalingLabel(viewer);
        });

        viewer.subscribe("load_success", () => {
            viewer.layers.flags.automatic_control_level = false;
            setFullAvailability(viewer);
            updateScalingLabel(viewer);

            enableSectionsMode(false);
        });

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

        viewer.subscribe("layer_level_changed", () => {
            if (viewer.isLoaded()) {
                span_level.innerText = viewer.layers.getLayerLevel().toString();
            } else {
                span_level.innerText = "0";
            }
        });

        viewer.subscribe("click", (obj) => {
            const node = obj.nodes[0];
            if (node) {
                console.log("CLICK:", node.id);
                if (viewer.layers.getLayerLevel() === 0) {
                    if (node.type === "section") {
                        enableSeatsMode(node);
                    }
                }
            }
        })

        function enableSectionsMode(anim) {
            viewer.layers.setLayerLevel(0);
            viewer.flags.panning = false;
            viewer.flags.zooming = false;
            button.disabled = true;
            if (anim) viewer.goTo(viewer.limits.center_scene, viewer.min_scaling_factor, goto_time);
        }

        function enableSeatsMode(section) {
            viewer.goTo(section, undefined, goto_time).then(() => {
                viewer.layers.setLayerLevel(1);
                viewer.flags.panning = true;
                viewer.flags.zooming = true;
                button.disabled = false;
            });

        }

        function updateScalingLabel(viewer) {
            if (viewer.isLoaded() && viewer.scaling_factor !== current_scaling) {
                current_scaling = viewer.scaling_factor;
                span_scaling.innerText = current_scaling.toFixed(3);
            }
        }

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

        void viewer.loadMap({ venue_id: "nam-us-10126-fullrsvd-2d", map_id: "main" });
    })
    .catch((err) => {
        console.error(err);
    });