Interactive Map

An interactive map widget is used to display interactive markers or icons on a static background (for example, an image representing an asset or a static map). The position of a marker on the image is defined by the offset from the top and left borders.

In addition, using an interactive map, you can create an application that will:
  • Provide an overview of the current state of an asset.
  • Allow you to access a page to view more information.
  • Send a command to control the asset.

Interactive Map Properties

To configure settings for an interactive map, you must add an image, and then configure the settings for each marker. To do so:
  1. In the page designer, add the interactive map widget to the page.
  2. Select Upload Image, and then select the background image file.
    Note:
    • If you want to change the background image, you can upload a new image without affecting any markers that you have added.
    • Background image file name must not exceed 40 characters.
  3. Double-click the image where you want to add a marker.

    A marker is created at the position at which you clicked.

  4. Select the marker.
    The settings for the marker appear in the INTERACTIVE MAP PROPERTIES section. The coordinates are populated automatically; they identify the position of the marker.
    Tip: To fine-tune the position of the marker, you can drag the marker to the required position or modify the coordinates manually.
  5. Select Add Marker, and then enter values as specified in the following table.
    Field Name Description
    Marker Type Identifies the type of the marker. You can select one of the following options:
    • Shape: If you select this option, you can select one of the predefined shapes available in Operations Hub. By default, this option is selected.
    • Image: If you select this option, you can upload an image for the marker.
    Color Identifies the color of the marker. This setting appears only if you have selected Shape in the Marker Type setting.
    Shape Identifies the shape of the marker. This setting appears only if you have selected Shape in the Marker Type setting. You can select one of the following options:
    • Round
    • Square
    Image Identifies the image for the marker. This setting appears only if you have selected Image in the Marker Type setting.

    For example, if the marker identifies the position of a radiator fan, you can upload the image of a fan instead of using a predefined round or square shape for the marker.
    Size Identifies the multiplier for the marker shape or image size. For example, if you enter 2, the marker size is double the default size. By default, the value in this box is 1.
    Label Identifies the text for the marker label if you want to display the label.
    Label Color Identifies the color of the label as it appears in the application.
    Data Label Identifies the data that is associated with the marker.

    For example, suppose the interactive map plots the temperature of various components of a car. For a marker that identifies the position of a radiator fan in a car, you can map the data label with the output of the query that retrieves the temperature of the fan. When you access the application, the temperature value retrieved from the query is displayed for the radiator fan.

    You can select one of the following types of data labels:
    • Data: Select this option if you want to display the data retrieved by a query, and then select the query output that you want to display.
    • Manual: Select this option if you want to enter the data manually, and then enter the value.
    • Formula: Select this option if you want to display the data based on a formula.
    Data Label Color Identifies the color and opacity of the data label.
    Conditions Identifies the condition to show or hide the marker. For example, you can add a condition to show the marker only if the temperature of the component reaches 50 degrees Celsius.
    Actions Identifies the actions to be performed when the marker is selected.
    Note: You can add multiple markers to a single position. Each marker can have a different shape, icon, or color to indicate different conditions. For example, if the temperature of a radiator fan in a car exceeds a certain limit, the green marker can be replaced with a red marker to indicate that the temperature is high. You can also configure a set of actions for each marker when selected.