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
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)
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"); })});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