Getting Started¶

DVM (Digital Venue Manager) is a JavaScript library that manages and loads a series of modules that bring different functionalities to a venue, such as loading or interacting with Maps or 3D Views.

DVM is designed to load only the modules you need, using a unique library. In this way, the client will not need to load different libraries for each functionality, but a unique and unified library that contains only what is necessary.

Permissions¶

In order to have access to the resources of a Venue, it is necessary to authorize the domains from where the access will be requested.

To obtain an authorization, please send an email to support@3ddigitalvenue.com with the domains to be authorized.

Requirements¶

Referrer policies¶

In order to allow our API to check the domain, your site must not use noreferrer or same-origin referrer policies.

Content Security Policies and Firewalls¶

If your site uses Content Security Policies, or you have a firewall that needs to whitelist external services you must allow the following domains:

1
2
3
4
5
6
7

https://libs.3ddvapis.com/
https://contentdistribution.3ddvapis.com/
https://resources-contentdistribution.3ddvapis.com/
https://tk3d.tk3dapi.com
https://tk3dservice.tk3dapi.com/
https://*.panos.tk3dapi.com/
https://*.static.tk3dapi.com/

Also, there are data:, blob: requirements, along with unsafe-inline styles. You have an example below with the details.

CSP Meta tag example¶

1
2
3
4
5
6
7

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self' https://contentdistribution.3ddvapis.com/ https://libs.3ddvapis.com/ https://resources-contentdistribution.3ddvapis.com/ https://tk3dservice.tk3dapi.com/ https://tk3d.tk3dapi.com https://*.panos.tk3dapi.com/ https://*.static.tk3dapi.com/ ;
    img-src 'self' https://libs.3ddvapis.com/ https://resources-contentdistribution.3ddvapis.com/ https://tk3d.tk3dapi.com https://*.panos.tk3dapi.com/ https://*.static.tk3dapi.com/ data: blob: ;
    media-src 'self' https://libs.3ddvapis.com/ https://resources-contentdistribution.3ddvapis.com/ https://tk3d.tk3dapi.com https://*.panos.tk3dapi.com/ https://*.static.tk3dapi.com/ data: blob: ;
    style-src 'self' https://libs.3ddvapis.com/ https://resources-contentdistribution.3ddvapis.com/ https://tk3d.tk3dapi.com https://*.panos.tk3dapi.com/ https://*.static.tk3dapi.com/ 'unsafe-inline' ;
    worker-src 'self' https://libs.3ddvapis.com/ https://resources-contentdistribution.3ddvapis.com/  https://tk3d.tk3dapi.com https://*.panos.tk3dapi.com/ https://*.static.tk3dapi.com/ data: blob: ;
">

Installation¶

You need to install the npm package @3ddv/dvm:

1

npm install --save @3ddv/dvm

For more information, you have the package README available here.

Manual script alternative¶

Alternatively you can include the script manually, although you won't have available the Typescript definitions.

This library is available in two main distributions:

• Stable: It contains the most stable changes. It is updated less often than the Latest distribution, but its updates are tested to be solid. This is the recommended distribution for production environments. To use this distribution, please include this script in your code:

1

<script src='https://libs.3ddvapis.com/core/dvm/v1/lib/stable/dvm.js' type='application/javascript' charset='UTF-8'></script>

• Latest: It contains the last production changes. It is updated more often with new features. This distribution should not be used in production environments. To use this distribution, please include this script in your code:

1

<script src='https://libs.3ddvapis.com/core/dvm/v1/lib/latest/dvm.js' type='application/javascript' charset='UTF-8'></script>

Instantiating a Module¶

With DVM we can load modules asynchronously using the method loadModule. This method will return a Promise that will resolve returning the initialized instance of the module.

The list of available modules can be found here.

Using @3ddv/dvm¶

you can import the function loadModule from @3ddv/dvm:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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

/**
 * Loads a module asynchronously
 * @param {string} module_name - Name of the module to be loaded
 * @param {InputOptions} [input] - Object with the necessary properties to
 * initialize the module. This input is different for each module.
 */
loadModule(module_name, input_options)
    .then((module) => {
        console.log(`Module '${module.getModuleName()}' initialized:`, module);
    })
    .catch((err) => {
        console.error(err);
    });

Using direct script¶

Once the library is loaded, yoy can access the function loadModule through DVM global scope namespace:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/**
 * Loads a module asynchronously
 * @param {string} module_name - Name of the module to be loaded
 * @param {InputOptions} [input] - Object with the necessary properties to
 * initialize the module. This input is different for each module.
 */
DVM.loadModule(module_name, input_options)
    .then(function(module) {
        console.log(`Module '${module.getModuleName()}' initialized:`, module);
    })
    .catch(function(err) {
        console.error(err);
    });

Compilation version¶

DVM has multiple compilations:

• ES5 with polyfills: the default build, more compatible but bigger and slower.
• ES2015+ without polyfills: weight less, better performance, less compatibility.

DVM will check automatically if the browser is compatible with ES2015+ build and download it if it is.

Plugins¶

Some modules have plugins that enhance its features. Some of these plugins will be automatically loaded by the module, while others have to be loaded manually. The details will be specified in the own module section.