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.