5.8.1

Installation

Requesting your credentials

The AdsumWebMap is hosted in a private npm registry, so you will need to contact us.

Once you have your npm authentication token, you'll need to create a .npmrc file into your root project directory with the following content:


//registry.npmjs.org/:_authToken=YOUR_ADACTIVE_TOKEN

Where YOUR_ADACTIVE_TOKEN is the provided token.

Add AdsumWebMap to your App

We recommend using Yarn or npm for managing front-end dependencies. If you’re new to package managers, the Yarn documentation is a good place to get started.

To install AdsumWebMap using Yarn, run:

yarn add @adactive/adsum-web-map@^5.0.0

To install AdsumWebMap using npm, run:

npm install --save @adactive/adsum-web-map@^5.0.0

Install AdsumClientAPI

AdsumClientApi is a peer-dependency required to load Adsum Data over our REST API

Follow AdsumClientAPI installation steps

Get DeviceID

If you want to use the device configuration setup in the studio like camera calibration or device position you will need to retrieve the deviceId

Download the JSON configuration file as specified in studio documentation

You should have something like this:

{
    ...
    "map": {
      "deviceId": 323
    },
    "api": {
        "endpoint": "https://api.adsum.io",
        "site": 322,
        "username": "323-device",
        "key": "343169bf805f8abd5fa71a4f529594a654de6afbac70a2d867a8b458c526fb7d"
    },
    ...
}

As specified in AdsumClientApi Get API credentials section, you will find your API credentials under the api property.

Then logically, the device map configuration is under map property.

Integration

import { AdsumLoader, AdsumWebMap } from '@adactive/adsum-web-map';
import { EntityManager } from '@adactive/adsum-client-api';

// Create an entityManager using the API credentials (see AdsumClientAPI documentation for more details)
const entityManager = new EntityManager({
  "endpoint": "https://api.adsum.io",
  "site": 322,
  "username": "323-device",
  "key": "343169bf805f8abd5fa71a4f529594a654de6afbac70a2d867a8b458c526fb7d"
});

// Create the loader responsible for converting Adsum data into the 3D engine
const adsumLoader = new AdsumLoader({
  entityManager, // Give it in order to be used to consume REST API
  deviceId: 323 // The device Id to use
});

// Create the Map instance
const adsumWebMap = new AdsumWebMap({
  loader: adsumLoader, // The loader to use
  engine: {
    container: document.getElementById('adsum-web-map-container'), // The div DOMElement to insert the canvas into
  }
});

// Init the Map
adsumWebMap.init().then(() => {
  console.log('AdsumWebMap is ready to start');
  
  // Start the rendering
  return adsumWebMap.start();
}).then(() => {
  console.log('AdsumWebMap is running');
});


<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                height: 100%;
                width: 100%;
                position: relative;
                margin: 0;
                overflow: hidden;
            }
        
            #adsum-web-map-container {
                height: 100%;
                width: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="adsum-web-map-container"></div>
        <!-- Assuming node_modules is located in parent directory -->
        <script src="../node_modules/@adactive/adsum-client-api/build/adsum-client-api.browser.js"></script>
        <script src="../node_modules/@adactive/adsum-web-map/build/adsum-web-map.js"></script>
        <script type="application/javascript">
          // AdsumClientApi and AdsumWebMap namespaces are available globally

          // Create an entityManager using the API credentials (see AdsumClientAPI documentation for more details)
          const entityManager = new AdsumClientApi.EntityManager({
            "endpoint": "https://api.adsum.io",
            "site": 322,
            "username": "323-device",
            "key": "343169bf805f8abd5fa71a4f529594a654de6afbac70a2d867a8b458c526fb7d"
          });
          
          // Create the loader responsible for converting Adsum data into the 3D engine
          const adsumLoader = new AdsumWebMap.AdsumLoader({
            entityManager, // Give it in order to be used to consume REST API
            deviceId: 323 // The device Id to use
          });
          
          // Create the Map instance
          const adsumWebMap = new AdsumWebMap.AdsumWebMap({
            loader: adsumLoader, // The loader to use
            engine: {
              container: document.getElementById('adsum-web-map-container'), // The div DOMElement to insert the canvas into
            }
          });
          
          // Init the Map
          adsumWebMap.init().then(() => {
            console.log('AdsumWebMap is ready to start');
            
            // Start the rendering
            return adsumWebMap.start();
          }).then(() => {
            console.log('AdsumWebMap is running');
          });
        </script>
    </body>
</html>

Make sure to fix div DOMElement container size (can be responsive) !

Learn the Basics →