This tutorial introduces the Image Marker widget and shows how to use it in Basic mode to place data-driven pins on an image. You’ll learn what it’s for, how to configure it, and how to control what users can do. All screenshots and examples reflect the original tutorial context.
General Vision
The Image Marker widget visualizes data directly on an image, making dashboards less abstract and closer to real-world layouts. Imagine a motion sensor network with variables such as motion_sensor_1, motion_sensor_2, and so on. Even with good variable names, a list of numbers is less expressive than pins positioned on a floor plan or photo.
Below is an Image Marker example showing temperatures across a hotel floor plan:
This approach improves clarity and speeds up understanding for end users.
Using Image Marker in Basic Mode
In Basic mode, each selected variable becomes a pin you can place on the image. If you select five variables, you’ll position five pins.
Main Configuration
Use the Main Configuration to define the essentials:
- Title: The widget’s display name.
- Type: Choose Basic.
- Variables: Select the variables that will become pins.
Visualization
The Visualization tab controls how pins appear and behave. Here you can:
- Connect pins with lines.
- Open the info box automatically when a pin loads.
- Choose the variable that will store layer information.
- Set conditions for pin colors, icons, and alerts.
Example: In the hotel scenario, you might want temperatures at or below 80 °F. Create conditions that flag alerts when temperature exceeds 80 °F and set a normal state when it’s below 81 °F:
User Control
Decide what end users can do with the widget in the User Control tab. For example, turn off the ability to remove pins if you want to lock the layout, while still allowing users to add or edit pins and manage layers:
- Allow user to remove pins: Disable to prevent deletions.
- Allow user to add pins / edit pins / edit/add layers: Enable as needed.
- Additional options control what users can set when adding a new pin (icon, infobox image, embedded component, label).
Pin Configuration
Each pin has its own configuration. In the Pin Configuration tab you can:
- Attach images or videos to a pin.
- Embed links or external URLs.
- Customize labels and other pin-specific details.
This lets you tailor each pin to the context it represents.
Formula
Use the Formula tab to transform the value displayed on a pin without altering the original data in the bucket. For instance, if your stored temperature is in Celsius but you want to show Fahrenheit on the map, apply a conversion:
- Example: Convert the incoming
$VALUE$from Celsius to Fahrenheit with a formula such as “$VALUE$ celsius in fahrenheit”.
Formulas provide a flexible way to present data in the most useful units or formats for your users.
Try It in Your Application
If this approach resonates with your use case, experiment with the Image Marker widget to enhance clarity and context in your dashboards. It’s versatile and works well for floor plans, equipment layouts, site maps, and more.
We look forward to feedback on how you use the Image Marker widget and any questions you may have.
