Skip to main content

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#

Implements#

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#

NameTypeDescription
optionsViewerOptionsOptional 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#

NameType
type"bearing"
handler(event: ViewerBearingEvent) => void

Returns#

void

Implementation of#

IViewer.on

Overrides#

EventEmitter.on

Defined in#

viewer/Viewer.ts:844

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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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

example

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

Parameters#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameTypeDescription
nameComponentName | FallbackComponentNameName 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#

NameTypeDescription
rendererICustomRendererThe 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#

NameTypeDescription
controlsICustomCameraControlsThe 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#

NameTypeDescription
nameComponentName | FallbackComponentNameName 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#

NameType
type"bearing"
eventViewerBearingEvent

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:341

fire(type, event): void

Parameters#

NameType
type"dataloading"
eventViewerDataLoadingEvent

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:345

fire(type, event): void

Parameters#

NameType
type"navigable"
eventViewerNavigableEvent

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:349

fire(type, event): void

Parameters#

NameType
type"image"
eventViewerImageEvent

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:353

fire(type, event): void

Parameters#

NameType
type"sequenceedges" | "spatialedges"
eventViewerNavigationEdgeEvent

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:357

fire(type, event): void

Parameters#

NameType
type"reference"
eventViewerReferenceEvent

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:361

fire(type, event): void

Parameters#

NameType
type"fov" | "moveend" | "movestart" | "position" | "pov" | "remove"
eventViewerStateEvent

Returns#

void

Implementation of#

IViewer.fire

Overrides#

EventEmitter.fire

Defined in#

viewer/Viewer.ts:365

fire(type, event): void

Parameters#

NameType
type"click" | "contextmenu" | "dblclick" | "mousedown" | "mousemove" | "mouseout" | "mouseover" | "mouseup"
eventViewerMouseEvent

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#

NameType
TComponentextends Component<ComponentConfiguration, TComponent>

Parameters#

NameTypeDescription
nameComponentName | FallbackComponentNameName 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#

NameTypeDescription
controlsICustomCameraControlsCamera 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#

NameType
rendererIdstring

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#

NameTypeDescription
directionNavigationDirectionDirection 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#

NameTypeDescription
imageIdstringId 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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameType
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#

NameTypeDescription
lngLatLngLatGeographical 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#

NameTypeDescription
basicPointnumber[]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#

NameType
rendererIdstring

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#

NameType
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#

NameTypeDescription
controlsCameraControlsCamera 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#

NameType
centernumber[]

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#

NameTypeDescription
fovnumberVertical 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#

NameType
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#

NameTypeDescription
renderModeRenderModeRender 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#

NameTypeDescription
transitionModeTransitionModeTransition 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#

NameType
zoomnumber

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#

NameTypeDescription
pixelPointnumber[]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#

NameTypeDescription
pixelPointnumber[]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