Skip to main content

Routing and Special Zones

This example will display an alert whenever a route traverses a site model that has the attribute secure:true.

Download the Routing and Special Zones sample app here.

Creating Source and Destination Coordinates

Follow these steps to create source and destination coordinates for your route:
Define the source and destination coordinates:
// ./src/index.ts

...
class TestApp
{
public iv: ApiInterface;

private readonly fromCoordinate: number[] = [5, 2, 3];

private readonly toCoordinate: number[] = [1, 2, 3];


constructor()
{
}
}
...
Note: The x, y and z values depend on your specific data.

Connecting a Route Event Listener

Follow these steps to connect a route event listener:
Using the onRouteChanged signal of the RouteApi, connect an event listener that receives a RouteData object, which contains information about the route:
// ./src/index.ts
...
constructor()
{
this.loadApi(url)
.then(() =>
{
// Retrieve the list of sites
const sites = await this.iv.site.repository.findAll();
// Load a site
await this.iv.site.service.loadSite(sites[0]);
this.iv.routing.onRouteChanged.connect((routeData:RouteDataInterface) =>
{
});
)}
.catch((error) => console.error(error));
}
...

Searching for Special Site Model Attributes

Using the RouteData object, you can search for any site model that contains the key-value attribute secure:true. When found, raise a standard alert that notifies the user.

Follow these steps to search for special site model attributes:
  1. Validate whether a route was created by testing for RouteData:
    // ./src/index.ts
    ...
    this.iv.routing.onRouteChanged.connect((routeData: RouteDataInterface) =>
    {
    if (!routeData || !routeData.elements)
    {
    return;
    }
    ...
  2. Test if some elements contain a site model with the secure:true attribute. If so, alert the user:
    // ./src/index.ts
    ...
    if (routeData.elements.some((el: RouteElementEntityInterface) =>
    el.siteModelEntity && el.siteModelEntity.attributes["secure"] === "true"))
    {
    alert("Alert! The suggested route goes through a secured area. " +
    "Please have the required identification ready to present to " +
    "security personnel.");
    }
    });
    ...

Creating Route Generator Function

Follow these steps to create a route generator function:
  1. Create a function that will generate the route between the source and destination coordinates. POIs can also be used.
    // ./src/index.ts
    ...
    public makeRoute(): void
    {
    }
  2. Use NavVis IVION's Vector3 object to create the route vectors.
    // ./src/index.ts
    public makeRoute(): void
    {
    const THREE = this.iv.lib.THREE;
    const Vector3 = THREE.Vector3;
    }
  3. Convert the from and to objects into Vector3:
    // ./src/index.ts
    public makeRoute(): void
    {
    ...
    const from = new Vector3().fromArray(this.fromCoordinate);
    const to = new Vector3().fromArray(this.toCoordinate);
    }
  4. Generate the route between the two Vector3:
    // ./src/index.ts
    public makeRoute(): void
    {
    ...
    this.iv.routing.route(from, to)
    .catch((reason: string) => alert(`Routing has failed, reason: ${reason}`));
    }

Entering Data

In order for this application to work, you must create a site model that contains the attribute you wish to use as a flag. For this example, secure:true is used.