Basic Image Marker widget to visualize your applications

General Vision

Image Marker widget is a powerful way to visualize data within an image. This allows you to represent data in a less abstract way and closer to reality. For example, imagine you have a motion sensor network. You can have variables inside TagoIO platform named like: ‘motion_sensor_1’, ‘motion_sensor_2’, etc… Even if you use these variables with the best name you can imagine, they will not have the same expressiveness to the user as they would if you used these variables in the Image Marker widget. Check the following Image Marker example, used to visualize temperatures in a hotel:

See how a simple application used as an example becomes much more expressive to the user. This is what you should look for in your application: ease of understanding and expressiveness to the user.

How to use Basic Image Marker

The image you saw above is a sample application where Image Marker is used in basic mode, where each variable becomes a pin, let’s look at the most important widget options.

Main Configuration

If you set your Image Marker as basic, each variable of the widget can be a pin. So, if you have five variables, you will have 5 pins to insert in your widget. So, you can set on the main configuration the title, type and select the variables used in your Image Marker widget


In the visualization tab, you can set all options related to how your pins will be displayed. Options like: Connect the pins with lines, Open info box automatically, etc… It’s also on this tab that you must select the variable you want to store layers information. You can also set conditions for the pins color, icons and alerts. For example, in the hotel we would like to have the temperature always equal or bellow 80 °F. So, we created conditions to set alerts when temperature is greater than 80 °F:

User control

In this tab you can set the options that will be available for users to interact with the widget. For example, if you don’t want that users remove pins, simply turn off the option. Like the following image:

Pin Configuration

You can further customize your widget by placing images or videos on the pins if you wish. For that, go to Pin Configuration tab. There you will see options for placing images, embed links, external links and other options. Each pin has its own configuration and you can customize each pin however you like.


In the Formula tab you can use the Formula feature to customize the values that will appear on the pin without changing the original values in the bucket. For example, if you have a Celsius unit temperature and want your customers to view with the Fahrenheit unit. Just apply the formula: $VALUE$ celsius in fahrenheit. This is only one of the several applications that exist for the formula feature, there are several examples and you can also create your own formula.

Try to use Image Marker in your application!

If you are interested in what has been said about this widget and would like to improve the user experience in your application, try working with this widget! It is a powerful tool and can be used in many ways. Feel free to comment on this post how you used the widget or ask about any questions you had while reading this post. Thanks for reading! :slightly_smiling_face:

Maybe I missed something but I cannot find where I can configure my layer. I have a floor plan in my file, I am looking where to use it in the Image Marker. Thank you.

Hi, Max

To configure a layer you can click on the editing button, select the layer you want and edit name and image used. You can see in the following GIF that you have to click on the Edit button to create/edit/delete layers.

However, you cannot use an image directly from TagoIO files, you need to download the image to your system and upload to the layer. I hope this has clarified your question, if you do not understand, feel free to further detail your question. Thanks!

all right, so my problem is that I do not have the pen on the left side… That’s why I am lost! working on MacBook.

Hi, Max

You are experiencing an error accessing the metadata.file field in the variable you selected in Image Marker.

Try recreating the widget, if the error still persists, try using different variables in Image Marker.

Anyway, this should not happen and I am opening an issue for the TagoIO team, soon this error will be fixed.

I am still open to any questions or support, thanks!

I try a lot of things but still have this error ! Please inform me when it is fixed ! thank you !

Hi @max.patissier,

Good news!

Our team already fixed this bug, could you check it, please?


"What I want to do :

  • I have 4 special points in a workshop (let say machine 1, machine 2, bathroom, entrance). I have people with a special card moving in the workshop. Every time someone is moving near this special point, I get data (ID, special points).
  • So I want to see on my layer where are my people. Like an indoor GPS.


Yes, it is possible!

However, you need to know: The basic image marker just add a fixed point, so to use it, in this case, you must send the value of x and y using metadata.

To send the x and y value you can use the device emulator, as the image below:

const buble = data[4].substring(0, 2)+data[5].substring(0, 2);

if (buble === ‘cf3f’)
vars_to_tago.push({ variable: ‘buble1’, value: ‘Garaje (cf3f)’ , “metadata”: {“x”:0.9,“y”:0.9} });

if (buble === ‘cf4a’)
vars_to_tago.push({ variable: ‘buble1’, value: ‘Oficina (cf4a)’ ,“metadata”: {“x”:0.3,“y”:0.9} });

if (buble === ‘cf3e’)
vars_to_tago.push({ variable: ‘buble1’, value: ‘Entrada calle (cf3e)’,“metadata”: {“x”:0.4,“y”:0.01}});

if (buble === ‘cf38’)
vars_to_tago.push({ variable: ‘buble1’, value: ‘Maquina Laser 2 (cf38)’ ,“metadata”: {“x”:0.89,“y”:0.79} });

Working well ! thank you

1 Like