Skip to Content
This documentation is provided with the HEAT environment and is relevant for this HEAT instance only.
Dashboard ComponentsLegacyMapDisplay (Legacy)

MapDisplay (Legacy)

Animated tactical map: routes, animated vehicle markers, optional cones of vision, static markers, comms overlay, and timeline playback.

Dashboard generation

Value
Runner nodedashboard (v1)
Frontendui/legacy via heat-next (MapDisplay / MapContainer)
Legacy APIGET /v1/Map (facade serves stored dashboard output)

Layout mount identifier

MapDisplay , set on each column in layoutConfiguration:

{ "component": "MapDisplay", "colspan": 12, "marginBottom": 24 }

See Legacy mount registry.

Data payload key

Map , top-level property in the object published by the dashboard node (not MapDisplay).

{
  "Map": { "title": "...", "movements": [], "mapConfig": {} },
  "dashboardUsers": ["<guid>"]
}

Do not confuse with MapTimeline

MapDisplayMapTimeline
Mount idMapDisplayMapTimeline
Implementationheat-next MapContainerLegacy MapWithControls
Cones of visionYes (yaw / yaws)No

Top-level Map object

FieldRequiredDescription
titleYesPanel title
movementsYesArray of routes / vehicles
mapConfigNoMerged over defaults (see below)
mapStatsNoStats cards below the map
isSymbolToggleNoEnable symbol toggle UI

movements[] entry

FieldRequiredDescription
nameYesRoute label (e.g. crew name)
movementYesTime-ordered points
markersNoStatic or time-gated icons
commsNoComms on/off windows

Movement point (movement[])

FieldRequiredDescription
latitude, longitudeYes*WGS84 strings (*or x/y with pixel config)
x, yNoPixel coords when pixelPositioning: true
headingYesVehicle body heading (degrees)
yawNoSingle cone heading (degrees)
yawsNoMultiple cone headings on one vehicle
capturedDateYesISO timestamp for playback
speedNoUsed for speed-coloured polylines

Multiple turrets on one vehicle: use yaws on each point, e.g. "yaws": ["120", "45", "270"].

Multiple vehicles: separate objects in movements[].

Static markers[]

FieldDescription
idIcon id (Friendly, Hostile, Target, …)
latitude, longitude or x, yPosition
capturedDateOmit for permanent markers

comms[]

FieldDescription
onDate, offDateISO range when comms icon is shown

mapConfig

Merged with defaults in ui/dashboard (MapConfig.ts). Common fields:

FieldDefaultDescription
mapURLMapbox URLTile layer
zoom, minZoom, maxZoom18, 5, 18Zoom limits
showMarkerConestrueDraw cones when yaw / yaws present
markerConeColors[]Per-movement, per-cone fill overrides (rgba or hex)
markerConeAngles[]Per-movement, per-cone aperture in degrees (smaller = narrower; omit entry for default ~64° path)
unityHeadingfalseUnity-style heading rotation
markerType"car""car", "circle", or arrow
polyLineColors["#0B5370", …]Route / marker colours by movement index
startMarkerFillColor#81842CStart waypoint fill
endMarkerFillColor#C13D40End waypoint fill
startMarkerStrokeColor"white"Start ring; use "transparent" to hide
endMarkerStrokeColor"white"End ring; use "transparent" to hide
pixelPositioningfalseUse x/y + originX/originY
originX, originY0Pixel origin
enableSpeedColorsfalseColour polylines by speed blocks
markerAnimationThreshold13Min metres between animation steps

Full list: ui/dashboard/src/types/molecules/map.types.ts (MapConfigProps).

markerConeColors

Outer array index = movement index in movements[]. Inner array index = cone index (matches yaws order). Empty inner array uses default cone fill.

"markerConeColors": [
  ["rgba(141,34,96,0.5)", "rgba(0,150,200,0.5)", "rgba(255,200,0,0.5)"],
  []
]

markerConeAngles

Same indexing as markerConeColors. Each value is the full cone aperture in degrees. Smaller numbers produce a narrower cone; larger numbers widen it. Omit a cone entry (or use an empty inner array) to keep the built-in default path (~64°).

"markerConeAngles": [
  [60, 30],
  []
]

Examples

Minimal (single route, single cone)

{
  "Map": {
    "title": "Exercise map",
    "movements": [
      {
        "name": "Blue 1",
        "movement": [
          {
            "latitude": "51.21431",
            "longitude": "-1.83710",
            "heading": "45",
            "yaw": "25",
            "speed": "2",
            "capturedDate": "2025-05-08T11:56:40.029Z"
          },
          {
            "latitude": "51.21450",
            "longitude": "-1.83700",
            "heading": "60",
            "yaw": "35",
            "speed": "2",
            "capturedDate": "2025-05-08T11:56:42.029Z"
          }
        ],
        "markers": []
      }
    ],
    "mapConfig": {
      "showMarkerCones": true
    }
  },
  "dashboardUsers": []
}

Layout:

{
  "layoutConfiguration": [
    {
      "cols": [{ "component": "MapDisplay", "colspan": 12, "marginBottom": 24 }]
    }
  ]
}

Multi-cone + custom colours + hidden start/end stroke

{
  "Map": {
    "title": "EWAR overview",
    "movements": [
      {
        "name": "Vehicle 1",
        "movement": [
          {
            "latitude": "51.21431",
            "longitude": "-1.83710",
            "heading": "45",
            "yaws": ["25", "90", "180"],
            "speed": "2",
            "capturedDate": "2025-05-08T11:56:40.029Z"
          }
        ],
        "markers": []
      }
    ],
    "mapConfig": {
      "showMarkerCones": true,
      "markerConeColors": [
        ["rgba(141,34,96,0.5)", "rgba(0,150,200,0.5)", "rgba(255,200,0,0.5)"]
      ],
      "startMarkerStrokeColor": "transparent",
      "endMarkerStrokeColor": "transparent"
    }
  }
}

Behaviour notes

  • yaw only: one cone per vehicle (unchanged from earlier releases).
  • yaws: multiple cones at the animated marker position; each value is a heading in degrees.
  • Playback: driven by capturedDate on movement points and the map playback control.
  • heat-next: after changing ui/dashboard map code, rebuild the dashboard library and run legacy prepare:heat-next so ui/legacy picks up changes.
ComposableChart (Legacy)Next dashboard components