---
title: "Routing and Special Zones"
slug: "routing-and-special-zones"
description: "Sample application for the NavVis IVION frontend API. Display an alert whenever a route traverses a site model that has the attribute secure:true."
tags: ["API Integration", "Frontend API", "Route Generation", "Secure Attribute", "User Access", "User Access Control"]
updated: 2026-01-14T16:52:19Z
published: 2026-01-14T16:52:19Z
canonical: "knowledge.navvis.com/routing-and-special-zones"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.navvis.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Routing and Special Zones

Routing and special zones can also be used to restrict or control user access within a site by defining where users can navigate or which areas are visible, depending on their permissions.

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](https://ivion-api.docs.navvis.com/latest/samples/routing-app.zip).

## Creating Source and Destination Coordinates

To create source and destination coordinates for your route, define the source and destination coordinates:

```plaintext
// ./src/index.ts

...
class TestApp
{
  	public iv: ApiInterface;

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

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

 
 	constructor()
  {
  }
}
...
```

> [!NOTE]
> **Note**: The x, y, and z values depend on your specific data.

## Connecting a Route Event Listener

### Procedure

1. Using the [onRouteChanged](https://ivion-api.docs.navvis.com/latest/reference/interfaces/routeapiinterface.html#onroutechanged) signal of the [RouteApi](https://ivion-api.docs.navvis.com/latest/reference/interfaces/routeapiinterface.html), connect an event listener that receives a [RouteData](https://ivion-api.docs.navvis.com/latest/reference/interfaces/routedatainterface.html) object, which contains information about the route:

```plaintext
// ./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](https://ivion-api.docs.navvis.com/v11.0.1/reference/interfaces/routedatainterface.html) 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.

### Procedure

1. Validate whether a route was created by testing for RouteData

```plaintext
// ./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:

```plaintext
// ./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

### Procedure

1. Create a function that will generate the route between the source and destination coordinates. POIs can also be used.

```plaintext
// ./src/index.ts
...
public makeRoute(): void
{
}
```
2. Use NavVis IVION's `Vector3` object to create the route vectors.

```plaintext
// ./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`.

```plaintext
// ./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`.

```plaintext
// ./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.

![secure-zone](https://cdn.document360.io/bf174766-fa1a-4fe1-a4d7-b1db1e7cb996/Images/Documentation/image-1706278726284.png)

A site model is a three-dimensional model which clusters information by assigning meaningful names to clearly defined areas in the space of a site. With a site model, you can define and name the buildings, floors, rooms, or even more fine-grained spaces, of a site in NavVis IVION. Among other things, this information is used to create the floor changer and enrich POI search.

Wayfinding between any two locations in NavVis IVION. Requires a fully-connected navigation graph.

Point Of Interest