# Image Map

#### Overview

The **Image Map widget** allows you to place devices on any image and monitor their status in real time. It’s designed for cases where the location or relative position of devices matters—for example, factory floors, offices, greenhouses, or homes.

Unlike GPS-based maps, the Image Map uses images you upload, giving you full control over the layout. You decide what the background looks like, and then position devices manually.

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2F5Qgj3T5lN5B6hqkpPzK5%2FImage_Map_example.png?alt=media&#x26;token=4cc33a39-2e62-4e0e-aa33-24995e01f1c9" alt=""><figcaption></figcaption></figure>

#### How to Configure

1. **Add the widget**\
   Open your dashboard, click *Add Widget*, and choose **Image Map** from the Widget Box.

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2FG4xzDhFeNlo8sxOBegjP%2FImage_map_widget_box.png?alt=media&#x26;token=9a2ed8e6-4402-4d03-b66d-e20fcca3cade" alt="Image Map Widget in the Widget Box"><figcaption><p>Image Map Widget in the Widget Box</p></figcaption></figure>

2. **Upload your image**\
   Upload any image to use as the map background. This could be a floor plan, site diagram, equipment layout, or even a simple sketch. The widget supports .jpg and .png formats only.
3. **Add devices**\
   Hover over the image and click in a place you want to add a device.

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2FMC5pKCrEzQoMrHTNfPCy%2FImage_Map_add_device.png?alt=media&#x26;token=0e2817c4-643f-48bc-8aac-db18c65d16c5" alt="Adding Devices in the Image"><figcaption></figcaption></figure>

One you’ve clicked, the spot is created. Then pick a device you want to display there.

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2FBKcsvAzFpMqd5wevvfc0%2FImage_Map_pick_device.png?alt=media&#x26;token=778db1c9-19eb-4455-b15e-92ab50e93c9f" alt=""><figcaption></figcaption></figure>

4. **Adjust devices**\
   Resize a device marker if needed. You can also reposition devices anytime by dragging them.  Devices stay pinned to their locations for quick reference. You can place up to **50 devices** on one map.
5. **Configure device markers**\
   Choose how the markers look and what data are shown on markers.

{% hint style="info" %}
Device data is updated every 5 sec.
{% endhint %}

#### Device Marker Styles

You can select one of three marker styles:

* **Image** — shows the device image.
* **Value** — shows a selected datastream value.
* **Indicator** — shows the device as a circle, best for maps with many similar devices.

{% hint style="success" %}
Marker settings apply to all devices from the same template.
{% endhint %}

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2F5oC2lObvy7Vud4lOPbFR%2FImage_Map_marker_styles.png?alt=media&#x26;token=8d476fcf-ce1e-4441-81f5-62bc13453c5f" alt=""><figcaption></figcaption></figure>

#### Color Based on Value

Enable **Change color based on value** to highlight devices according to their data. This feature makes it easy to spot abnormal values or changes at a glance, helping you quickly identify issues without scanning each device individually.

You can:

* Use a gradient scheme or set custom color rules based on the minimum and maximum values of a datastream.
* Color markers based on **connection status** (online/offline).

All marker styles support the **Color based on value** option.

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2F2Mf9I7Jkn7Av5WI6VY9b%2FImage_Map_color_on_value.png?alt=media&#x26;token=4377d810-883b-479a-943a-bcbaa5987d22" alt="Color based on value"><figcaption><p>Color based on value</p></figcaption></figure>

#### Popup

You can optionally add datastreams to display in a popup tooltip when clicking on a device. Each popup supports up to 5 datastreams, giving you quick access to extra details without crowding the map.

**💡 Tip:** Avoid overcrowding by showing only essential datastreams per device. For deeper analysis, combine the Image Map with tables or charts.

<figure><img src="https://1839001309-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBFTVMf7L6S67HOuqVC%2Fuploads%2FUSLU8uovwS8YYQuE2Hqu%2FImage_Map_popup.png?alt=media&#x26;token=c9352b76-5738-4c57-8510-820e7582adfd" alt=""><figcaption></figcaption></figure>

#### Sharing to Sub-Orgs

When a dashboard containing an Image Map widget is shared with sub-organizations, users in the sub-org will see the background image along with only the devices they have access to. Devices from higher-level organizations are automatically filtered out. This ensures that sub-org users always view a clean and relevant map without exposure to unrelated devices.