Sign in

Embedding

Embedding 3D Wayfinder into HTML documents

Copy these lines into the head of the HTML document:

3D Map

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://static.3dwayfinder.com/projects/shared/js/minified/frak-stable.min.js"></script>
<script type="text/javascript" src="http://static.3dwayfinder.com/projects/shared/js/minified/Wayfinder3D.min.js"></script>

2D Map

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://static.3dwayfinder.com/projects/shared/js/minified/Wayfinder2D.min.js"></script>

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

3rd Party Libraries

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

Full source code

<html>
    <body>
        <canvas id="map" width="1024" height="768"></canvas>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
        <script src="http://static.3dwayfinder.com/projects/shared/js/minified/frak-stable.min.js"></script>
        <script src="http://static.3dwayfinder.com/projects/shared/js/minified/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 = "http://api.3dwayfinder.com";
wayfinder.options.assetsLocation = 'http://static.3dwayfinder.com/shared/';