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