MapDisplay (Legacy)

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

Dashboard generation

	Value
Runner node	`dashboard` (v1)
Frontend	`ui/legacy` via heat-next (`MapDisplay` / `MapContainer`)
Legacy API	`GET /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

	`MapDisplay`	`MapTimeline`
Mount id	`MapDisplay`	`MapTimeline`
Implementation	heat-next `MapContainer`	Legacy `MapWithControls`
Cones of vision	Yes (`yaw` / `yaws`)	No

Top-level `Map` object

Field	Required	Description
`title`	Yes	Panel title
`movements`	Yes	Array of routes / vehicles
`mapConfig`	No	Merged over defaults (see below)
`mapStats`	No	Stats cards below the map
`isSymbolToggle`	No	Enable symbol toggle UI

`movements[]` entry

Field	Required	Description
`name`	Yes	Route label (e.g. crew name)
`movement`	Yes	Time-ordered points
`markers`	No	Static or time-gated icons
`comms`	No	Comms on/off windows

Movement point (`movement[]`)

Field	Required	Description
`latitude`, `longitude`	Yes*	WGS84 strings (*or `x`/`y` with pixel config)
`x`, `y`	No	Pixel coords when `pixelPositioning: true`
`heading`	Yes	Vehicle body heading (degrees)
`yaw`	No	Single cone heading (degrees)
`yaws`	No	Multiple cone headings on one vehicle
`capturedDate`	Yes	ISO timestamp for playback
`speed`	No	Used 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[]`

Field	Description
`id`	Legacy icon id (`Friendly`, `Hostile`, `Target`, …). Omit when using `entity`.
`entity`	NATO symbol with optional circle and arc overlays (see below). When set, `entity` wins over `id`.
`latitude`, `longitude` or `x`, `y`	Position
`capturedDate`	Omit for permanent markers; include for playback-gated appearance

NATO entity markers (`markers[].entity`)

Additive APP-6A-inspired symbols with optional geographic overlays. Legacy id icons are unchanged.

Field	Required	Description
`allegiance`	Yes	`friend`, `hostile`, `neutral`, `unknown`, or `none` (glyph only, no frame; e.g. sonobuoys)
`domain`	Yes	`airAndSpace`, `ground`, `seaSurface`, `subsurface` (`air` / `space` normalize to `airAndSpace`)
`unitType`	Yes	e.g. `submarine`, `carrier`, `frigate`, `helicopter`, `uav`, `sonobuoy`, `unknown`, ship codes (`FF`, `DD`, …)
`circle`	No	Filled circle under the icon (radius in meters, or pixels when `pixelPositioning: true`)
`arc`	No	Sector arc between circle and icon
`symbolStroke`	No	Glyph stroke colour (default black; use `#F2F2F2` on dark maps for sonobuoys)
`symbolStrokeWidth`	No	Glyph stroke width (default `1.5`)

entity.circle

Field	Required	Description
`radius`	Yes	Circle radius (meters or pixels)
`fillColor`	Yes	CSS fill colour
`strokeColor`	Yes	CSS outline colour
`strokeWidth`	No	Default `1.5`

entity.arc

Field	Required	Description
`widthDegrees`	Yes	Angular span of the sector (degrees)
`directionDegrees`	Yes	Bearing from north, clockwise (degrees)
`length`	Yes	Outer radius (meters or pixels; same rule as `circle.radius`)
`fillColor`	No	Sector fill (default semi-transparent blue)
`strokeColor`	No	Sector outline
`strokeWidth`	No	Default `1`

Z-order (bottom to top): circle → arc → icon.

Numeric overlay values are conventionally strings in v1 payloads (same as lat/lng).

`comms[]`

Field	Description
`onDate`, `offDate`	ISO range when comms icon is shown

`mapConfig`

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

Field	Default	Description
`mapURL`	Mapbox URL	Tile layer
`zoom`, `minZoom`, `maxZoom`	`18`, `5`, `18`	Zoom limits
`showMarkerCones`	`true`	Draw 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)
`unityHeading`	`false`	Unity-style heading rotation
`markerType`	`"car"`	`"car"`, `"circle"`, or arrow
`polyLineColors`	`["#0B5370", …]`	Route / marker colours by movement index
`startMarkerFillColor`	`#81842C`	Start waypoint fill
`endMarkerFillColor`	`#C13D40`	End waypoint fill
`startMarkerStrokeColor`	`"white"`	Start ring; use `"transparent"` to hide
`endMarkerStrokeColor`	`"white"`	End ring; use `"transparent"` to hide
`pixelPositioning`	`false`	Use `x`/`y` + `originX`/`originY`
`originX`, `originY`	`0`	Pixel origin
`enableSpeedColors`	`false`	Colour polylines by speed blocks
`markerAnimationThreshold`	`13`	Min metres between animation steps
`enableCircleLabelGroup`	`false`	Show legend below the map
`circleLabelGroup`	—	Legend rows (`circleLabelsData[]`): colour swatches and/or NATO `entity` swatches

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

`circleLabelGroup` (NATO legend)

Set enableCircleLabelGroup: true and add rows to circleLabelGroup.circleLabelsData. Each row uses either color (plain swatch) or entity (NATO symbol swatch with the same fields as markers[].entity, without circle/arc).


"mapConfig": {
  "enableCircleLabelGroup": true,
  "circleLabelGroup": {
    "circleLabelsData": [
      { "label": "Patrol track", "color": "#0B5370" },
      {
        "label": "Submarine",
        "entity": {
          "allegiance": "hostile",
          "domain": "subsurface",
          "unitType": "submarine"
        }
      }
    ]
  }
}

`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 }]
    }
  ]
}

NATO entity markers with circle and arc (ASW-style)


{
  "Map": {
    "title": "ASW tactical picture",
    "movements": [
      {
        "name": "ASW Theatre",
        "movement": [],
        "markers": [
          {
            "latitude": "50.8500",
            "longitude": "-1.4200",
            "entity": {
              "allegiance": "unknown",
              "domain": "seaSurface",
              "unitType": "unknown",
              "circle": {
                "radius": "8000",
                "fillColor": "rgba(255, 255, 128, 0.2)",
                "strokeColor": "rgba(255, 200, 0, 0.8)"
              }
            }
          },
          {
            "latitude": "50.8200",
            "longitude": "-1.3800",
            "entity": {
              "allegiance": "hostile",
              "domain": "subsurface",
              "unitType": "submarine",
              "arc": {
                "widthDegrees": "60",
                "directionDegrees": "135",
                "length": "12000",
                "fillColor": "rgba(255, 80, 80, 0.2)",
                "strokeColor": "rgba(200, 0, 0, 0.7)"
              }
            }
          },
          {
            "latitude": "50.8400",
            "longitude": "-1.4400",
            "capturedDate": "2025-06-15T12:02:30.000Z",
            "entity": {
              "allegiance": "none",
              "domain": "seaSurface",
              "unitType": "sonobuoy",
              "symbolStroke": "#F2F2F2",
              "circle": {
                "radius": "3500",
                "fillColor": "rgba(200, 230, 255, 0.12)",
                "strokeColor": "rgba(242, 242, 242, 0.5)"
              },
              "arc": {
                "widthDegrees": "50",
                "directionDegrees": "90",
                "length": "3500"
              }
            }
          }
        ]
      }
    ],
    "mapConfig": {
      "zoom": 10,
      "enableCircleLabelGroup": true,
      "circleLabelGroup": {
        "circleLabelsData": [
          {
            "label": "Unknown",
            "entity": { "allegiance": "unknown", "domain": "seaSurface", "unitType": "unknown" }
          },
          {
            "label": "Sonobuoy",
            "entity": {
              "allegiance": "none",
              "domain": "seaSurface",
              "unitType": "sonobuoy",
              "symbolStroke": "#F2F2F2"
            }
          }
        ]
      }
    }
  },
  "dashboardUsers": []
}

Full unit-type table and v2 channel equivalent: see Arbex reference MapEntityMarkers.md. Legacy reference JSON: tools/arbex/reference/legacy/MapEntityMarkers.json.

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. The same field on markers[] gates when NATO markers (and their circle/arc overlays) appear.
NATO overlays: entity.circle draws a filled geographic circle; entity.arc draws a sector. Both use meters on lat/lng maps and pixels when mapConfig.pixelPositioning is true.
heat-next: after changing ui/dashboard map code, rebuild the dashboard library and run legacy prepare:heat-next so ui/legacy picks up changes.

MapDisplay (Next) , v2 data-service wiring
Legacy components index
Dashboard Tools runner

MapDisplay (Legacy)

Dashboard generation

Layout mount identifier

Data payload key

Do not confuse with MapTimeline

Top-level Map object

movements[] entry

Movement point (movement[])

Static markers[]

NATO entity markers (markers[].entity)

comms[]

mapConfig

circleLabelGroup (NATO legend)

markerConeColors

markerConeAngles