Using Custom Images on Maps

Iotellect Server supports adding your own images on maps. This article describes how configure a dashboard to use custom SVG images on a map.

Adding Custom Non-Standard Images Into Device Images Model

Device Images is a standard model used to store images and display them on maps. If you cannot find it in the Models container, then create it from Resources.

Expand the Models container in the System Tree. Right click on the Device Images model, and choose Edit Additional Properties.

Disable read-only mode by clicking the lock icon.

Click on the Click to open... button of Device Images and add your own SVG image using the Add Row button () specifying the image name.

From the Device Images window, a new image can be added by adding a row (1) giving a name to the device (2) and uploading an appropriate image (3).

The following example will use the image named server.

Add a Custom Device Type to all Devices with a Relative Model

Create a new model by choosing Create from the context menu of the Model container.

Create the model with the properties indicated in the following table:

Property

Value

Notes

Name

deviceType

The name of the model used when forming the context path.

Description

Device Type

Description of the model appearing in the user interface.

Type

Relative

Type of model. Relative models can be “attached” to other contexts according to the Validity Rule.

Validity Expression

contains({.:# type},"device")

Determines which contexts this relative model will be attached to.

Validity Update Rules

  • Context Mask - users.*.devices.*

  • Event - Synchronized

  • Target - leave blank

Indicates the conditions under which the validity expression will be reevaluated.

Click OK to save and open the Model Configuration window. Navigate to the Model Variables tab (1) and click Add Row (2). Enter the data indicated in the following table (3), and then open the Format Field (4).

Field

Value

Description

Name

type

Description

Device Type

Writable

True

From the Format menu, configure the variable format with the following data:

Property

Value

Description

Minimal Record Count

1

Since the variable table should have one row and one column., set this to 1.

Maximal Record Count

1

Since the variable table should have one row and one column., set this to 1.

Fields

  • Name - deviceType

  • Type - String

Define the data type of the variable as a string.

Click OK to save and close.

Choose a device from the Devices context to assign a type. In this example, there is a virtual device named Server 1 already created. Open the context menu for the device and choose Edit Additional Properties.

Navigate to the Device Type tab of the device (1), toggle write mode (2) and indicate a name for the device.

Click OK to save and close.

Specifying Device Coordinates

In order to display the device on a map, specify its latitude and longitude. From the device context menu, choose Edit Device Properties. In the Generic Device Properties tab, enter a value for the Latitude Expression and Longitude Expression.

Press OK button to save and close.

Repeat the process of adding Latitude and Longitude expressions for every device that must be included on the map.

Creating a Dashboard with Map Component

Click Create from the dashboard context menu.

Fill in the Name and Description fields and click OK. In the example below, the dashboard name and description are Map.

From the newly created dashboard context menu, click Edit Dashboard to open the Web UI Builder.

In the Web UI Builder, drag and drop the Map component from the Component Palette onto the grid.

Drag the lower-right corner of the map component to expand the amount of the screen it covers.

Adding Markers to the Map

A marker can be placed on a point in a map by indicating a latitude and longitude. Each marker must be placed in a layer. The following steps create a layer, place a marker in the layer representing the device Server 1, and then load the custom an image with the layer.

Create Layer

Open the Map Properties Editor, and then open the Layers property for editing.

Add a single layer to the map by clicking Add Row and adding the indicated data.

Field

Value

Description

ID

1

This is the layer ID to which any associated markers must refer.

Name

1

Name when referencing the layer in the expression language.

Description

Layer One

Layer description which will be shown in the user interface.

Create Marker from Device

Markers will be created using component bindings, since they should update automatically according to changes in the device. From the Map Properties Editor, open the bindings for Markers.

From the Bind Property menu, create a new binding with the following data:

Property

Value

Notes

Target

form/map0:markers

This is the target, in this case the table container all markers.

Expression

addRecords( {form/map0:markers},
            1, // Marker Identifier, must be unique for each marker
            1, // Layer ID, indicating which layer the marker should be placed in 
            {users.admin.devices.server1:location$latitude}, 
            {users.admin.devices.server1:location$longitude},
            "", // Rise on Hover
            "", // Z-index Rise Offset
            "", // Draggable
            "", // Popup Options
            "", // Tooltip Options
            {users.admin.devices.server1:type$deviceType} // Style Marker ID to apply to the marker
          )

We add records to the Markers table {form/map0:markers} with information from the Server 1 device.

  • The first field is the marker identifier, hard coded as 1, but must be unique for each marker in a layer.

  • The second field is the ID of the layer, which will be hard-coded to 1 for now.

  • The third and fourth fields are the latitude and longitude of the device, referenced with {users.admin.devices.server1:location$latitude} and {users.admin.devices.server1:location$longitude} respectively

  • The fields from “Rise on Hover” through “Tooltip Options” can be left blank for now, and we will assign them an empty string "".

  • The final field is used to indicate the icon to apply to the marker. This value needs to match the identifier of a row from the Style Marker table. We want to style the marker according to its device type, so we will set this with the value retrieved with the reference {users.admin.devices.server1:type$deviceType}.

On Startup

True

Set to true to activate the binding when the dashboard is loaded

Style Marker with Custom Image

In a similar way as above, open the Marker Styles bindings and add the following data

Property

Value

Notes

Target

form/map0:markersStyles

This is the target, in this case the table containing marker styles.

Expression

addRecords( {form/map0:markerStyles},
            {users.admin.models.deviceImages:deviceImages$name[3]},
            {users.admin.models.deviceImages:deviceImages$image[3]},
            {users.admin.models.deviceImages:deviceImages$image[3]}
          )

We add records to the Marker Styles table {form/map0:markerStyles} from the Server 1 device.

  • The first field will be the identifier of the style, which will be matched by the Style field of the row we added in the previous step to the Markers table. The binding above sets the marker identifier according to the device type. In this example, we assigned the device type as Server. In practice, we might load all the device images into the Marker Styles table, but in this case we will only load the image that matches Server. The fourth row of the Device Images data table is named Server and we reference it with {users.admin.models.deviceImages:deviceImages$name[3]}.

  • The second field and third fields are the images to display by default for the marker, and to display when the marker is selected. In both cases, display the server icon which can be referenced with: {users.admin.models.deviceImages:deviceImages$image[3]} which is the image named Server.

On Startup

True

Set to true to activate the binding when the dashboard is loaded.

Viewing the Result

Finally, launch the dashboard and view the result. Navigate to the latitude and longitude specified for the device. In our case, we see the server located in San Salvador Island of the Bahamas.

Was this page helpful?