Map

About 3 min

The Map Component displays geographical data on interactive maps. It allows you to place data points on a map, making it easier to analyze location-based information.

Supported data types

The following table outlines the data types supported by the Map component:

Channel Type	Supported?
Tag	⚫
Asset (Attributes)	🟢
Timeframe (Attributes)	⚫
Tag Search	⚫
Asset Search	⚫
Timeframe Search	⚫

Quick Start

To quickly start using the Map component, drag and drop it onto the work area. Search for the data you want to visualize, select the desired latitude and longitude, and map it onto the component:

Property Name	Description
Grid Color	Color of the grid
Grid Size	Size of the grid step
Snap to Grid	Enable/Disable snapping to the grid
Show Grid Lines	Show the grid as lines
Show Grid Dots	Show the grid as dots

Property Name	Description
Reference Point Color	Sets the color of the reference point (see Rotation and Position for more details)
Anchor Points Color	Sets the color of the rest of the seven anchor points
Point Options Color	Sets the color of the point options (only for Line and Bezier Curve)
Show Point Options	Show/Hide the point options

Property Name	Description
Active Border Fill	Sets the fill color of the border
Active Border Width	Sets the width of the border

Every component has a unique variable name. This variable name can be used to reference the component in multi-state configurations and other scripts.
On creation, every component is given a default name. This can be overwritten to be more user-friendly. To do so simply overwrite the value in the variable input field.

Arrange / Remove

Send Backward - move object one layer down
Bring Forward - move object one layer up
Send to Back - place object under all layers
Bring to Front - place object above all layers
To send/bring objects to the front/back use the first four buttons.
Any set of components can be deleted by either using the button or delete/del keyboard keys.

Rotation and Position

Reference Anchor Point - allows you to select one of the anchor points as a reference so that you can set an Angle (clockwise) of incline relative to this point. By default the reference anchor point is the top left corner. You can also rotate the component by dragging one of the yellow corner points.
You can set the position of the component by setting the X and Y coordinates relative to theReference Anchor Point and the top-left corner of the work area.
You can drag any of the anchor points to change the width and height of the component, or you can set it manually by editing the Width and Height boxes.
Set Lock Aspect Ratio so that while changing width and height, the component width to height ratio stays the same
Transform allows you to view the component as a mirror or a reflection of itself

Actions

Actions or multi-states are programmable conditional states handled by user-generated code.

Note

Actions that have script handlers are marked with a circle
OnData
in the top right corner.

The currently supported actions are described in the table below:

Action	Trigger
OnCreate	When the component is created
OnFocus	When the component is selected
onClick	When the component is clicked or the selection is changed
onData	Each time the data changes for assigned channels
onTick	20 times per second
onDblClick	On mouse double click
onHover	When the mouse is over the component (and not when the mouse is not)

Symbol	Function
	Bound Input Pin
	Bound Output Pin
	Unbound Pin

Properties

Using the Attribute Mapping Dialog you can add attributes to the current mapping and change their properties:

Attribute Mapping Dialog

Add attributes to the current mapping one by one with the Add button or all at once with the Add All button
To hide an attribute click on Toggle Visibility
To access to Attributes properties click on Properties
To save the attribute mapping (without adding the current channel) press Train Only
To save the attribute mapping and add the current channel press Train and Add
To exit the screen without saving your changes, press Close

Channels

The Channels section lists data that is assigned/mapped onto the component.
In this menu, you can change the data value color, adjust the display properties and un-assign or remove the data from the component.

Properties

The properties menu for Channels allows you:

to modify the Label of the DataSource
to set UOM, lower and upper values
to choose number format and displayed digits
to adjust the line formatting for trend line components
to configure the additional regression lines that can be plotted for supported components

Supported Multi-State Parameters

Each of the the visual parameters listed below can be used as a multi-state, i.e. used in actions and scripts:

Title and Text
- Text
Rotation and Position
- Rotation
Common
- Blink
- Hidden
Visual Properties
- Border Color
- Border Width
- Border Radius
- Marker Color
- Marker Scale
- Feature Color
- Feature Width
- Label Color
- Label Offset-X
- Label Offset-Y
Pin Options
- Current Pin Option
- Pin Input
- Pin Output
Component Specific
- Marker Cluster
- Grouping Field
- Marker Movable
- Geo JSON
- Marker icon
Format
- Number Format
- Display Digits
Pin Options
- Current Pin Option
- Pin Input
- Pin Output

Map Settings

Visual Properties

The Visual Properties section provides options for customizing the component's appearance by changing the color schema.

Border Color: Defines the component's border color
Border Width: Controls the width of the border frame. Default: 0 - invisible border
Border Radius: Defines the radius of the component's corners
Marker Color: Defines the color of the marker
Marker Scale: Defines the size of the marker
Feature Color: Defines the color of the feature
Feature Width: Defines the width of the feature
Label Color: Defines the color of the label
Label Offset X: Defines the horizontal offset of the label. Default: 0px
Label Offset Y: Defines the vertical offset of the label. Default: 10px

For more information about adding a feature to the map, see the Geo JSON section below.

To pick color of your interest

To change color for specific visual property, click on the color box next to property description. The color picker dialog will be displayed.

Pick the color of interest. The video below shows how to choose a solid, gradient or theme color.

You can add Gradient Stops by double clicking and to remove - by pulling it up.

To close the color-picker dialog - click on the property color box (Step 1).

Closing color-picker dialog

Clicking on the workspace area instead of Settings Tab area -
component settings will disappear since component focus will be lost.

Component Specific

The Component Specific section provides options for modifying various properties for the Map.

Marker Clustering: Groups nearby markers into circles, with tally sizes adjusting dynamically to the map's zoom level.

Grouping Field: Defines the field of the Geo JSON file that is used to group the data
Marker Movable: Defines whether the marker is movable
Marker: Defines icon used for marker (can be uploaded through Attribute Mapping section)

Map: Marker

Geo JSON: Defines Geo JSON file used for the Map component

Geo JSON

To add a Geo JSON file as a feature to the map, click on the Map: Adding a Geo JSON file button and select the JSON file from your computer.

Example Geo JSON File

{
  "_id":"colorado",
  "type":"Feature",
  "properties":{
    "name":"Colorado",
    "group":"US States"
  },
  "geometry":{
    "coordinates":[
      [
        [
          -109.050027,
          41.000690
        ],
        [
          -102.051717,
          41.002359
        ],
        [
          -102.042101,
          36.993019
        ],
        [
          -109.045172,
          36.998977
        ],
        [
          -109.050027,
          41.000690
        ]
      ]
    ],
    "type":"Polygon"
  }
}

Download Geo JSON file and Marker icon

The Geo JSON file and marker icon are downloadable. To extract an existing file after it has been uploaded to IOTA, click on Map: Component Specific button.

Map: Adding a feature as a Geo JSON File

Attribute Mapping

The Attribute Mapping section allows you to map the component's properties to the attributes of the selected asset. For more details on attribute mapping, see Attribute Mapping in the Generic Settings.

Marker Latitude: Defines the latitude of the marker
Marker Longitude: Defines the longitude of the marker
Center Latitude: Defines the latitude of the map center
Center Longitude: Defines the longitude of the map center
Navigate: Navigates to the view specified in the attribute
Icon: Defines the icon of the marker (.svg in the attribute)
Label: Defines the label (text) near the marker
Rotation: Adds rotation to the marker

Marker Icon can be uploaded in the Icon tab.

Map

Quick Start

Generic Settings

Grid Properties

Align Controls

Align Objects

Distribute Objects

Anchor Points Options

Locked View Options

Properties

Properties

Map Settings

Visual Properties

Component Specific

Geo JSON

Download Geo JSON file and Marker icon

Attribute Mapping

Example with Drill-down