@dtechph/wayfinding-web

React web components for the Duon Wayfinding SDK (DuonMapView, DuonMallSelector, DuonRoutePicker).

Situm malls default to embedded mode: a Map Viewer iframe plus origin/destination routing. Kiosk malls stay on the opaque iframe. There is no indoor positioning on web. Session, mall-selected, map-load, POI, category, route, and navigated-destination analytics are collected automatically on embedded Situm maps.

Install

npm install @dtechph/wayfinding-web

Published on the public npm registry; no registry auth required.

Full integration guide: Web docs.

• Getting started
• Map render modes — iframe, embedded, and pathfinding when origin and destination are both selected

Usage

import {
  DuonWayfinding,
  DuonMallSelector,
  DuonMapView,
} from "@dtechph/wayfinding-web";

DuonWayfinding.initialize({
  apiBaseUrl: "https://your-backend.example.com",
  apiKey: "duon_sk_live_...",
  platform: "web",
});

const malls = await DuonWayfinding.fetchMalls();

// <DuonMallSelector malls={malls} onSelect={setMall} />

Pass mall rather than url so analytics are attributed to the right building. Give DuonMapView a definite height — it fills its parent and collapses if the parent has none.

Iframe (opaque hosted viewer, no routing chrome):

<DuonMapView mall={mall} mode="iframe" style={{ height: 480 }} />

Embedded (Situm JS bridge, hide the built-in picker if you drive routing yourself):

<DuonMapView
  mall={mall}
  mode="embedded"
  showRoutePicker={false}
  style={{ height: 480 }}
/>

Embedded with pathfinding — Situm draws a route when the user selects an origin and a destination (search or map tap). showRoutePicker defaults to true:

<DuonMapView mall={mall} mode="embedded" style={{ height: 480 }} />

Kiosk malls always stay on the iframe path, even with mode="embedded".