Wayfinding & Selection UI Controls

The SDK ships five pre-built controls for wayfinding and space interaction (PRD F39–F43). All are exported from @diginestai/core and must be rendered as children of <SpatialMap>.

---

SpaceHighlight (F39)

Highlights one or more IMDF units with a configurable fill and stroke overlay.

import { SpatialProvider, SpatialMap, SpaceHighlight } from '@diginestai/core';

export function Demo() {
  return (
    <SpatialProvider>
      <SpatialMap buildings={[building]}>
        <SpaceHighlight
          unitIds={['unit-a1', 'unit-b3']}
          color="#2393d4"
          opacity={0.4}
          strokeColor="#086bb7"
          strokeWidth={2}
        />
      </SpatialMap>
    </SpatialProvider>
  );
}

Prop	Type	Default	Description
unitIds	string[]	required	IMDF unit IDs to highlight
color	string	theme primary	Fill colour (hex or CSS colour)
opacity	number	0.35	Fill opacity 0–1
strokeColor	string	color	Outline colour
strokeWidth	number	1	Outline width in pixels

---

SelectionPin (F40)

Renders a floating pin at a selected space's display_point. Automatically tracks floor visibility.

import { SelectionPin } from '@diginestai/core';

<SpatialMap buildings={[building]}>
  <SelectionPin
    unitId="unit-a1"
    label="Conference Room A"
    onDismiss={() => setSelected(null)}
  />
</SpatialMap>

Prop	Type	Description
unitId	string	IMDF unit ID for pin placement
label	string?	Text label shown below the pin
onDismiss	() => void	Called when user taps the dismiss button

---

AccessibleRouteToggle (F41)

Toggles between standard and accessibility-optimised route calculation. Pair with <WayfindingPanel>.

import { AccessibleRouteToggle } from '@diginestai/core';

<SpatialMap buildings={[building]}>
  <AccessibleRouteToggle position="bottom-right" />
</SpatialMap>

When active the wayfinding engine avoids stairs and prefers lifts and ramps.

---

FitControl (F42)

Fits the camera to a specific unit, floor, or building bounding box.

import { FitControl, type ControlPosition } from '@diginestai/core';

<SpatialMap buildings={[building]}>
  <FitControl position="top-right" padding={40} />
</SpatialMap>

Prop	Type	Default	Description
position	ControlPosition	'top-right'	Corner placement
padding	number	20	Camera padding in pixels
fitTo	'building' | 'floor'	'building'	Fit scope

---

ShareControl (F43)

Generates and copies a deep-link URL encoding the current map state. Uses buildDeepLink internally.

import { ShareControl } from '@diginestai/core';

<SpatialMap buildings={[building]}>
  <ShareControl position="top-right" />
</SpatialMap>

On click, the control writes a URL with ?bs_floor=…&bs_lat=…&bs_lng=…&bs_zoom=… to the clipboard and shows a brief toast.

---

WayfindingControl (v2.16, #380)

An all-in-one component that renders draggable start and stop markers on the map canvas and draws the computed A* route as a GeoJSON line overlay. Replaces the need to wire <WayfindingPanel> + separate markers by hand.

import { SpatialProvider, SpatialMap } from '@diginestai/core';
import { WayfindingControl } from '@diginestai/ui';
import { buildGraph } from '@diginestai/wayfinding';

export function Demo({ imdfFeatures }) {
  const graph = buildGraph(imdfFeatures);

  return (
    <SpatialProvider>
      <SpatialMap buildings={[building]}>
        <WayfindingControl
          graph={graph}
          obstacles={[]}
          startLabel="You are here"
          stopLabel="Destination"
          onPathChange={(path) => console.log('route:', path)}
        />
      </SpatialMap>
    </SpatialProvider>
  );
}

Prop	Type	Default	Description
graph	WayfindingGraph	required	Navigation graph from buildGraph().
obstacles	string[]	[]	Unit IDs to treat as impassable during routing.
onPathChange	(path: NavigationPath | null) => void	—	Called on every route recalculation; null when no route exists.
startLabel	string	'Start'	Tooltip text on the start marker.
stopLabel	string	'Stop'	Tooltip text on the stop marker.

Markers are draggable. Dropping either marker triggers immediate A* recalculation. The route line is rendered at z-index 900 (wayfinding-route layer).

---

Combining controls

<SpatialMap buildings={[building]}>
  <SpaceHighlight unitIds={highlightedIds} color="#2393d4" />
  {selectedId && (
    <SelectionPin unitId={selectedId} label={selectedLabel} onDismiss={clear} />
  )}
  <AccessibleRouteToggle position="bottom-right" />
  <FitControl position="top-right" />
  <ShareControl position="top-right" />
</SpatialMap>