Code examples

Highlight assets based on the space that they are in

Spaces and Assets reference each other. This can be used to set the highlight (change the color) accordingly.

Open in codesandbox Screenshot below:

Highlight assets and spaces on mouseover

The basic logic:

// Listen to mouse events
floorPlan.on('mousemove', handleMouseMove, floorPlan)

function handleMouseMove(evt) {
  const { pos } = evt
  // get spaces and assets for the current position
  let { spaces, assets } = this.getResourcesFromPosition(pos)
  // highlight the corresponding nodes
  if (assets.length) assets[0]?.node.setHighlight({ fill: [255, 200, 100] })
}

Open in codesandbox Screenshot below:

Add marker on click

The following example demonstrates the adding a marker on click.

Open in codesandbox Screenshot below:

IoT sensor demo, showcasing how to visualize data from external sources

In this case meeting spaces and desks are highlighted based on occupancy data from IoT sensors.
The data updates every 5 seconds.

Open in codesandbox Screenshot below:

Access private model

The following example demonstrates how to access a private model from the front end using temporary access tokens.

Open in codesandbox Screenshot below:

Complex examples that integrate with Space API