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

// 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 ​

seat-assignment

Fork

Download

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

room-booking

Fork

Download

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

support-ticket-management

Fork

Download

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