The image marker widget allows you to add pins to different images. You can also manipulate the colors, values, and icons for each pin.

This widget also accepts features like metadata and series, that can be set in your variable data.

Creating your own

To add it to your dashboard, choose the Image Marker widget from the list and customize it to your preference. You can edit it by using the options located on the right side of the widget.

This widget works for both dashboards, Normal and Blueprint.

1. 'Data From' Field

This field allows you to set the device and variable that will be used in this widget.

This widget requires two types of variables, a group of variable to get the pin's data from, another to get the layer.

Click on the cog icon to edit specific options for this variable, such as formula, color, and more. Click on the close icon to remove this variable from the widget's data.

This field is dependent on the type of dashboard you are using; the difference is explained below.

1.1 'Data From' for Normal Dashboards

From the option 'Data From' on the right menu, select one device from your list of devices and the variable that contains the data.

1.2 'Data From' for Blueprint Dashboards

From the option 'Data From' on the right menu, add the Blueprint device and input the name of the variable that contains the information.

Learn more about Blueprint dashboards.

When using a Blueprint dashboard, the field Variable will not list variables to be picked because it doesn't know the devices linked to your Blueprint Device.

2. Imager marker types

The image marker widget has two behavior types: the basic and the advanced. Choose the one that fits you best.

2.1 Basic

Use the basic type to set-up a fixed position for each device data. In basic type, pins need to be added manually by the user editor (Image marker offers an editor so your user can place pins, create new layers, and more). Each pin is from a different device, and variables from the same device appear on the same pin.

It is possible to trace a path through which the device traveled based on the series

2.2 Advanced

Use the advanced type when you need to constantly update the coordinates sent through the device or Analysis. In advanced type, each pin produces a different main variable series. It is possible to add more data to a group in the same infobox using series.

Using metadata, you can add pins dynamically.

3.  Pins position

To position the pin you need to set an x and y coordinate for your variable data. These numbers represent the x and y position of the variable, with the coordinates (0,0) in the top left corner of the given image and coordinates (1,1) in the bottom right corner.

These coordinates can be set by two types:

3.1 Pin position using metadata

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

{
  "variable": "pin",
  "value": 21,
  "metadata": {
    "x": 0.5,
    "y": 0.9,
    "layer": "layer_id", // Only for advanced image marker
    "color": "cyan"
  }
}

3.2 Pin position through editor

You can allow an editor, so your users can place pin positions, edit infobox content, and more.

Remember that using the advanced or basic type may produce different behaviors when creating a pin

3. Layer

The layer represents the background image, and you can add as much as you want to it. Each layer will keep your own pins' positions, and you can create a layer by the editor's top screen.

The pencil icon allows you to edit layer information, such as layer name and upload image, and the layer image can also be changed at any time by dragging an image to the editor. The trash icon can delete the layer.

4. Editor

You can enable users to edit layers, pins, and geofence. This editor is represented by the pencil icon located on the left side of the widget, and it only appears if any editing permission was assigned when editing the widget.

Changes made during editing are saved by clicking the save button, otherwise they are all discarded. The return buttons (arrow to the left) within the layer, pin or geofence edition do not discard the changes.

4.1 Tool box

The tool box has four main tools as:

• Default tool: allows you to zoom and drag the image;

• Add tool: This allows you to add a pin to the layer. When this tool is active, just click somewhere on the image. Note that the number of pins is limited by the data passed to the widget, so if your widget is of the basic type you will only have a reference pin to the added devices;

• Edit tool: This allows you to edit a pin already added to the layer. When this tool is active, just click on a pin to edit it. Editing a pin includes editing data source, label, embed, img_pin and icon;

• Delete tool: This allows you to delete a pin already added to the layer. When this tool is active, just click on a pin to delete it.

The visualization of the tools and the title of the toolbox can be changed through the widget's edit screen.

5. Infobox

Present more information with an infobox that'll automatically be associated with the pins, and customize it with images, external links, formulas, embed widgets, and much more.

6. Filters

The filter makes your data easier to visualize by allowing users to filter for results. You can filter pins by device, variable, value. Filters also provide a table to list each pin that's being displayed.

7. Geofence

Draw colored geographic boundaries to make it easy to see your devices' trajectory through a zone. When enabled, the geofence can be edited by clicking on the tab located in the upper right corner of the editor

Below the geofence toolbox, you can find a list of all the geofences that are in the selected layer, and you can edit it by clicking on the geofence name.

• Default tool: This allows you to zoom and drag the image;
• Draw polygon: With this tool active, you can click on the image and draw your geofence, when you click on the first drawn point, the geofence ends, and you can rename it and add an event on the right of the editor;
• Draw circle: With this tool active, you can click on the image at the center point of your circle, and click again on another point to select the radius size, when you click the second time, the geofence ends and you rename it and add an event to the right of the editor;
• Delete tool: With this tool active, you can delete the geofences by clicking on them.