Related

This plugin manages the related maps or views that a particular map may have. A related map could be, for example, a neighbor section.

A map may have multiple related maps/views or none. They have a unique identifier name.

• Plugin name: "related"
• Plugin namespace: "related"

Dependencies

This plugin has no dependencies.

Loading the plugin

import { loadModule } from "@3ddv/dvm";

var input_options = {
    container: "container-id",
    plugins: ["related"]
};

loadModule("map_viewer", input_options)
    .then(function(viewer) {
        start(viewer);
    })
    .catch(function(err) {
        console.error(err);
    });

function start(viewer) {
    // ...
}

If this plugin is loaded, the module will have the following additional features:

Methods

getRelatedViews()

If the current map has related views, it will return an object with the related views. Otherwise, it will return null.

Output

An object with the identifier name of the related view as key and the result of getRelatedViewByName as value.

Example

var related = viewer.related.getRelatedViews();

getRelatedViewByName()

Returns the related view by its identifier name. If it does not exist, it will return null.

Input

• name_id (string): unique identifier name of the related view.

Output

• related_view (null|object): It will return null if it does not exist. If it exists, it will return an object with the following properties:
  • venue_id (string): venue id of the related view.
  • view_id (string): unique identifier of the related view to be loaded with loadView3d.
  • label (string) [optional]: Description label of the related view.
  • description (string) [optional]: Description of the related view.

This object can be used as input for loadView3d.

Example

var view = viewer.related.getRelatedViewByName("related0")

getRelatedMaps()

If the current map has related maps, it will return an object with the related maps. Otherwise, it will return null.

Output

An object with the identifier name of the related map as key and the result of getRelatedMapByName as value.

Example

var related = viewer.related.getRelatedMaps();

getRelatedMapByName()

Returns the related map by its identifier name. If it does not exist, it will return null.

Input

• name_id (string): unique identifier name of the related map.

Output

• related_map (null|object): It will return null if it does not exist. If it exists, it will return an object with the following properties:
  • venue_id (string): venue id of the related map.
  • map_id (string): unique identifier of the related map to be loaded with loadMap.
  • label (string) [optional]: Description label of the related map.
  • description (string) [optional]: Description of the related map.

This object can be used as input for loadMap.

Example

var view = viewer.related.getRelatedMapByName("related")

MapViewerNode

It might be the case that an specific node has related metadata. If that was the case, the node would have a new property related with the related data.

Example

Left (none) Right (none)

Code

import { loadModule } from "@3ddv/dvm";

const input_options = {
    container: "viewer-container",
    styles_by_groups: true,
    instanced_nodes: true,
    // plugins: ["related"] // no need to specify this plugin, as it's always included
};

// ---- LOADING MODULE ----
loadModule("map_viewer", input_options)
    .then((viewer) => {
        window.viewer = viewer;
        start(viewer);
    })
    .catch((err) => {
        console.error(err);
    });

const btn_left = document.getElementById("btn-left");
const btn_right = document.getElementById("btn-right");

function start(viewer) {
    // Just for the example purpose
    viewer.flags.scroll_with_mod_key = true;

    btn_left.addEventListener("click", goLeft);
    btn_right.addEventListener("click", goRight);

    function goLeft() {
        if(viewer.isLoaded()) {
            const left = viewer.getNodeById(viewer.getMapId())?.related?.maps?.left;
            if (left) viewer.loadMap(left);
        }
    }

    function goRight() {
        if(viewer.isLoaded()) {
            const right = viewer.getNodeById(viewer.getMapId())?.related?.maps?.right;
            if (right) viewer.loadMap(right);
        }
    }

    const venue_id = "eu-at-00006-rsvd";
    const map_id = "S_Balkon_links";

    viewer.subscribe("load_success", (_obj) => {
        setFullAvailability()
        // Check if there is a node with the same is as the map and check its related metadata:
        const node = viewer.getNodeById(viewer.getMapId());

        const left = node?.related?.maps?.left;
        const right = node?.related?.maps?.right;

        if (left) {
            btn_left.innerText = `Left ${left.map_id}`;
            btn_left.disabled = false;
        } else {
            disableLeftBtn();
        }
        if (right) {
            btn_right.innerText = `Right ${right.map_id}`;
            btn_right.disabled = false;
        } else {
            disableRightBtn();
        }
    });

    viewer.subscribe("reset", () => {
        disableLeftBtn();
        disableRightBtn();
    });

    function disableLeftBtn() {
        btn_left.innerText = "Left (None)";
        btn_left.disabled = true;
    }

    function disableRightBtn() {
        btn_right.innerText = "Right (None)";
        btn_right.disabled = true;
    }

    // Load the map
    viewer.loadMap({ venue_id, map_id })
        .then(() => {
            // Successfully loaded
            console.log("LOADED!");
        })
        .catch((err) => {
            // Error while loading
            console.error(err);
        });


    // Just for the purpose of having some random availability on the map
    function setFullAvailability() {
        if (viewer && viewer.isLoaded()) {
            viewer.getTypesList().forEach((type) => {
                viewer.setAvailability(type, viewer.getNodesByType(type));
            });
        }
    }
}