Embed in your website

Tutorials

Embedding 3D Wayfinder into HTML documents

3D Map

<script type="text/javascript" src="//static.3dwayfinder.com/projects/shared/js/minified/frak-stable.min.js"></script>
<script type="text/javascript" src="//static.3dwayfinder.com/js/dist/3d/latest/Wayfinder3D.min.js"></script>

2D Map

<script type="text/javascript" src="//static.3dwayfinder.com/js/dist/2d/latest/Wayfinder2D.min.js"></script>

This example uses jQuery for only for ease of use but You can choose any other UI framework or just use regular JavaScript to draw menus and other UI components.

Add a canvas element

Add a canvas element into the body of the html document:

<canvas id="map" width="400" height="300"></canvas>

Node that the canvas has to have a width and a height parameter. If You change these after the map has started then You also have to call:

wayfinder.resize();

Launching the Map

When the document is loaded call these methods:

var wayfinder;
(function(){ //Make sure that the page is loaded.
  wayfinder = new Wayfinder3D();
  wayfinder.options.assetsLocation = '//static.3dwayfinder.com/shared/';
  wayfinder.open("YOUR_PROJECT_ID");
})();

(function(){ //Make sure that the page is loaded
  var wayfinder = new Wayfinder2D(); 
  wayfinder.open("YOUR_PROJECT_ID");
})();

3^rd Party Libraries

3D Wayfinder has included the following 3^rd party libraries:

Hammer.JS – v1.1.2 – Touch support
Logistics.js – Data management

Full source code

<html>
    <body>
        <canvas id="map" width="1024" height="768"></canvas>
        <script src="//static.3dwayfinder.com/projects/shared/js/minified/frak-stable.min.js"></script>
        <script src="//static.3dwayfinder.com/js/dist/3d/latest/Wayfinder3D.min.js"></script>
        <script type="text/javascript">
            var wayfinder = false;
            $(function() {  // Make sure the document is loaded, aka the "main" function
                wayfinder = new Wayfinder3D();
                wayfinder.options.assetsLocation = '//static.3dwayfinder.com/shared/';
                wayfinder.open("demo");
            });
        </script>
    </body>
</html>

Issues with local file:// paths

If You open the above source locally and not using a local or remote web server You will have issues where it tries to pull the source from file://api.3dwayfinder.com or something similar.
There are couple of things that You can do against this problem.

WayfinderAPI.LOCATION = "https://api.3dwayfinder.com";
wayfinder.options.assetsLocation = 'https://static.3dwayfinder.com/shared/';

Embedding 3D Wayfinder into HTML documents

3D Map

2D Map

This example uses jQuery for only for ease of use but You can choose any other UI framework or just use regular JavaScript to draw menus and other UI components.

Add a canvas element

Add a canvas element into the body of the html document:

Node that the canvas has to have a width and a height parameter. If You change these after the map has started then You also have to call:

wayfinder.resize();

Launching the Map

When the document is loaded call these methods:

var wayfinder;
(function(){ //Make sure that the page is loaded.
wayfinder = new Wayfinder3D();
wayfinder.options.assetsLocation = ‘//static.3dwayfinder.com/shared/’;
wayfinder.open(“YOUR_PROJECT_ID”);
})();

(function(){ //Make sure that the page is loaded
var wayfinder = new Wayfinder2D();
wayfinder.open(“YOUR_PROJECT_ID”);
})();

3rd Party Libraries

3D Wayfinder has included the following 3rd party libraries:

Hammer.JS – v1.1.2 – Touch support

Logistics.js – Data management

Full source code

Issues with local file:// paths

WayfinderAPI.LOCATION = “https://api.3dwayfinder.com”;
wayfinder.options.assetsLocation = ‘https://static.3dwayfinder.com/shared/’;