Click Here For Measure Estimate Software Try It For Free

FloorPlan SDK/API for IoTs Apps

Visualize and Interact with IoTs on a Floor Plan

MeasureSquare Floor Plan SDK/API provides a simple way to embed a digital floor plan into your mobile and web applications, to configure IoTs devices on the plan, and to visualize and interact with the devices on a graphical UI.

Applications: Smart home/building apps, facility security system, trade show floors and school/campus site maps, hospital device and occupancy tracking, property management, and more…
Development Platform: Low-code HTML5, JS
How it works

Click this button to turn the smart light bulb on and off

Click this button to simulate the detection of a major water leak

Click this button to simulate the detection of an open/closed door

Click this button to simulate detection of motion

 Click this button to simulate temperature that is too hot (turns the room color red)

Click this button to open/close an air vent

Click this button to drag & drop a temperature sensor on the floor plan

Product features


Embed detailed, interactive floor plans to your IoT application

– use minimal code to access and place your home or office floor plan in your IoT solution
– customize the view of your floor plan by enabling zoom in/out controls and displaying small details

Add moveable objects to your floor plan to represent IoT devices

– Customize appearance of your markers using any images to clearly depict sensors
– Make your sensors interactive by enabling them to be dragged & dropped onto the floor plan


Customize how your floor plan will appear on a room-by-room basis

– Set the default room colors of your floor plan
– Change room colors to reflect a variety of states

Use events to trigger your custom routines

– Know which markers or rooms have been clicked or moused over
– Use events to enhance the interactivity of your solution


Use Cases

Interactive floor plans are highly useful in many contexts, ranging from home security to property management. Below are a few cases.

Property Management

When it comes to managing an apartment complex, there are many moving parts to keep track of. A floor plan not only lets property managers oversee the individual units, but the whole complex. Once managers install their smart devices, they can mark the device locations by swiping to any area and connect it with a few clicks on a screen.
Track Utilities: With the rise of preventive analytics, our floor plan is the perfect tool. The SDK allows you to color-code each room to model how much use an area receives. For example, red colored areas may indicate high usage areas, and green-colored areas otherwise.
Damage Mitigation: From time to time, there are urgent maintenance issues that need to be resolved quickly. A common one is flooding. If not addressed quickly, the resulting water damage could cost thousands of dollars. On the floor plan, you may want to notify the manager with bright colors to immediately show where it occurred.
Manage Property Access: Scroll across the complex map and view different access points such as walk-up gates and vehicle access. Manage entry by tapping on the gates to unlock them.

Home & Office Security

When you have multiple security devices in a building, you want to be able to manage them easily. The interactive floor plan achieves this by providing a bird’s eye view of the floor plan, allowing you to easily place and manage sensors. In more urgent situations, having a floor plan will help you read the situation quickly as you will be able to identify which sensors were activated in a single glance.
Easy sensor placement and management: Click to drag and drop devices to the desired rooms in a building. See which devices need servicing (such as a battery change).
Recognize alerted locations fast: With the ability to customize sensor appearance and change room colors, you can easily create a map that clearly identifies where incidents happen. When an emergency notification comes in, instantly see which area the sensor belongs to.
Provide location to authorities efficiently: In times of emergency, it’s vital to share accurate information with authorities. With the building’s floor plan, you’ll be able to know the correct location of the incident as if you’re there. Where possible, you may even share a link to the floor plan–allowing the authorities to know exactly where to respond.

Smart Home Apps

Homeowners today have a huge variety of sensors from many manufacturers to choose from. However, many IoT apps do not offer a floor plan. The floor plan adds a level of interaction that will benefit homeowners. Smart devices can be dragged & dropped on to the floor plan, then clicked on later to get their data.
Easy sensor placement and management: Click & drag devices onto the desired rooms. Click on them to check their status, or to move them to other locations.
Recognize alerted locations fast: Changing the colors of devices/rooms on the floor plan can be used to indicate exception states (too hot/water detected/motion detected).
Controllable devices: Many IoT devices, like smart bulbs, can be turned on and off with one tap. The floor plan lets you do this–by just clicking on the light bulb in the desired room.

For Developers

Here are a few tips for developers interested in using the SDK:

  • The Engine class is used to render the floor plan in the DOM element.
  • The startupOptions parameter will determine how much detail you want to display in your floor plan.
  • Use the EventState object to trigger events based on a variety of actions, such as mouse clicks or mouse hovers.
    • The shape parameter in the event methods will tell you what object was involved.
  • The Marker class is meant for representing smart devices on the floor plan.
    • Markers can be an be static or moveable.

Explore sample code for the demo at top:
The documentation for DiagramWeb SDK can be found here: