mapillary-js

WebGL JavaScript library for displaying street level photos from Mapillary

**ATTENTION! This is a beta release

Using mapillary-js

Include via HTML tags:

<link rel="stylesheet" href="https://npmcdn.com/mapillary-js@0.0.5/dist/mapillary-js.min.css">
<script src="https://npmcdn.com/mapillary-js@0.0.5/dist/mapillary-js.min.js"></script>

Make sure to check out Examples section below or API Documentation for more information.

Alternatively, you can npm install mapillary-js to use it with module loader/bundler of your choice.

Examples

Simple mapillary-js embedding
Storytelling with mapillary-js
mapillary-js + Leaflet - Panorama - Perspective photo
mapillary-js + Leaflet + Tangram - Panorama - Perspective photo
mapillary-js + mapbox-gl-js - Panorama - Perspective photo
mapillary-js + Esri Leaflet - Panorama - Perspective photo
mapillary-js + Google Maps - Panorama

Documentation

Changelog

Every release is described on the GitHub Releases page.

License

MIT License

Index

Enumerations

Classes

Viewer

Interfaces

IViewerOptions

Enumerations

EdgeDirection

EdgeDirection:

Enumeration for edge directions

enum: {number}
readonly
description: Directions for edges in node graph describing sequence, spatial and node type relations between nodes.

Next node in the sequence

Pano

Pano:

Panorama in general direction

Previous node in the sequence

RotateLeft

RotateLeft:

Rotate with small counter clockwise angle change

RotateRight

RotateRight:

Rotate with small clockwise angle change

StepBackward

StepBackward:

Step backward keeping viewing direction

StepForward

StepForward:

Step forward keeping viewing direction

StepLeft

StepLeft:

Step to the left keeping viewing direction

StepRight

StepRight:

Step to the right keeping viewing direction

TurnLeft

TurnLeft:

Turn 90 degrees counter clockwise

TurnRight

TurnRight:

Turn 90 degrees clockwise

TurnU

TurnU:

Turn 180 degrees

ImageSize

ImageSize:

Enumeration for image sizes

enum: {number}
readonly
description: Image sizes in pixels for the long side of the image.

Size1024

Size1024:

1024 pixels image size

Size2048

Size2048:

2048 pixels image size

Size320

Size320:

320 pixels image size

Size640

Size640:

640 pixels image size

RenderMode

RenderMode:

Enumeration for render mode

enum: {number}
readonly
description: Modes for specifying how rendering is done in the viewer. All modes preserves the original aspect ratio of the images.

Fill

Fill:

Fills the viewer by cropping content.

description: Cropping is done either in horizontal or vertical direction depending on the aspect ratio relation between the image and the viewer.

Letterbox

Letterbox:

Displays all content within the viewer.

description: Black bars shown on both sides of the content. Bars are shown either below and above or to the left and right of the content depending on the aspect ratio relation between the image and the viewer.

Classes

Viewer

Viewer:

constructor

new Viewer(id: string, clientId: string, key?: string, options?: IViewerOptions): Viewer

Overwrites EventEmitter.__constructor
- Defined in viewer/Viewer.ts:41
Create a new viewer instance

class

Viewer

Parameters
- id: string
  
  required id of an DOM element which will be transformed into the viewer
- clientId: string
  
  required Mapillary API ClientID, can be obtained from http://www.mapillary.com/map/settings/integrations
- Optional key: string
  
  optional photoId to start from, can be any Mapillary photo, if null no image is loaded
- Optional options: IViewerOptions
  
  optional configuration object specifing Viewer's initial setup
Returns Viewer

on

on(eventType: string, fn: any): void

Inherited from EventEmitter.on
- Defined in utils/EventEmitter.ts:15
Subscribe to an event by its name

Parameters
- eventType: string
- fn: any
Returns void

loadingchanged

loadingchanged: string

Fired when the viewer is loading more data

nodechanged

nodechanged: string

Fired every time the viewer goes to a new node (photo)

_componentController

_componentController: ComponentController

Private ComponentController object which manages component states

_container

_container: Container

Private Container object which maintains the DOM Element, renderers and relevant services

_eventLauncher

_eventLauncher: EventLauncher

Private EventLauncher object which fires events on behalf of the viewer

_navigator

_navigator: Navigator

Private Navigator object which controls navigation throught the vast seas of Mapillary

activateComponent

activateComponent(name: string): void

- Defined in viewer/Viewer.ts:145
Activate a Component

Parameters
- name: string
  
  Name of the component which will become active
Returns void

activateCover

activateCover(): void

- Defined in viewer/Viewer.ts:168
Activate the Cover (deactivates all other components)

Returns void

deactivateComponent

deactivateComponent(name: string): void

- Defined in viewer/Viewer.ts:153
Deactivate a Component

Parameters
- name: string
  
  Name of component which become inactive
Returns void

deactivateCover

deactivateCover(): void

- Defined in viewer/Viewer.ts:175
Deactivate the Cover (activates all components marked as active)

Returns void

fire

fire(eventType: string, data: any): void

Inherited from EventEmitter.fire
- Defined in utils/EventEmitter.ts:42
Parameters
- eventType: string
- data: any
Returns void

getComponent

getComponent(name: string): Component

- Defined in viewer/Viewer.ts:161
Get a Component

Parameters
- name: string
  
  Name of component
Returns Component

moveCloseTo

moveCloseTo(lat: number, lon: number): when.Promise

- Defined in viewer/Viewer.ts:111
Move close to given latitude and longitude

Parameters
- lat: number
  
  Latitude
- lon: number
  
  Longitude
Returns when.Promise

moveDir

moveDir(dir: EdgeDirection): when.Promise

- Defined in viewer/Viewer.ts:93
Move in a given direction

This method has to be called through EdgeDirection enumeration as in the example.

example

viewer.moveToDir(Mapillary.EdgeDirection.NEXT);

Parameters
- dir: EdgeDirection
  
  Direction towards which to move
Returns when.Promise

moveToKey

moveToKey(key: string): when.Promise

- Defined in viewer/Viewer.ts:71
Navigate to a given photo key

throws

{ParamaterMapillaryError} If no key is provided

Parameters
- key: string
  
  a valid Mapillary photo key
Returns when.Promise

off

off(eventType: string, fn: any): void

Inherited from EventEmitter.off
- Defined in utils/EventEmitter.ts:21
Parameters
- eventType: string
- fn: any
Returns void

resize

resize(): void

- Defined in viewer/Viewer.ts:127
Detect the viewer's new width and height and resize it.

Returns void

setRenderMode

setRenderMode(renderMode: RenderMode): void

- Defined in viewer/Viewer.ts:137
Sets the viewer's render mode.

example

viewer.setRenderMode(Mapillary.RenderMode.Letterbox);

Parameters
- renderMode: RenderMode
  
  Render mode.
Returns void

Interfaces

IViewerOptions

IViewerOptions:

attribution

attribution: boolean

Show attribution

default: true

background

background: boolean

Display a background if no key is set.

default: false

baseImageSize

baseImageSize: ImageSize

Default size of the thumbnail used in the viewer

default: {ImageSize.Size640}

cache

cache: boolean

Cache images ahead.

default: true

cover

cover: boolean

Use a cover and avoid loading initial data from Mapillary.

default: true

debug

debug: boolean

Show debug interface.

default: false

direction

direction: boolean

Show direction arrows for navigation.

default: true

image

image: boolean

Show static images without transitions.

default: false

imageplane

imageplane: boolean

Show image planes in 3D using WebGL.

default: true

keyboard

keyboard: boolean

Enable use of keyboard commands.

default: true

loading

loading: boolean

Show indication of loading.

default: true

marker

marker: boolean

Enable an interface for showing markers in the viewer

default: false

maxImageSize

maxImageSize: ImageSize

The max size of an image shown in the viewer will be used when user pauses.

default: {ImageSize.Size2048}

mouse

mouse: boolean

Enable mouse interface (needed for panorama navigation)

default: true

navigation

navigation: boolean

Show static navigation arrows in the corners.

default: false

player

player: boolean

Add play ability to the viewer.

default: false

route

route: boolean

Create a route with a story inside mapillary js

default: false

sequence

sequence: boolean

Show sequence navigation arrows.

default: true

slider

slider: boolean

Show a slider for transitioning between image planes.

default: false

Generated using TypeDoc

mapillary-js

Using mapillary-js

Examples

Documentation

Changelog

License

Index

Enumerations

Classes

Interfaces

Enumerations

EdgeDirection

Next

Pano

Prev

RotateLeft

RotateRight

StepBackward

StepForward

StepLeft

StepRight

TurnLeft

TurnRight

TurnU

ImageSize

Size1024

Size2048

Size320

Size640

RenderMode

Fill

Letterbox

Classes

Viewer

constructor

Parameters

id: string

clientId: string

Optional key: string

Optional options: IViewerOptions

Returns Viewer

on

Parameters

eventType: string

fn: any

Returns void

loadingchanged

nodechanged

_componentController

_container

_eventLauncher

_navigator

activateComponent

Parameters

name: string

Returns void

activateCover

Returns void

deactivateComponent

Parameters

name: string

Returns void

deactivateCover

Returns void

fire

Parameters

eventType: string

data: any

Returns void

getComponent

Parameters

name: string

Returns Component

moveCloseTo

Parameters

lat: number

lon: number

Returns when.Promise

moveDir

Parameters