Getting Started¶

This module is responsible for loading Maps and managing the interaction with them.

Loading the Module¶

The identifier of this module is map_viewer.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var input_options = {
    container: "container-id"
};

DVM.loadModule("map_viewer", input_options)
    .then(function(viewer) {
        console.log(`Module '${viewer.getModuleName()}' initialized:`, viewer);
    })
    .catch(function(err) {
        console.error(err);
    });

Input Options Object¶

The input options object contains all the basic configuration, including callbacks. The following main options may be included:

• container (string|HTMLElement): HTML element or its id where the widget will be attached.
• callbacks (Object) [optional]: You can see a list with the available callbacks here.
• plugins (string[]) [optional]: List of plugins to be installed in this instance.
• version (string) [optional]: You can specify the map_viewer version to be downloaded, usually latest or stable. stable by default.
• client_id (string) [optional]: Use ONLY if MMC gives you a code to use. It may enable custom functionalities.
• modern (boolean) [optional]: false to force the ES5 build download. If not specified or true it will check if the browser is compatible with ES2015+ build and download the compatible version.
• shadowroot (boolean) [optional]: if you instantiate the module with shadowroot=true, it will attach the viewer to a ShadowRoot, and its styles to it, isolating it from the rest of the document. Global styles won't affect it. If 'container' is inside a ShadowRoot, shadowroot must be used.
• aliases (boolean) [optional]: if you instantiate the module with aliases=true, the module will try to get a list of aliases for the ids of a certain venue. This might generate a network 403 error, but it won't break the application. These aliases will allow to use them when loading maps or using them as input with the API.

Input Options Object Example¶

 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

var config = {
    container: "viewer-container",
};

DVM.loadModule("map_viewer", config)
    .then(function(viewer) {
        console.log(`Module '${viewer.getModuleName()}' initialized:`, viewer);
        start(viewer);
    })
    .catch(function(err) {
        console.error(err);
    });

function start(viewer) {
    // START USING THE MODULE HERE
    viewer.subscribe("click", () => {
        console.log("click:", getNodeId(obj));
    });

    viewer.subscribe("enter", () => {
        console.log("enter:", getNodeId(obj));
    });

    viewer.subscribe("leave", () => {
        console.log("leave:", getNodeId(obj));
    });
}

// Returns the first node id, or null in case it does not exist.
function getNodeId(obj) {
    return (obj.nodes.length > 0) ? obj.nodes[0].id : null;
}

Loading a Map¶

Once the map_viewer module has been loaded, you can use the method loadMap to load a map.