Skip to content

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:

js
// 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] })
}
// 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

An application demonstrating drag-and-drop seat assignment on spaces using our Floor Plan SDK

A room booking management application that uses our Space API to store room reservation information and our Floor Plan SDK to display space availability

A support ticket management application that uses our Space API to store ticket information related to specific spaces