Setup and load map

First of all, you have to load our SDK into your project. Insert these following scripts into your HTML file:

HTML
    
 
<html>  <body>    <div id="3dMapContainer"></div>  </body>  <script src="https://fnoproduction.blob.core.windows.net/sdk/js/2.26/fno-sdk.js"></script>  <script src="https://fnoproduction.blob.core.windows.net/sdk/js/2.26/WebGL.loader.js"></script></html>
Copy

fno-sdk.js contains javascript SDK for map (unity) communication
UnityLoader.js is the unity player that will render 3d map

We strongly recommend to download these two links (SDK) for your production environment.

Init the map with your API Token when all scripts are loaded (token come from our customer backoffice)

Javascript
    
​x
 
const fnoToken = "<YOUR-FNO-TOKEN>"; // provide from backofficeconst fnoMapId = "<MAP-ID>" // id of the map to loadlet FnoMapManager;​// wait page loadedwindow.addEventListener("load", function(){  // save sdk in local variable  FnoMapManager = window.FnoMapManager;  // init viewer mode  FnoMapManager.initViewerMode(fnoToken)  // load map  FnoMapManager.loadMap(idMap, '3dMapContainer', function(){    // callback when map is loaded and available for sdk interactions    console.log("map loaded");  })});
Copy

FnoMapManager is available in a global window object.

initViewerMode this method initialize the sdk for "read-only" rights. (see editor section mode for editing maps).

initViewerMode must be called before loadMap method

loadMap method parameters:

Name	Type	Description
idMap	number	the "id" map you want to load (given by Find & Order)
divContainer	string	a div "id" where the map is displayed
callbackFunc	Function	called when map is ready

Now, the map is shown and you can interact with, using events in next chapter

Last updated on