Skip to main content

WemapViewer

wemap-sdk-js

Class: WemapViewer

Framework-agnostic 360° panorama viewer. Renders the Wemap image graph as an equirectangular sphere; moving to another node runs a panorama transition (see transition/PanoramaTransition).

Requires @wemap/core to be initialized (core.init()) before use — it reads the VPS endpoint and emmid from CoreConfig.

await core.init({ emmid, token });
const viewer = new WemapViewer(el, { onNavigate: (id) => ... });
await viewer.open(nodeId, { heading: 90 });

Constructors​

Constructor​

new WemapViewer(container, options?): WemapViewer

Parameters​

container​

HTMLElement

options?​

ViewerOptions = {}

Returns​

WemapViewer

Accessors​

clickMode​

Get Signature​

get clickMode(): ClickMode

What a click on the panorama does: walk (navigate, the default), locate or measure.

Returns​

ClickMode

currentNode​

Get Signature​

get currentNode(): ViewerNode | null

Returns​

ViewerNode | null

Methods​

destroy()​

destroy(): void

Tear down the renderer, controls, observers and DOM.

Returns​

void

getGraphGeojson()​

getGraphGeojson(): Promise<VisionGeojsonGraph>

The graph as GeoJSON (LineString edges + Point nodes), for drawing on a map. Fetched and cached on first call. Used by the @wemap/viewer-map bridge.

Returns​

Promise<VisionGeojsonGraph>

getHeading()​

getHeading(): number

Current look heading in degrees (0 = north, clockwise).

Returns​

number

getNodes()​

getNodes(): ViewerNode[]

The nodes of the image graph (empty until loadGraph() or the first open() has fetched it).

Returns​

ViewerNode[]

loadGraph()​

loadGraph(): Promise<ViewerNode[]>

Fetch the image graph without opening a photo, e.g. to find the nearest node or draw the graph before showing anything. Fetched once and shared with open(); a failed fetch is retried by the next call.

Returns​

Promise<ViewerNode[]>

lookAt()​

lookAt(heading, pitch?): void

Turn to a compass heading and pitch (degrees), animated the short way round.

Parameters​

heading​

number

pitch?​

number = 0

Returns​

void

navigateTo(nodeId): void

Move to another node by id; no-op if unknown or already current. navigate fires right away. If the node's image then fails to load, the viewer goes back to the node still on screen (navigate again) and reports onError.

Parameters​

nodeId​

number

Returns​

void

nearestNode()​

nearestNode(to, level?): ViewerNode | null

Node closest to a geo position, on level when given. Null when the graph is not loaded yet (see loadGraph()) or has no node on that level.

Parameters​

to​

Coordinates

level?​

number

Returns​

ViewerNode | null

on()​

on<K>(event, callback): () => void

Subscribe to a viewer event. Returns an unsubscribe function. Unlike the onXxx constructor options (single callback each), any number of listeners can subscribe here — this is what the map bridges use.

Type Parameters​

K​

K extends keyof ViewerEvents

Parameters​

event​

K

callback​

(payload) => void

Returns​

() => void

open()​

open(target, options?): Promise<void>

Open the viewer on a node: by id, or the nearest node to a position (on its level when it has one). The first call fetches the image graph. Resolves once that node's image is on screen, or once a later move overtakes it; rejects if the node is unknown or the graph or the image fails to load.

heading / pitch (degrees) set where to look: instantly on the first open, as an animated turn after that. Without them the look direction is kept.

Parameters​

target​

number | Coordinates

options?​

OpenOptions = {}

Returns​

Promise<void>

resize()​

resize(): void

Returns​

void

setClickMode()​

setClickMode(mode): void

Switch what a click on the panorama does, instead of walking:

  • locate: a click reports the geo position under it (locate / onLocate).
  • measure: two clicks report the distance between the two points (measure / onMeasure), drawn as two dots and a line; a third click clears them.

Parameters​

mode​

ClickMode

Returns​

void

setLabels()​

setLabels(labels): void

Write these labels over the panorama, replacing the ones written before; an empty list clears them. Anchored in the world like the polygons, at a constant size on screen; no depth either.

Parameters​

labels​

ViewerLabel[]

Returns​

void

setPolygons()​

setPolygons(polygons): void

Draw these polygons over the panorama, replacing the ones drawn before; an empty list clears them. They are anchored in the world, so they follow the user from node to node. The panorama has no depth: a polygon behind a wall still shows.

Parameters​

polygons​

ViewerPolygon[]

Returns​

void