@wemap/viewer-map
Bridge between @wemap/map and @wemap/viewer: puts the
360° image graph on the map and keeps the map and the viewer in sync, Street
View style. If you use only the viewer, you never install this package and never
pull in maplibre.
Installation
npm install @wemap/core @wemap/map @wemap/viewer @wemap/viewer-map maplibre-gl
maplibre-gl (v6 or later) is a peer dependency, as for @wemap/map — see its
README for the bundler worker setup. Without a build step, load
dist/cdn/wemap-viewer-map.umd.js after the map and viewer bundles; it exposes
window.Wemap.ViewerMap.
Usage
import { core } from '@wemap/core';
import { WemapMap } from '@wemap/map';
import { WemapViewer } from '@wemap/viewer';
import { ViewerGraphLayer, ViewerHeadingMarker, ViewerMapSync } from '@wemap/viewer-map';
import '@wemap/viewer/style.css';
import '@wemap/viewer-map/style.css';
await core.init({ emmid: '31668', token: '<token>' });
const map = new WemapMap({ container: 'map' });
const viewer = new WemapViewer(document.getElementById('viewer')!);
await viewer.open(nodeId);
// Graph on the map; click an edge or node to walk there.
const graph = new ViewerGraphLayer(map, viewer);
await graph.load();
// Look-direction cone that rotates as you drag the panorama.
new ViewerHeadingMarker(map, viewer);
// Map follows the viewer (re-center + switch level) on navigation.
new ViewerMapSync(map, viewer, { zoom: 20 });
Each piece is independent: use only the ones you need. What they draw shows only
on the map's current level. Each has a destroy() that removes it and its
listeners; call it when you are done (WemapMap.remove() does not).
Components
ViewerGraphLayer(map, viewer, options?)
Draws the graph's edges as lines and its nodes as circles. Clicking one moves
the viewer to the nearest node, and the node being shown is highlighted.
await graph.load() works before or after viewer.open(): it loads the image
graph itself, without opening a photo.
| Option | Default | Description |
|---|---|---|
nodes | true | Draw the node circles |
edges | true | Draw the edge lines |
edgeColor | Wemap blue | Edge colour |
nodeColor | Wemap blue | Node colour |
currentColor | Wemap orange | Highlight of the current node |
interactive | true | Click to walk, pointer on hover; false shows the graph as coverage only |
ViewerHeadingMarker(map, viewer, options?)
A field-of-view cone at the current node, rotating live with the look heading.
| Option | Default | Description |
|---|---|---|
color | Wemap orange | Cone colour |
ViewerMapSync(map, viewer, options?)
When the viewer moves to a node, the map eases to it and switches to its level.
It follows the viewer's current node as soon as it is created (before or after
viewer.open()), and keeps the node's level when the map enters a building,
which would otherwise reset the map to that building's default level.
| Option | Default | Description |
|---|---|---|
center | true | Re-center the map on the new node |
followLevel | true | Switch the map to the node's level |
zoom | Zoom to apply when re-centering (omit to keep the current one) |