Class: Viewer

viewer.Viewer

classdesc The Viewer object represents the navigable image viewer. Create a Viewer by specifying a container, client ID, image ID and other options. The viewer exposes methods and events for programmatic interaction.

In the case of asynchronous methods, MapillaryJS returns promises to the results. Notifications are always emitted through JavaScript events.

Hierarchy#

EventEmitter
↳ Viewer

Implements#

IViewer

Constructors#

constructor#

• new Viewer(options)

Create a new viewer instance.

description The Viewer object represents the street imagery viewer on your web page. It exposes methods and properties that you can use to programatically change the view, and fires events as users interact with it.

It is possible to initialize the viewer with or without a ID.

When you want to show a specific image in the viewer from the start you should initialize it with a ID.

When you do not know the first image ID at implementation time, e.g. in a map-viewer application you should initialize the viewer without a ID and call moveTo instead.

When initializing with an ID the viewer is bound to that ID until the image for that ID has been successfully loaded. Also, a cover with the image of the ID will be shown. If the data for that ID can not be loaded because the ID is faulty or other errors occur it is not possible to navigate to another ID because the viewer is not navigable. The viewer becomes navigable when the data for the ID has been loaded and the image is shown in the viewer. This way of initializing the viewer is mostly for embedding in blog posts and similar where one wants to show a specific image initially.

If the viewer is initialized without a ID (with null or undefined) it is not bound to any particular ID and it is possible to move to any ID with viewer.moveTo("<my-image-id>"). If the first move to a ID fails it is possible to move to another ID. The viewer will show a black background until a move succeeds. This way of intitializing is suited for a map-viewer application when the initial ID is not known at implementation time.

example

var viewer = new Viewer({    accessToken: "<my-access-token>",    container: "<my-container-id>",});

Parameters#

Name	Type	Description
`options`	`ViewerOptions`	Optional configuration object specifying Viewer's and the components' initial setup.

Overrides#

EventEmitter.constructor

Defined in#

viewer/Viewer.ts:147

Events#

on#

• on(type, handler): void

Fired when the viewing direction of the camera changes.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("bearing", function() {  console.log("A bearing event has occurred.");});

Parameters#

Name	Type
`type`	`"bearing"`
`handler`	(`event`: `ViewerBearingEvent`) => `void`

Returns#

void

• on(type, handler): void

Fired when a pointing device (usually a mouse) is pressed and released at the same point in the viewer.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("click", function() {  console.log("A click event has occurred.");});

Parameters#

Name	Type
`type`	`"click"`
`handler`	(`event`: `ViewerMouseEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:863

• on(type, handler): void

Fired when the right button of the mouse is clicked within the viewer.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("contextmenu", function() {  console.log("A contextmenu event has occurred.");});

Parameters#

Name	Type
`type`	`"contextmenu"`
`handler`	(`event`: `ViewerMouseEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:882

• on(type, handler): void

Fired when the viewer is loading data.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("dataloading", function() {  console.log("A loading event has occurred.");});

Parameters#

Name	Type
`type`	`"dataloading"`
`handler`	(`event`: `ViewerDataLoadingEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:900

• on(type, handler): void

Fired when a pointing device (usually a mouse) is clicked twice at the same point in the viewer.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("dblclick", function() {  console.log("A dblclick event has occurred.");});

Parameters#

Name	Type
`type`	`"dblclick"`
`handler`	(`event`: `ViewerMouseEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:919

• on(type, handler): void

Fired when the viewer's vertical field of view changes.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("fov", function() {  console.log("A fov event has occurred.");});

Parameters#

Name	Type
`type`	`"fov"`
`handler`	(`event`: `ViewerStateEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:937

• on(type, handler): void

Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the viewer has occurred.

This event is only fired for viewer configurations where the WebGL context is created, i.e. not when using the fallback functionality only.

example

// Set an event listenerviewer.on('load', function(event) {  console.log('A load event has occured');});

Parameters#

Name	Type
`type`	`"load"`
`handler`	(`event`: `ViewerLoadEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:960

• on(type, handler): void

Fired when a pointing device (usually a mouse) is pressed within the viewer.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("mousedown", function() {  console.log("A mousedown event has occurred.");});

Parameters#

Name	Type
`type`	`"mousedown"`
`handler`	(`event`: `ViewerMouseEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:979

• on(type, handler): void

Fired when a pointing device (usually a mouse) is moved within the viewer.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("mousemove", function() {  console.log("A mousemove event has occurred.");});

Parameters#

Name	Type
`type`	`"mousemove"`
`handler`	(`event`: `ViewerMouseEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:998

• on(type, handler): void

Fired when a pointing device (usually a mouse) leaves the viewer's canvas.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("mouseout", function() {  console.log("A mouseout event has occurred.");});

Parameters#

Name	Type
`type`	`"mouseout"`
`handler`	(`event`: `ViewerMouseEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1017

• on(type, handler): void

Fired when a pointing device (usually a mouse) is moved onto the viewer's canvas.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("mouseover", function() {  console.log("A mouseover event has occurred.");});

Parameters#

Name	Type
`type`	`"mouseover"`
`handler`	(`event`: `ViewerMouseEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1036

• on(type, handler): void

Fired when a pointing device (usually a mouse) is released within the viewer.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("mouseup", function() {  console.log("A mouseup event has occurred.");});

Parameters#

Name	Type
`type`	`"mouseup"`
`handler`	(`event`: `ViewerMouseEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1055

• on(type, handler): void

Fired when the viewer motion stops and it is in a fixed position with a fixed point of view.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("moveend", function() {  console.log("A moveend event has occurred.");});

Parameters#

Name	Type
`type`	`"moveend"`
`handler`	(`event`: `ViewerStateEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1074

• on(type, handler): void

Fired when the motion from one view to another start, either by changing the position (e.g. when changing image) or when changing point of view (e.g. by interaction such as pan and zoom).

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("movestart", function() {  console.log("A movestart event has occurred.");});

Parameters#

Name	Type
`type`	`"movestart"`
`handler`	(`event`: `ViewerStateEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1095

• on(type, handler): void

Fired when the navigable state of the viewer changes.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("navigable", function() {  console.log("A navigable event has occurred.");});

Parameters#

Name	Type
`type`	`"navigable"`
`handler`	(`event`: `ViewerNavigableEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1113

• on(type, handler): void

Fired every time the viewer navigates to a new image.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("image", function() {  console.log("A image event has occurred.");});

Parameters#

Name	Type
`type`	`"image"`
`handler`	(`event`: `ViewerImageEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1131

• on(type, handler): void

Fired when the viewer's position changes.

description The viewer's position changes when transitioning between images.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("position", function() {  console.log("A position event has occurred.");});

Parameters#

Name	Type
`type`	`"position"`
`handler`	(`event`: `ViewerStateEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1152

• on(type, handler): void

Fired when the viewer's point of view changes. The point of view changes when the bearing, or tilt changes.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("pov", function() {  console.log("A pov event has occurred.");});

Parameters#

Name	Type
`type`	`"pov"`
`handler`	(`event`: `ViewerStateEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1171

• on(type, handler): void

Fired when the viewer's reference position changes.

The reference position specifies the origin in the viewer's topocentric coordinate system.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("reference", function(reference) {  console.log("A reference event has occurred.");});

Parameters#

Name	Type
`type`	`"reference"`
`handler`	(`event`: `ViewerReferenceEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1192

• on(type, handler): void

Fired when the viewer is removed. After this event is emitted you must not call any methods on the viewer.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("remove", function() {  console.log("A remove event has occurred.");});

Parameters#

Name	Type
`type`	`"remove"`
`handler`	(`event`: `ViewerStateEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1211

• on(type, handler): void

Fired every time the sequence edges of the current image changes.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("sequenceedges", function() {  console.log("A sequenceedges event has occurred.");});

Parameters#

Name	Type
`type`	`"sequenceedges"`
`handler`	(`event`: `ViewerNavigationEdgeEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1229

• on(type, handler): void

Fired every time the spatial edges of the current image changes.

example

// Initialize the viewervar viewer = new Viewer({ // viewer options });// Set an event listenerviewer.on("spatialedges", function() {  console.log("A spatialedges event has occurred.");});

Parameters#

Name	Type
`type`	`"spatialedges"`
`handler`	(`event`: `ViewerNavigationEdgeEvent`) => `void`

Returns#

void

Defined in#

viewer/Viewer.ts:1247

Accessors#

dataProvider#

• get dataProvider(): IDataProvider

Returns the data provider used by the viewer to fetch all contracts, ents, and buffers.

description The viewer's data provider can be set upon initialization through the ViewerOptions.dataProvider property.

Returns#

IDataProvider

The viewer's data provider.

Implementation of#

IViewer.dataProvider

Defined in#

viewer/Viewer.ts:193

isNavigable#

• get isNavigable(): boolean

Return a boolean indicating if the viewer is in a navigable state.

description The navigable state indicates if the viewer supports moving, i.e. calling the moveTo and moveDir methods or changing the authentication state, i.e. calling setAccessToken. The viewer will not be in a navigable state if the cover is activated and the viewer has been supplied a ID. When the cover is deactivated or the viewer is activated without being supplied a ID it will be navigable.

Returns#

boolean

Boolean indicating whether the viewer is navigable.

Implementation of#

IViewer.isNavigable

Defined in#

viewer/Viewer.ts:210

Methods#

activateCombinedPanning#

▸ activateCombinedPanning(): void

Activate the combined panning functionality.

description The combined panning functionality is active by default.

Returns#

void

Implementation of#

IViewer.activateCombinedPanning

Defined in#

viewer/Viewer.ts:219

activateComponent#

▸ activateComponent(name): void

Activate a component.

example

viewer.activateComponent("marker");

Parameters#

Name	Type	Description
`name`	`ComponentName` \| `FallbackComponentName`	Name of the component which will become active.

Returns#

void

Implementation of#

IViewer.activateComponent

Defined in#

viewer/Viewer.ts:234

activateCover#

▸ activateCover(): void

Activate the cover (deactivates all other components).

Returns#

void

Implementation of#

IViewer.activateCover

Defined in#

viewer/Viewer.ts:242

addCustomRenderer#

▸ addCustomRenderer(renderer): void

Add a custom renderer to the viewer's rendering pipeline.

description During a render pass, custom renderers are called in the order they were added.

Parameters#

Name	Type	Description
`renderer`	`ICustomRenderer`	The custom renderer implementation.

Returns#

void

Implementation of#

IViewer.addCustomRenderer

Defined in#

viewer/Viewer.ts:254

attachCustomCameraControls#

▸ attachCustomCameraControls(controls): void

Attach custom camera controls to control the viewer's camera pose and projection.

description Custom camera controls allow the API user to move the viewer's camera freely and define the camera projection. These camera properties are used to render the viewer 3D scene directly into the viewer's GL context.

Only a single custom camera control instance can be attached to the viewer. A new custom camera control instance can be attached after detaching a previous one.

Set the viewer's camera controls to CameraControls.Custom to activate attached camera controls. If CameraControls.Custom has already been set when a custom camera control instance is attached, it will be activated immediately.

Set the viewer's camera controls to any other CameraControls mode to deactivate the custom camera controls.

throws {MapillaryError} When camera controls attached are already attached to the viewer.

Parameters#

Name	Type	Description
`controls`	`ICustomCameraControls`	The custom camera controls implementation.

Returns#

void

Implementation of#

IViewer.attachCustomCameraControls

Defined in#

viewer/Viewer.ts:288

deactivateCombinedPanning#

▸ deactivateCombinedPanning(): void

Deactivate the combined panning functionality.

description Deactivating the combined panning functionality could be needed in scenarios involving sequence only navigation.

Returns#

void

Implementation of#

IViewer.deactivateCombinedPanning

Defined in#

viewer/Viewer.ts:298

deactivateComponent#

▸ deactivateComponent(name): void

Deactivate a component.

example

viewer.deactivateComponent("pointer");

Parameters#

Name	Type	Description
`name`	`ComponentName` \| `FallbackComponentName`	Name of component which become inactive.

Returns#

void

Implementation of#

IViewer.deactivateComponent

Defined in#

viewer/Viewer.ts:313

deactivateCover#

▸ deactivateCover(): void

Deactivate the cover (activates all components marked as active).

Returns#

void

Implementation of#

IViewer.deactivateCover

Defined in#

viewer/Viewer.ts:321

detachCustomCameraControls#

▸ detachCustomCameraControls(): Promise<ICustomCameraControls>

Detach a previously attached custom camera control instance from the viewer.

description If no custom camera control instance has previously been attached, calling this method has no effect.

Already attached custom camera controls need to be detached before attaching another custom camera control instance.

Returns#

Promise<ICustomCameraControls>

Implementation of#

IViewer.detachCustomCameraControls

Defined in#

viewer/Viewer.ts:337

fire#

▸ fire(type, event): void

Parameters#

Name	Type
`type`	`"bearing"`
`event`	`ViewerBearingEvent`

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:341

▸ fire(type, event): void

Parameters#

Name	Type
`type`	`"dataloading"`
`event`	`ViewerDataLoadingEvent`

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:345

▸ fire(type, event): void

Parameters#

Name	Type
`type`	`"navigable"`
`event`	`ViewerNavigableEvent`

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:349

▸ fire(type, event): void

Parameters#

Name	Type
`type`	`"image"`
`event`	`ViewerImageEvent`

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:353

▸ fire(type, event): void

Parameters#

Name	Type
`type`	`"sequenceedges"` \| `"spatialedges"`
`event`	`ViewerNavigationEdgeEvent`

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:357

▸ fire(type, event): void

Parameters#

Name	Type
`type`	`"reference"`
`event`	`ViewerReferenceEvent`

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:361

▸ fire(type, event): void

Parameters#

Name	Type
`type`	`"fov"` \| `"moveend"` \| `"movestart"` \| `"position"` \| `"pov"` \| `"remove"`
`event`	`ViewerStateEvent`

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:365

▸ fire(type, event): void

Parameters#

Name	Type
`type`	`"click"` \| `"contextmenu"` \| `"dblclick"` \| `"mousedown"` \| `"mousemove"` \| `"mouseout"` \| `"mouseover"` \| `"mouseup"`
`event`	`ViewerMouseEvent`

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:369

getBearing#

▸ getBearing(): Promise<number>

Get the bearing of the current viewer camera.

description The bearing depends on how the camera is currently rotated and does not correspond to the compass angle of the current image if the view has been panned.

Bearing is measured in degrees clockwise with respect to north.

example

viewer.getBearing().then(b => { console.log(b); });

Returns#

Promise<number>

Promise to the bearing of the current viewer camera.

Implementation of#

IViewer.getBearing

Defined in#

viewer/Viewer.ts:399

getCameraControls#

▸ getCameraControls(): Promise<CameraControls>

Get the viewer's camera control mode.

description The camera control mode determines how the camera is controlled when the viewer receives pointer and keyboard input.

example

viewer.getCameraControls().then(c => { console.log(c); });

Returns#

Promise<CameraControls>

controls - Camera control mode.

Implementation of#

IViewer.getCameraControls

Defined in#

viewer/Viewer.ts:428

getCanvas#

▸ getCanvas(): HTMLCanvasElement

Returns the viewer's canvas element.

description This is the element onto which the viewer renders the WebGL content.

Returns#

HTMLCanvasElement

The viewer's canvas element, or null or not initialized.

Implementation of#

IViewer.getCanvas

Defined in#

viewer/Viewer.ts:464

getCanvasContainer#

▸ getCanvasContainer(): HTMLDivElement

Returns the HTML element containing the viewer's canvas element.

description This is the element to which event bindings for viewer interactivity (such as panning and zooming) are attached.

Returns#

HTMLDivElement

The container for the viewer's canvas element.

Implementation of#

IViewer.getCanvasContainer

Defined in#

viewer/Viewer.ts:477

getCenter#

▸ getCenter(): Promise<number[]>

Get the basic coordinates of the current image that is at the center of the viewport.

description Basic coordinates are 2D coordinates on the [0, 1] interval and have the origin point, (0, 0), at the top left corner and the maximum value, (1, 1), at the bottom right corner of the original image.

example

viewer.getCenter().then(c => { console.log(c); });

Returns#

Promise<number[]>

Promise to the basic coordinates of the current image at the center for the viewport.

Implementation of#

IViewer.getCenter

Defined in#

viewer/Viewer.ts:498

getComponent#

▸ getComponent<TComponent>(name): TComponent

Get a component.

example

var pointerComponent = viewer.getComponent("pointer");

Type parameters#

Name	Type
`TComponent`	extends `Component`<`ComponentConfiguration`, `TComponent`>

Parameters#

Name	Type	Description
`name`	`ComponentName` \| `FallbackComponentName`	Name of component.

Returns#

TComponent

The requested component.

Implementation of#

IViewer.getComponent

Defined in#

viewer/Viewer.ts:523

getContainer#

▸ getContainer(): HTMLElement

Returns the viewer's containing HTML element.

Returns#

HTMLElement

The viewer's container.

Implementation of#

IViewer.getContainer

Defined in#

viewer/Viewer.ts:533

getFieldOfView#

▸ getFieldOfView(): Promise<number>

Get the viewer's current vertical field of view.

description The vertical field of view rendered on the viewer canvas measured in degrees.

example

viewer.getFieldOfView().then(fov => { console.log(fov); });

Returns#

Promise<number>

Promise to the current field of view of the viewer camera.

Implementation of#

IViewer.getFieldOfView

Defined in#

viewer/Viewer.ts:551

getImage#

▸ getImage(): Promise<Image>

Get the viewer's current image.

example

viewer.getImage().then(image => { console.log(image.id); });

Returns#

Promise<Image>

Promise to the current image.

Implementation of#

IViewer.getImage

Defined in#

viewer/Viewer.ts:576

getPointOfView#

▸ getPointOfView(): Promise<PointOfView>

Get the viewer's current point of view.

example

viewer.getPointOfView().then(pov => { console.log(pov); });

Returns#

Promise<PointOfView>

Promise to the current point of view of the viewer camera.

Implementation of#

IViewer.getPointOfView

Defined in#

viewer/Viewer.ts:599

getPosition#

▸ getPosition(): Promise<LngLat>

Get the viewer's current position

example

viewer.getPosition().then(pos => { console.log(pos); });

Returns#

Promise<LngLat>

Promise to the viewers's current position.

Implementation of#

IViewer.getPosition

Defined in#

viewer/Viewer.ts:630

getReference#

▸ getReference(): Promise<LngLatAlt>

Get the viewer's current reference position.

description The reference position specifies the origin in the viewer's topocentric coordinate system.

example

viewer.getReference().then(reference => { console.log(reference); });

Returns#

Promise<LngLatAlt>

Promise to the reference position.

Implementation of#

IViewer.getReference

Defined in#

viewer/Viewer.ts:660

getZoom#

▸ getZoom(): Promise<number>

Get the image's current zoom level.

example

viewer.getZoom().then(z => { console.log(z); });

Returns#

Promise<number>

Promise to the viewers's current zoom level.

Implementation of#

IViewer.getZoom

Defined in#

viewer/Viewer.ts:683

hasCustomCameraControls#

▸ hasCustomCameraControls(controls): boolean

Check if a controls instance is the camera controls that are currently attached to the viewer.

Parameters#

Name	Type	Description
`controls`	`ICustomCameraControls`	Camera controls instance.

Returns#

boolean

Value indicating whether the controls instance is currently attached.

Implementation of#

IViewer.hasCustomCameraControls

Defined in#

viewer/Viewer.ts:705

hasCustomRenderer#

▸ hasCustomRenderer(rendererId): boolean

Check if a custom renderer has been added to the viewer's rendering pipeline.

Parameters#

Name	Type
`rendererId`	`string`

Returns#

boolean

Value indicating whether the customer renderer has been added.

Implementation of#

IViewer.hasCustomRenderer

Defined in#

viewer/Viewer.ts:717

moveDir#

▸ moveDir(direction): Promise<Image>

Navigate in a given direction.

throws If the current image does not have the edge direction or the edges has not yet been cached.

throws Propagates any IO errors to the caller.

throws When viewer is not navigable.

throws CancelMapillaryError When a subsequent move request is made before the move dir call has completed.

example

viewer.moveDir(NavigationDirection.Next).then(    image => { console.log(image); },    error => { console.error(error); });

Parameters#

Name	Type	Description
`direction`	`NavigationDirection`	Direction in which which to move.

Returns#

Promise<Image>

Promise to the image that was navigated to.

Implementation of#

IViewer.moveDir

Defined in#

viewer/Viewer.ts:740

moveTo#

▸ moveTo(imageId): Promise<Image>

Navigate to a given image ID.

throws Propagates any IO errors to the caller.

throws When viewer is not navigable.

throws CancelMapillaryError When a subsequent move request is made before the move to ID call has completed.

example

viewer.moveTo("<my-image-id>").then(    image => { console.log(image); },    error => { console.error(error); });

Parameters#

Name	Type	Description
`imageId`	`string`	Id of the image to move to.

Returns#

Promise<Image>

Promise to the image that was navigated to.

Implementation of#

IViewer.moveTo

Defined in#

viewer/Viewer.ts:774

off#

▸ off(type, handler): void

Unsubscribe from an event by its name.

Parameters#

Name	Type
`type`	`"bearing"`
`handler`	(`event`: `ViewerBearingEvent`) => `void`

Returns#

void

Implementation of#

IViewer.off

Overrides#

EventEmitter.off

Defined in#

viewer/Viewer.ts:791

▸ off(type, handler): void

Parameters#

Name	Type
`type`	`"dataloading"`
`handler`	(`event`: `ViewerDataLoadingEvent`) => `void`

Returns#

void

Implementation of#

IViewer.off

Overrides#

EventEmitter.off

Defined in#

viewer/Viewer.ts:795

▸ off(type, handler): void

Parameters#

Name	Type
`type`	`"navigable"`
`handler`	(`event`: `ViewerNavigableEvent`) => `void`

Returns#

void

Implementation of#

IViewer.off

Overrides#

EventEmitter.off

Defined in#

viewer/Viewer.ts:799

▸ off(type, handler): void

Parameters#

Name	Type
`type`	`"image"`
`handler`	(`event`: `ViewerImageEvent`) => `void`

Returns#

void

Implementation of#

IViewer.off

Overrides#

EventEmitter.off

Defined in#

viewer/Viewer.ts:803

▸ off(type, handler): void

Parameters#

Name	Type
`type`	`"sequenceedges"` \| `"spatialedges"`
`handler`	(`event`: `ViewerNavigationEdgeEvent`) => `void`

Returns#

void

Implementation of#

IViewer.off

Overrides#

EventEmitter.off

Defined in#

viewer/Viewer.ts:807

▸ off(type, handler): void

Parameters#

Name	Type
`type`	`"reference"`
`handler`	(`event`: `ViewerReferenceEvent`) => `void`

Returns#

void

Implementation of#

IViewer.off

Overrides#

EventEmitter.off

Defined in#

viewer/Viewer.ts:811

▸ off(type, handler): void

Parameters#

Name	Type
`type`	`"fov"` \| `"moveend"` \| `"movestart"` \| `"position"` \| `"pov"` \| `"remove"`
`handler`	(`event`: `ViewerStateEvent`) => `void`

Returns#

void

Implementation of#

IViewer.off

Overrides#

EventEmitter.off

Defined in#

viewer/Viewer.ts:815

▸ off(type, handler): void

Parameters#

Name	Type
`type`	`"click"` \| `"contextmenu"` \| `"dblclick"` \| `"mousedown"` \| `"mousemove"` \| `"mouseout"` \| `"mouseover"` \| `"mouseup"`
`handler`	(`event`: `ViewerMouseEvent`) => `void`

Returns#

void

Implementation of#

IViewer.off

Overrides#

EventEmitter.off

Defined in#

viewer/Viewer.ts:819

project#

▸ project(lngLat): Promise<number[]>

Project geodetic coordinates to canvas pixel coordinates.

description The geodetic coordinates may not always correspond to pixel coordinates, e.g. if the geodetic coordinates have a position behind the viewer camera. In the case of no correspondence the returned value will be null.

If the distance from the viewer camera position to the provided longitude-latitude is more than 1000 meters null will be returned.

The projection is performed from the ground plane, i.e. the altitude with respect to the ground plane for the geodetic point is zero.

Note that whenever the camera moves, the result of the method will be different.

example

viewer.project({ lat: 0, lng: 0 })    .then(pixelPoint => {         if (!pixelPoint) {             console.log("no correspondence");         }
         console.log(pixelPoint);    });

Parameters#

Name	Type	Description
`lngLat`	`LngLat`	Geographical coordinates to project.

Returns#

Promise<number[]>

Promise to the pixel coordinates corresponding to the lngLat.

Implementation of#

IViewer.project

Defined in#

viewer/Viewer.ts:1292

projectFromBasic#

▸ projectFromBasic(basicPoint): Promise<number[]>

Project basic image coordinates for the current image to canvas pixel coordinates.

description The basic image coordinates may not always correspond to a pixel point that lies in the visible area of the viewer container. In the case of no correspondence the returned value can be null.

example

viewer.projectFromBasic([0.3, 0.7])    .then(pixelPoint => { console.log(pixelPoint); });

Parameters#

Name	Type	Description
`basicPoint`	`number`[]	Basic images coordinates to project.

Returns#

Promise<number[]>

Promise to the pixel coordinates corresponding to the basic image point.

Implementation of#

IViewer.projectFromBasic

Defined in#

viewer/Viewer.ts:1325

remove#

▸ remove(): void

Clean up and release all internal resources associated with this viewer.

description This includes DOM elements, event bindings, and WebGL resources.

Use this method when you are done using the viewer and wish to ensure that it no longer consumes browser resources. Afterwards, you must not call any other methods on the viewer.

fires remove

example

viewer.remove();

Returns#

void

Implementation of#

IViewer.remove

Defined in#

viewer/Viewer.ts:1357

removeCustomRenderer#

▸ removeCustomRenderer(rendererId): void

Remove a custom renderer from the viewer's rendering pipeline.

Parameters#

Name	Type
`rendererId`	`string`

Returns#

void

Implementation of#

IViewer.removeCustomRenderer

Defined in#

viewer/Viewer.ts:1378

resize#

▸ resize(): void

Detect the viewer's new width and height and resize it manually.

description The components will also detect the viewer's new size and resize their rendered elements if needed.

When the ViewerOptions.trackResize option is set to true, the viewer will automatically resize when the browser window is resized. If any other custom behavior is preferred, the option should be set to false and the Viewer.resize method should be called on demand.

example

viewer.resize();

Returns#

void

Implementation of#

IViewer.resize

Defined in#

viewer/Viewer.ts:1401

setAccessToken#

▸ setAccessToken(accessToken?): Promise<void>

Set an access token for authenticated API requests of protected resources.

The token may be a user access token or a client access token.

description When the supplied user token is null or undefined, any previously set user bearer token will be cleared and the viewer will make unauthenticated requests.

Calling setAccessToken aborts all outstanding move requests. The promises of those move requests will be rejected with a CancelMapillaryError the rejections need to be caught.

Calling setAccessToken also resets the complete viewer cache so it should not be called repeatedly.

throws When viewer is not navigable.

example

viewer.setAccessToken("<my access token>")    .then(() => { console.log("user token set"); });

Parameters#

Name	Type
`accessToken?`	`string`

Returns#

Promise<void>

Promise that resolves after token is set.

Implementation of#

IViewer.setAccessToken

Defined in#

viewer/Viewer.ts:1610

setCameraControls#

▸ setCameraControls(controls): void

Set the viewer's camera control mode.

description The camera control mode determines how the camera is controlled when the viewer receives pointer and keyboard input.

Changing the camera control mode is not possible when the slider component is active and attempts to do so will be ignored.

example

viewer.setCameraControls(CameraControls.Street);

Parameters#

Name	Type	Description
`controls`	`CameraControls`	Camera control mode.

Returns#

void

Implementation of#

IViewer.setCameraControls

Defined in#

viewer/Viewer.ts:1423

setCenter#

▸ setCenter(center): void

Set the basic coordinates of the current image to be in the center of the viewport.

description Basic coordinates are 2D coordinates on the [0, 1] interval and has the origin point, (0, 0), at the top left corner and the maximum value, (1, 1), at the bottom right corner of the original image.

example

viewer.setCenter([0.5, 0.5]);

Parameters#

Name	Type
`center`	`number`[]

Returns#

void

Implementation of#

IViewer.setCenter

Defined in#

viewer/Viewer.ts:1454

setFieldOfView#

▸ setFieldOfView(fov): void

Set the viewer's current vertical field of view.

description Sets the vertical field of view rendered on the viewer canvas measured in degrees. The value will be clamped to be able to set a valid zoom level based on the projection model of the current image and the viewer's current render mode.

example

viewer.setFieldOfView(45);

Parameters#

Name	Type	Description
`fov`	`number`	Vertical field of view in degrees.

Returns#

void

Implementation of#

IViewer.setFieldOfView

Defined in#

viewer/Viewer.ts:1474

setFilter#

▸ setFilter(filter?): Promise<void>

Set the filter selecting images to use when calculating the spatial edges.

description The following filter types are supported:

Comparison

["==", key, value] equality: image[key] = value

["!=", key, value] inequality: image[key] ≠ value

["<", key, value] less than: image[key] < value

["<=", key, value] less than or equal: image[key] ≤ value

[">", key, value] greater than: image[key] > value

[">=", key, value] greater than or equal: image[key] ≥ value

Set membership

["in", key, v0, ..., vn] set inclusion: image[key] ∈ {v0, ..., vn}

["!in", key, v0, ..., vn] set exclusion: image[key] ∉ {v0, ..., vn}

Combining

["all", f0, ..., fn] logical AND: f0 ∧ ... ∧ fn

A key must be a string that identifies a property name of a simple Image property, i.e. a key of the FilterKey type. A value must be a string, number, or boolean. Strictly-typed comparisons are used. The values f0, ..., fn of the combining filter must be filter expressions.

Clear the filter by setting it to null or empty array.

Commonly used filter properties (see the Image class documentation for a full list of properties that can be used in a filter) are shown the the example code.

example

// Examplesviewer.setFilter(["==", "cameraType", "spherical"]);viewer.setFilter([">=", "capturedAt", <my-time-stamp>]);viewer.setFilter(["in", "sequenceId", "<sequence-id-1>", "<sequence-id-2>"]);

Parameters#

Name	Type
`filter?`	`FilterExpression`

Returns#

Promise<void>

Promise that resolves after filter is applied.

Implementation of#

IViewer.setFilter

Defined in#

viewer/Viewer.ts:1538

setRenderMode#

▸ setRenderMode(renderMode): void

Set the viewer's render mode.

example

viewer.setRenderMode(RenderMode.Letterbox);

Parameters#

Name	Type	Description
`renderMode`	`RenderMode`	Render mode.

Returns#

void

Implementation of#

IViewer.setRenderMode

Defined in#

viewer/Viewer.ts:1562

setTransitionMode#

▸ setTransitionMode(transitionMode): void

Set the viewer's transition mode.

example

viewer.setTransitionMode(TransitionMode.Instantaneous);

Parameters#

Name	Type	Description
`transitionMode`	`TransitionMode`	Transition mode.

Returns#

void

Implementation of#

IViewer.setTransitionMode

Defined in#

viewer/Viewer.ts:1576

setZoom#

▸ setZoom(zoom): void

Set the image's current zoom level.

description Possible zoom level values are on the [0, 3] interval. Zero means zooming out to fit the image to the view whereas three shows the highest level of detail.

example

viewer.setZoom(2);

Parameters#

Name	Type
`zoom`	`number`

Returns#

void

Implementation of#

IViewer.setZoom

Defined in#

viewer/Viewer.ts:1642

triggerRerender#

▸ triggerRerender(): void

Trigger the rendering of a single frame.

description Use this method with custom renderers to force the viewer to rerender when the custom content changes. Calling this multiple times before the next frame is rendered will still result in only a single frame being rendered.

Returns#

void

Implementation of#

IViewer.triggerRerender

Defined in#

viewer/Viewer.ts:1655

unproject#

▸ unproject(pixelPoint): Promise<LngLat>

Unproject canvas pixel coordinates to geodetic coordinates.

description The pixel point may not always correspond to geodetic coordinates. In the case of no correspondence the returned value will be null.

The unprojection to a lngLat will be performed towards the ground plane, i.e. the altitude with respect to the ground plane for the returned lngLat is zero.

example

viewer.unproject([100, 100])    .then(lngLat => { console.log(lngLat); });

Parameters#

Name	Type	Description
`pixelPoint`	`number`[]	Pixel coordinates to unproject.

Returns#

Promise<LngLat>

Promise to the lngLat corresponding to the pixel point.

Implementation of#

IViewer.unproject

Defined in#

viewer/Viewer.ts:1679

unprojectToBasic#

▸ unprojectToBasic(pixelPoint): Promise<number[]>

Unproject canvas pixel coordinates to basic image coordinates for the current image.

description The pixel point may not always correspond to basic image coordinates. In the case of no correspondence the returned value will be null.

example

viewer.unprojectToBasic([100, 100])    .then(basicPoint => { console.log(basicPoint); });

Parameters#

Name	Type	Description
`pixelPoint`	`number`[]	Pixel coordinates to unproject.

Returns#

Promise<number[]>

Promise to the basic coordinates corresponding to the pixel point.

Implementation of#

IViewer.unprojectToBasic

Defined in#

viewer/Viewer.ts:1711