The Layer widget gives you the ability to build great dashboards by overlaying your image with the data from the buckets in real time. You have two choices: an Image Marker or a Heat Map.

The result of the image marker and the heat map will be similar to the ones in the picture below.


Image Marker

With the Image Marker, you can place pin markers above the selected image. You can manipulate the colors, values, and icons of each pin.

To place a pin over the image, first you need to select which variables to show.

In this case, as shown in the picture above, the image will display three pins.

The selected variable must have the "x" and "y" parameters inside the metadata parameter, the "x" and "y" are the position where your pin will be shown.

The range goes from 0 to 1 in both "x" and "y" axes. So, if you want to show the pin in the middle, send 0.5 for both "x" and "y".

Looking at the image below, you can see the number of the positions


{
  "variable" : "pin1",
  "metadata": { "x": 0.1, "y": 0.1 }
}

with the parameters above, the layer will show as the picture below.

You can also set the color of the pin.

{
  "variable" : "pin2",
  "metadata": { 
    "x": 0.5, 
    "y": 0.5, 
    "color": "red" 
  }
}

with the code above the widget will show a red pin in the middle of the image, as shown in the picture below.

You can also set the icon for the pin.

{
  "variable" : "pin3",
  "metadata": { 
    "x": 0.9,  
    "y": 0.9, 
    "color": "blue", 
    "icon": "car" 
  }
}

With the code above the widget will show a blue car in the bottom right corner of the image, as shown in the picture below.

The following are the icon choices.

attention
location
car
residence
bus
motorcycle
truck
mail
tower
bridge
wifi
thermometer
male
flag
bullseye
barn
factory
circle

Under parameter configuration you will find some specific options:

  • Allow Remove: People with access to the dashboard can remove the pin by clicking the X on it.
  • Allow Add: People with access to the dashboard can add a Pin by clicking with the mouse somewhere in the image.
  • Allow Move: People with access to the dashboard can move the pin in the widget.
  • Connect the markers with line: A line will be placed in the widget connecting all data, from the older to the most recent.


Adding custom images in the pins

You have the possibility to add custom images to your pins in a Layer widgetThese images are shown when you click on a pin, offering the ability to customize and better represent the current status of your variable in the widget.

Only HTTPS images can be chosen.

Manually adding images

To manually add a custom image to your pin, edit your widget by clicking on the options menu in the top right of your widget.

Then, click on the Edit option to edit your widget. Now head over to the Advanced Options tab.

At the bottom of the page there is a new option called Image displayed in the pin. In this option, you can paste the url of an image to select it as the primary image of the pin.

Adding images via devices

It is also possible to set images in the optional metadata object sent by your devices. To set an image, all that needs to be done is to add an img_pin field in the request with the url of the desired image.

{
  "variable": "my_variable",
  "metadata": {
     "img_pin": "https://.../image.jpg"
  }
}

When you send an image via devices, the image sent will always override the default image set in the widget's options.

If you do not have a device in hands, you can use our Device Emulator.


Heat Map

For the Heat Map, a colorful layer with bubbles representing the intensity of the variables will be built on top of your image. The highest the value of the variable, the more red the area will be. You can add the heat scale on the right.

Choose the variable to display in the heat map.

The selected variable must have the "x" and "y" parameters inside the metadata parameter, the "x" and "y" are the position where the heat bubble will be shown.
This value goes from 0 to 1, so, if you want to show the bubble in the middle, send 0.5 for both "x" and "y".

Looking at the image below, you can see the number of the positions


{
  "variable" : "heat",
  "value": 50, //Value must be a number
  "metadata": { "x": 0.2, "y": 0.3 }
}

with the code above, the widget will show the heat bubble like the picture below.

You can set the radius of the bubble from 1 to 10.

{
  "variable" : "heat",
  "value": 50, //Value must be a number
  "metadata": { 
    "x": 0.8,
    "y": 0.2,
    "radius": 1
  }
}

with the code above, the widget will show the heat bubble like the picture below.

Under parameter configuration you will find some specific options:

Show Scale: It will show the scale on the left side of the widget. If Yes, you can select the minimum and maximum range of the scale.

Scale Fixed: If No, the Layer will automatic resolve the maximum and minimum of the scale by the selected variable. If Yes, you can select your own minimum and maximum.

Minimum Scale: Enter the minimum scale of the Heat Map. When the data value is closer to the minimum, it would be represented as cold in the heat map.

Maximum Scale: Enter the maximum scale of the Heat Map. When the data value gets closer or higher than that value, it will become extremely hot in the map.

Radius: Configure the radius of the pins in the heat map. Higher values make the pin cover more area.