Skip to content

Navigable Minimap

  • Plugin name: "navigable_minimap"
  • Plugin namespace: "navigable_minimap"

Loading the plugin

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

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

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

function start(viewer) {
    var minimap_opts = {
        container: "minimap-container-id"
    };
    var minimap;
    viewer.navigable_minimap.createNavigableMinimap(minimap_opts)
        .then(function (_minimap) {
            minimap = _minimap;
        })
        .catch(function (err) {
            console.error(err);
        });
}

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

Methods

createNavigableMinimap()

Creates a secondary instance of a viewer with a subset of methods that will be linked to the original module and will show a navigable minimap. This instance has special features that can be checked here.

Input

This method has as input the same object as when the module is loaded.

Output

Returns a promise that resolves in a minimap instance.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var minimap_opts = {
    container: "minimap-container-id"
};

viewer.navigable_minimap.createNavigableMinimap(minimap_opts)
    .then(function (minimap) {
        // minimap instance
    })
    .catch(function (err) {
        console.error(err);
    });

getNavigableMinimap()

Returns the minimap instance if it has been created, or null if not.

Minimap instance has some particularities:

  • Camera is fixed showing the full map.

The following methods have been removed:

  • loadMap
  • bindInterfaceAction
  • goTo
  • focusOn
  • move
  • scaleBy

The following properties have been removed:

  • zoom_buttons_speed
  • navigation_buttons_speed
  • max_scaling_factor
  • min_scaling_factor

The following flags have been removed:

  • panning
  • zooming
  • automatic_hover
  • automatic_selection
  • variable_zoom_on_resize

Methods

loadMinimap

If the linked viewer instance has loaded a map, the minimap instance will try to load the minimap. Returns a promises that is resolved when the minimap finishes loading.

Warning

Not all maps have a minimap assigned. If a map has no minimap, then the instance won't load anything.

Example:
1
2
3
4
5
6
7
minimap.navigable_minimap.loadMinimap()
    .then(function () {
        // Minimap loaded
    })
    .catch(function (err) {
        // Minimap not loaded, probably doesn't exist
    });

flags

minimap_interactive

If true, it is possible to drag the minimap area to move the camera of the main instance.

Example:
1
minimap_instance.navigable_minimap.flags.minimap_interactive = true;

minimap_automatic_load

If true, the instance will manage when the minimap should load and when not. If false loadMinimap has to be called.

If automatic_load is enabled, you don't need to call loadMinimap but then you cannot use its promise to know when the minimap has finished loading. To cover this, you can use the end_load callback in the minimap instance.

Example:
1
minimap_instance.navigable_minimap.flags.minimap_automatic_load = true;

minimap_automatic_states

If true, the minimap will replicate the availability of the main instance

Example:
1
minimap_instance.navigable_minimap.flags.minimap_automatic_states = true;

Example

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

const main_options = {
    container: "viewer-container",
    styles_by_groups: true,
    instanced_nodes: true,
    plugins: ["navigable_minimap"]
};

const minimap_options = {container: "minimap-container"};

loadModule("map_viewer", main_options)
    .then((viewer) => {
        window.viewer = viewer;
        return start(viewer);
    })
    .catch((err) => {
        console.error(err);
    });

async function start(viewer) {
    const venue_id = "nam-us-00096-chicagocubs";
    const map_id = "main";

    const minimap = await viewer.navigable_minimap.createNavigableMinimap(minimap_options);
    window.minimap = minimap;

    minimap.navigable_minimap.flags.minimap_interactive = true;
    minimap.navigable_minimap.flags.minimap_automatic_load = true;
    minimap.navigable_minimap.flags.minimap_automatic_states = true;

    viewer.subscribe("load_success", () => setFullAvailability(viewer));

    return viewer.loadMap({ venue_id, map_id});
}

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