FloorplanModal

Interactive floorplan navigation component with customizable UI elements.

Props

Prop	Type	Default	Description
open	boolean	false	Controls modal visibility
floorId	string	undefined	Currently selected floor ID
onChange	(open: boolean, floorId: string) => void	undefined	Callback for floor/visibility changes
showCameras	boolean	false	Shows camera positions on floorplan
title	string	undefined	Modal title
subtitle	string	undefined	Modal subtitle
borderRadius	number	undefined	Modal corner radius
sidebarProps	object	undefined	Style props for sidebar container
floorItemBuilder	(room, selected, onClick) => ReactElement	undefined	Custom floor item renderer
roomItemBuilder	(room, selected, onClick) => ReactElement	undefined	Custom room item renderer

Custom Builders Examples

Floor Item

<FloorplanModal
  floorItemBuilder={(floor, selected, onClick) => (
    <button 
      onClick={onClick}
      style={{
        background: selected ? "rgba(255,255,255,0.1)" : "none",
        borderLeft: selected ? "solid 4px rgb(0,100,255)" : "solid 4px rgba(0,0,0,0)",
        // ... other styles
      }}>
      {floor.name}
    </button>
  )}
/>

Room Item

<FloorplanModal
  roomItemBuilder={(room, selected, onClick) => (
    <button 
      onClick={onClick}
      style={{
        background: selected ? "rgba(255,255,255,0.2)" : "none",
        borderLeft: selected ? "solid 4px rgb(0,200,255)" : "solid 4px rgba(0,0,0,0)",
        // ... other styles
      }}>
      {room.name}
    </button>
  )}
/>

Sidebar Styling

The sidebarProps prop allows complete customization of the sidebar container’s appearance. This is useful for matching your application’s design system or creating unique visual effects.

Full Example with Custom Sidebar

<Space 
    tourId="cm3x8uz3e0001kb8jujco03r9"
		style={{ width: "100%", height: "500px", margin: "20px 0px" }}
	>
		<Overlay>
			<FloorplanModal
				open={true}
				title={"4 Bed Villa"}
				subtitle={"Select a room"}
				floorItemBuilder={(floor, selected, onClick) => <FloorListItem floor={floor} onClick={onClick} selected={selected} />}
				roomItemBuilder={(room, selected, onClick) => <RoomListItem room={room} onClick={onClick} selected={selected} />}
				borderRadius={0}
				sidebarProps={{
					style: {
						"background": "rgba(0,100,250,0.1)",
						"borderRadius": "0px",
						"padding": "0px",
						"color": "white",
						border: "none",
						"backdropFilter": "blur(20px)",
					}
				}}
			></FloorplanModal>
			<Loading />
			<Toolbar config={{
				floorplan: true,
				resolution: true,
				measurement: false,
				configurator: false,
 
			}} />
		</Overlay>
 
	</Space>

Show Cameras

Show Rooms

Getting Started Hotspots