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

Classes

Viewer

Viewer:

constructor

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

Overwrites EventEmitter.__constructor
- Defined in viewer/Viewer.ts:38
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:119
Activate a Component

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

activateCover

activateCover(): void

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

Returns void

deactivateComponent

deactivateComponent(name: string): void

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

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

deactivateCover

deactivateCover(): void

- Defined in viewer/Viewer.ts:149
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:135
Get a Component

Parameters
- name: string
  
  Name of component
Returns Component

moveCloseTo

moveCloseTo(lat: number, lon: number): void

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

Parameters
- lat: number
  
  Latitude
- lon: number
  
  Longitude
Returns void

moveDir

moveDir(dir: EdgeDirection): void

- Defined in viewer/Viewer.ts:88
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 void

moveToKey

moveToKey(key: string): void

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

throws

{ParamaterMapillaryError} If no key is provided

Parameters
- key: string
  
  a valid Mapillary photo key
Returns void

off

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

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

Interfaces

IViewerOptions

IViewerOptions:

attribution

attribution: boolean

Show attribution

default: true

baseImageSize

baseImageSize: ImageSize

Default size of the thumbnail used in the viewer

default: {ImageSize}

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: true

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

maxImageSize

maxImageSize: ImageSize

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

default: {ImageSize}

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

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

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 void

moveDir

Parameters

dir: EdgeDirection

Returns void

moveToKey