Tutorials

Here You can find some small examples how to get started with Your own 3D Wayfinder application.

How to embed and initialize the map

First of all read about how to embed 3D Wayfinder on your HTML page

<script type="text/javascript" src="//static.3dwayfinder.com/shared/js/minified/frak-stable.min.js"></script>
<script type="text/javascript" src="//static.3dwayfinder.com/js/dist/3d/latest/Wayfinder3D.min.js"></script>
<script type="text/javascript">
var wayfinder = new Wayfinder3D(); // Note if You want to use the 2D map just call new Wayfinder2D()
 
(function(){ // wait until page loads
  wayfinder.options.assetsLocation = "//static.3dwayfinder.com/shared/";
  wayfinder.open(YOUR_PROJECT_ID); // Replace with your project ID (long hash in the URL)
})();
</script>
// 3D Wayfinder will draw the map on a canvas element with the id of map
<canvas id='map' width='400' height='300'&gt</canvas>

3D Wayfinder has several callback functions that are called when something happens. For example wayfinder.cbOnDataLoaded is called when all needed data is loaded and internal objects are created. So when this is called Your application can start to use 3D Wayfinder.

wayfinder.cbOnPOIClick is called when there was a successful click on the map. For example if the user clicked on a ceiling or icon.
A POI object (Point Of Interest) is given – this gives information about the location.

How to list all Locations

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
function onPOIClick(event){
    if($(this).attr("data-poi-index")){
        wayfinder.showPath(wayfinder.pois[ $(this).attr("data-poi-index")].getNode()); // will start path animation to clicked location
    }
}
 
wayfinder.events.on("data-loaded", function(){
    var poi;
    var menu = $("#tutorial-menu");
    for(var i in wayfinder.pois){
        poi = wayfinder.pois[i];
        if(poi && poi.getShowInMenu()){ // Check if we wan't display this POI in the menu
           menu.append("<li data-poi-index='"+i+"'><a hred='#'>"+wayfinder.pois[i].getName(wayfinder.getLanguage())+"</a></li>"); // Hold the POI ID in the HTML element. You can also pass the POI dynamically into the function
        }
    }
    $("#tutorial-menu li").click(onPOIClick);
});
</script>

External templates