by Divya Krishnamurthy and Felix Lange
In the IoT landscape, knowing where an asset is located is just as important as understanding what it’s doing. GPS provides effective positioning outdoors, and the Cumulocity Indoor Map Plugin extends this capability indoors by enabling intuitive visualization of assets across complex, multi-level environments.
By transforming static floor plan images into interactive, geographically aligned visuals, the plugin brings indoor spaces to life within Cumulocity. It enhances traditional IoT dashboards by overlaying high-resolution floor plans—such as PNGs or SVGs—onto real-world coordinates, delivering rich spatial context and clearer insight into indoor asset placement and movement.
Technology Stack
-
Framework: Angular 18.x
-
Cumulocity SDK: @c8y/ngx-components, @c8y/client (v1021.29.1)
-
Mapping Engine: Leaflet (v1.9.4)
-
Drawing/Editing: Leaflet-Geoman (@geoman-io/leaflet-geoman-free v2.18.3)
-
Build System: Angular CLI with Module Federation
Technical Setup & Deployment
-
GitHub/Clone: https://github.com/Cumulocity-IoT/cumulocity-indoor-map-plugin
-
Build: Run npm run build to generate artifacts in the dist folder.
-
Deploy: Zip the dist folder and upload it via Administration > Ecosystem > Applications.
Key Capabilities
-
Multi-Floor Management - Navigate seamlessly across multiple building levels—from basements to rooftops—using intuitive floor selection controls.
-
Precision Floor Plan Alignment - A dedicated three-point anchoring system (Top-Left, Top-Right, and Bottom-Left) ensures accurate scaling, rotation, and skewing, aligning each floor plan precisely with the building’s physical footprint.
-
High-Zoom Visual Stability- A custom rendering engine applies 8-decimal-place precision in CSS matrix transformations, maintaining marker accuracy and visual stability even at extreme zoom levels up to 23.
-
Smart Popups - Selecting a device opens a smart popup that displays the device name, identifier, custom HTML content, and continuously updating measurement data.
Manage device behavior directly from the map interface:
- Alarms/Events: Raise alarms and events
- Operations: Execute actions such as device restarts or recalibration commands without leaving the dashboard.
-
Zone Management - Define operational zones by drawing polygons on the map. These zones—such as Hazard Areas or High-Traffic Corridors—are stored as GeoJSON, enabling advanced logic, automation workflows, and reporting.
-
Asset Search, Filtering, and Highlighting - Quickly locate specific assets on any floor using powerful and intuitive filtering tools. You can use predefined filters, such as device type, or perform a free-text search to instantly find what you’re looking for. When a filter is applied, the map dynamically highlights matching assets. This immediate visual feedback allows operators to cut through the noise and focus on the devices that matter most.
-
Shareable Views and Deep Linking - Collaboration and operational efficiency are taken a step further with shareable views. The plugin can generate a unique URL that captures the current state of the map—including the selected floor, active filters, zoom level, and even isolated zones. This deep link can be shared with team members, who can open it to see the exact same view, ensuring everyone is on the same page.
-
Auto Refresh - Stay up to date without lifting a finger. The map intelligently refreshes data at configurable intervals, ensuring you’re always viewing the most up-to-date device statuses and measurements. The countdown timer is paused during manual interactions or data loading to ensure a seamless user experience, then automatically resumes. This keeps your operational picture live and accurate, minute by minute.
Configuration Settings
This compact guide outlines the configuration settings for the Cumulocity Indoor Map Plugin based on the technical documentation.
1. Building Management
-
Create: Type a name in the Building Selection field and click “Create New” to generate a c8y_Building Managed Object.
-
Select/Delete: Use the dropdown to select existing buildings or the trash icon to remove them.
2. Geographic Boundaries
-
Set Boundaries: Click Draw Map Boundaries to define the building’s geographic footprint.
-
Placement Modes: Use Polygon Mode (click vertices) or Corners Mode (drag top-left/bottom-right markers).
-
Adjustments: Set the Rotation Angle (0–360°) and Zoom Level for the base map.
3. Floor & Asset Configuration
-
Levels: Click Configure Floors to upload images (PNG, JPG, SVG) and define floor names/numbers.
-
Zones: Click Manage Zones and Boundaries to draw semantic areas (polygons/rectangles) on specific floors.
-
Devices: Use Associate Devices to floor to link inventory assets to specific levels.
4. Precise Positioning & Display
-
Device Locations: Use Edit Device Location to drag markers to their exact physical spots on the floor plan.
-
Display Columns: Customize the device list by setting Column Headers and Property Paths (e.g., name, type, or custom fragments).
Future Vision and Roadmap
The Cumulocity Indoor Map Plugin is continuously evolving to meet the dynamic needs of modern asset management. Our vision is to create an even more intuitive, customizable, and powerful tool for indoor visualization. Here’s a glimpse into what’s next on our roadmap:
-
Enhanced Device Assignment with Search: To streamline the process of linking assets to the map, we plan to integrate a powerful search bar into the “Assign Device” modal. This will allow users to quickly find and select devices by name, type, or ID, significantly improving efficiency in environments with hundreds of assets.
-
Customizable Zone Naming: We’re moving beyond simple polygons. Soon, you’ll be able to assign custom names to your defined zones. This will make it easier to identify areas like “Loading Bay 1” or “Cold Storage Section A” and will enable more sophisticated automation and reporting based on zone-specific metadata.
-
Dynamic Icon Configuration: Visual clarity is key. We are developing a feature that will allow users to configure custom icons for different device types or statuses.
-
Configurable Smart Popups: To make the map even more relevant to your specific use case, we will introduce the ability to configure the content of the smart popups.