Sign in

Tutorials

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

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

How to act on map clicks

var wayfinder = new Wayfinder3D(); // Note if You want to use the 2D map just call new Wayfinder2D()
wayfinder.open("PROJECT_ID");
wayfinder.cbOnDataLoaded = function(){
    alert("Map is ready!");
}
wayfinder.cbOnPOIClick = function(poi){
    alert("You clicked on: "+poi.getName(wayfinder.getLanguage()));
}

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

var wayfinder = new Wayfinder3D(); // Note if You want to use the 2D map just call new Wayfinder2D()
function onPOIClick(event){
    if($(this).attr("data-poi-index")){
        wayfinder.showPath(wayfinder.pois[ $(this).attr("data-poi-index")].getNode());
    }
}
wayfinder.open("PROJECT_ID");
wayfinder.cbOnDataLoaded = function(){
    var poi;
    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+"'>"+wayfinder.pois[i].getName(wayfinder.getLanguage())+"</li>");
        }
    }
    $("#menu li").click(onPOIClick);
}

Example