Route Map

Renders the route on a standard tile map. Configure one or more layers:

• Label: Display name shown in the layer switcher on the widget.
• Provider: OpenStreet, Google, HERE, Tencent, or Custom (enter a tile server URL).
• Layer: Tile style — Mapnik, HOT, WorldStreetMap, WorldTopoMap, WorldImagery, Roadmap, etc. Available options depend on the provider.
• Reference layer: A transparent overlay with labeled map elements (streets, borders). Configure via the layer gear icon menu.

Click Add layer to configure additional switchable layers. Users switch between layers using the layer icon button directly on the widget.

Uses a static image as the map background — for example, a floor plan or a custom site diagram:

• Image source: Upload via gallery or enter a URL.
• Entity key: Bind the image to an entity attribute key — useful when the background image varies per entity.

The Trips overlay draws the path traveled by an entity as a continuous line, based on timeseries latitude/longitude data. A marker is rendered at the most recent position along the route.

Add a trip: Click Add trip, select a data source, define coordinate keys, and click Save.

Datasource

Select the entity providing timeseries coordinates: Function, Device, or Entity (entity alias). Apply a filter to narrow the selection. Expand More datasources to add additional data sources.

Keys

• Latitude key: Timeseries key containing latitude values (default: latitude).
• Longitude key: Timeseries key containing longitude values (default: longitude).
• Additional data keys: Extra telemetry keys (like speed, status) available in label and tooltip functions.

Appearance — Marker

The icon displayed at the entity’s position on the route. Three display modes:

• Shape: Select a built-in shape; set size (px) and color. Use a color function (JavaScript) to change the marker color dynamically based on telemetry values.
• Icon: Select a built-in icon; set size and color.
• Image: Provide an image URL, or use a marker image function that returns { url, size, offset }. Set a custom marker image size.

Marker offset — fine-tune the anchor point position (Horizontal, Vertical; 0–1 range).

Rotate marker — rotates the marker icon to match the direction of movement. Set an Offset angle (degrees) to adjust the base orientation.

Appearance — Label

Text shown above the marker:

• Pattern (default): Use template variables like ${entityName}, ${entityLabel}, or any data key.
• Function: Return an HTML string based on data values.

Appearance — Tooltip

Popup shown on marker interaction:

• Pattern / Function: Define content as a template or a JavaScript function.
• Tooltip trigger: Show on click or show on hover.
• Auto-close tooltips: Close when clicking elsewhere on the map.
• Tag actions: Add named action links inside the tooltip using <link-act name='action-name'>Label</link-act>. Clicking the link triggers the configured widget action.

Behavior

On click — action triggered when the marker is clicked. Available types: Do nothing, Navigate to new dashboard state, Update current dashboard state, Navigate to other dashboard, Custom action, Custom action (HTML template), Mobile action, Open URL.

Position conversion (Image map type only)

A JavaScript function that converts the original relative x/y coordinates of the marker before rendering on the image. Useful when markers from multiple entities share the same position and need to be spread apart, or when coordinates need to be remapped to a custom image scale.

Function signature: f(origXPos, origYPos, data, dsData, aspect)

Parameters:

• origXPos: number — original relative x coordinate (0 to 1).
• origYPos: number — original relative y coordinate (0 to 1).
• data — entity data for this trip point: entity properties and telemetry from the configured datasource.
• dsData — all data from all data layers, including additional datasources.
• aspect: number — image map aspect ratio (width / height).

Must return { x: number, y: number } — new relative coordinates, each from 0 to 1.

Default (pass-through):

return {x: origXPos, y: origYPos};

Example — detect markers with same positions and place them with minimum overlap:

var xPos = data.xPos;
var yPos = data.yPos;
var locationGroup = dsData.filter((item) => item.xPos === xPos && item.yPos === yPos);
if (locationGroup.length > 1) {
  const count = locationGroup.length;
  const index = locationGroup.indexOf(data);
  const radius = 0.035;
  const angle = (360 / count) * index - 45;
  const x = xPos + radius * Math.sin(angle * Math.PI / 180) / aspect;
  const y = yPos + radius * Math.cos(angle * Math.PI / 180);
  return {x: x, y: y};
} else {
  return {x: xPos, y: yPos};
}

Path

• Path: Enable to display the route line. Set line thickness (px) and color.
• Path decorator: Directional symbols rendered along the path:
  • Decorator symbol: Arrow or Dash.
  • Size and color of the symbol.
  • Decorator arrangement: Start offset, End offset, and Repeat interval (all in px).
• Points: Dot markers at each recorded data point. Set size (px) and color.
  • Point tooltip: Popup at each recorded point. Configure pattern or function, tooltip trigger, auto-close, and tag actions.

Groups

Assign a group name. Groups appear in the Groups panel on the widget, where entire groups can be shown or hidden at once.

The Markers overlay places point icons on the map to represent entity positions — vehicles, sensors, devices, or any asset with a location. Positions are read from attributes or telemetry.

Add a marker: Click Add marker, select a data source, define coordinate keys, and click Save.

Datasource

Function, Device, or Entity alias. Apply a filter to narrow the selection.

Keys

• Latitude key: Attribute or telemetry key with latitude (default: latitude).
• Longitude key: Attribute or telemetry key with longitude (default: longitude).
• Additional data keys: Extra keys for labels, tooltips, or color functions.

Appearance — Marker

Three display modes:

• Shape: Built-in shape; set size and color. Supports a color function.
• Icon: Built-in icon; set size and color.
• Image: Image URL or a marker image function returning { url, size, offset }.

Marker offset — fine-tune anchor point (Horizontal, Vertical).

Appearance — Label

Text above the marker. Pattern (e.g., ${entityName}) or Function. Enable Tip for multi-line content.

Appearance — Tooltip

Popup on click or hover. Pattern or Function. Configure:

• Tooltip trigger: On click or on hover.
• Auto-close tooltips.
• Tooltip offset: Horizontal and Vertical position adjustment.
• Tag actions: Named action links inside the tooltip.

Behavior

On click action. Types: Do nothing, Navigate to new dashboard state, Update current dashboard state, Navigate to other dashboard, Custom action, Custom action (HTML template), Mobile action, Open URL.

Position conversion (Image map type only)

A JavaScript function that converts the original relative x/y coordinates of the marker before rendering on the image. Useful when markers share the same position and need to be spread apart, or when coordinates require remapping to a custom image scale.

Function signature: f(origXPos, origYPos, data, dsData, aspect)

Parameters:

• origXPos: number — original relative x coordinate (0 to 1).
• origYPos: number — original relative y coordinate (0 to 1).
• data — entity data for this marker: entity properties and telemetry from the configured datasource.
• dsData — all data from all data layers, including additional datasources.
• aspect: number — image map aspect ratio (width / height).

Must return { x: number, y: number } — new relative coordinates, each from 0 to 1.

Default (pass-through):

return {x: origXPos, y: origYPos};

Example — spread overlapping markers in a circle:

var xPos = data.xPos;
var yPos = data.yPos;
var locationGroup = dsData.filter((item) => item.xPos === xPos && item.yPos === yPos);
if (locationGroup.length > 1) {
  const count = locationGroup.length;
  const index = locationGroup.indexOf(data);
  const radius = 0.035;
  const angle = (360 / count) * index - 45;
  const x = xPos + radius * Math.sin(angle * Math.PI / 180) / aspect;
  const y = yPos + radius * Math.cos(angle * Math.PI / 180);
  return {x: x, y: y};
} else {
  return {x: xPos, y: yPos};
}

Groups

Assign a group name for visibility toggling.

Edit marker

Enable interactive placement and manipulation tools on the widget:

• Instruments: Enable Add, Move, and/or Remove tools.
• Scope of the attribute to persist location: Server or Shared — controls where the coordinates are saved.
• Enable snapping to other vertices for precision drawing: Snaps the new point to nearby vertices.

Use map markers clustering

Groups nearby markers into a single cluster icon at lower zoom levels. The cluster icon displays the count of items inside. Improves readability for large numbers of markers.

Polygons define areas or zones on the map — work zones, geofences, restricted regions, and more. Polygon coordinates are stored as an attribute on the entity.

Coordinate format:

[[lat1,lng1],[lat2,lng2],...,[latN,lngN]]

Add a polygon: Click Add polygon, select a data source, define the polygon key, and click Save.

Datasource

Function, Device, or Entity alias. Apply a filter if needed.

Keys

• Polygon key: Attribute key holding the coordinate array (default: perimeter).
• Additional data keys: Extra keys for labels, tooltips, or functions.

Appearance — Fill

How the polygon interior is rendered:

• Color: Solid fill color.
• Stripe: Diagonal hatching pattern — useful for indicating zones or restricted areas.
• Image: Custom image fill.

Appearance — Stroke

Border line. Set thickness (px) and color.

Appearance — Label

Text shown at the polygon center. Pattern or Function.

Appearance — Tooltip

Popup on click or hover. Pattern or Function. Configure trigger, auto-close, and tag actions.

Behavior

On click action. Same action types as Markers.

Groups

Assign a group name for visibility toggling.

Edit polygon

Interactive tools:

• Instruments: Enable Add, Edit (resize vertices), Move, and/or Remove tools.
• Scope: Server or Shared attribute scope for saving coordinates.
• Enable snapping to other vertices for precision drawing.

Circles define round areas based on a center coordinate and radius — useful for signal coverage, detection ranges, or impact zones.

Coordinate format:

{"latitude": value, "longitude": value, "radius": value}

Add a circle: Click Add circle, select a data source, define the circle key, and click Save.

Datasource

Function, Device, or Entity alias. Apply a filter if needed.

Keys

• Circle key: Attribute key holding the center and radius data (default: perimeter).
• Additional data keys: Extra keys for labels, tooltips, or functions.

Appearance — Fill

Color, Stripe, or Image — same options as Polygons.

Appearance — Stroke

Border line thickness and color.

Appearance — Label

Text shown at the circle center. Pattern or Function.

Appearance — Tooltip

Popup on click or hover. Pattern or Function. Configure trigger, auto-close, and tag actions.

Behavior

On click action. Same action types as Markers.

Groups

Assign a group name for visibility toggling.

Edit circle

Interactive tools:

• Instruments: Enable Add, Edit (resize radius), Move, and/or Remove tools.
• Scope: Server or Shared attribute scope.
• Enable snapping to other vertices for precision drawing.

Polylines display static route paths stored as attribute coordinate arrays — for example, a fixed bus route with stops, a subway line, or a pipeline. Unlike Trips (which trace paths from timeseries data), Polylines render a static shape from an entity attribute.

Coordinate format:

[[lat1,lng1],[lat2,lng2],...,[latN,lngN]]

Add a polyline: Click Add polyline, select a data source, define the polyline key, and click Save.

Datasource

Function, Device, or Entity alias. Apply a filter if needed.

Keys

• Polyline key: Attribute key holding the coordinate array (default: perimeter).
• Additional data keys: Extra keys for labels or tooltips.

Appearance — Stroke

Line thickness (px) and color.

Appearance — Label

Text shown along the polyline. Pattern or Function.

Appearance — Tooltip

Popup on click or hover. Pattern or Function. Configure:

• Tooltip trigger: On click or on hover.
• Auto-close tooltips.
• Tag actions: Named action links inside the tooltip.

Behavior

On click action. Types: Do nothing, Navigate to new dashboard state, Update current dashboard state, Navigate to other dashboard, Custom action, Custom action (HTML template), Mobile action, Open URL.

Groups

Assign a group name for visibility toggling.

Edit polyline

Interactive tools:

• Instruments: Enable Add, Edit, Move, and/or Remove tools.
• Scope: Server or Shared attribute scope for saving coordinates.
• Enable snapping to other vertices for precision drawing.