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> <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>

  • fno-sdk.js contains javascript SDK for map (unity) communication

  • UnityLoader.js is the unity player that will render 3d map

Warning

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)

const fnoToken = "<YOUR-FNO-TOKEN>"; // provide from backoffice const fnoMapId = "<MAP-ID>" // id of the map to load let FnoMapManager; // wait page loaded window.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"); }) });

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).

Warning

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

Next to read:
Register an event
null
On This Page
Setup and load map