Skip to main content

v4.x

MapillaryJS v4.x Migration Guide#

This page describes how to migrate from MapillaryJS v3.x to MapillaryJS v4.x.

General#

  • Github differential - v3.1.0...v4.0.0
  • Properties named key in v3.x have been renamed to id throughout the library in v4.x

Distribution#

Renamed Files#

v3.xv4.x
mapillary.min.jsmapillary.js
mapillary.jsmapillary.unminified.js
mapillary.min.cssmapillary.css

Module#

All namespacing has been removed and the global UMD name has been changed.

Global UMD Name#

v3.xv4.x
Mapillarymapillary

Import#

v3.x#

import * as Mapillary from 'mapillary-js';
const viewer = new Mapillary.Viewer({...});const marker = new Mapillary.MarkerComponent.SimpleMarker({...});const popup = new Mapillary.PopupComponent.Popup({...});

v4.x#

import { Popup, SimpleMarker, Viewer } from 'mapillary-js';
const viewer = new Viewer({...});const marker = new SimpleMarker({...});const popup = new Popup({...});

Destruct#

v3.x#

const viewer = new Mapillary.Viewer({...});const marker = new Mapillary.MarkerComponent.SimpleMarker({...});const popup = new Mapillary.PopupComponent.Popup({...});

v4.x#

const { Popup, SimpleMarker, Viewer } = mapillary;
const viewer = new Viewer({...});const marker = new SimpleMarker({...});const popup = new Popup({...});

Styles#

All style classes have been renamed.

Viewer#

Methods#

Renamed#

v3.xv4.xDescription
setUserTokensetAccessTokenNow accepts a client access token or a user access token

Options#

Added#

  • trackResize - Breaking change: the viewer now tracks browser window resizing by default. Set this option to false if you want to handle viewer resizing with custom logic.
  • dataProvider - Override the default data provider.

Removed#

v3.xv4.x
baseImageSizeNo replacement
basePanoramaSizeNo replacement
baseImageSizeNo replacement
maxImageSizeNo replacement
apiClientUse dataProvider and/or accessToken instead

Renamed#

v3.xv4.x
imageKeyimageId
userTokenaccessToken

Component Options#

Removed#

v3.xv4.x
backgroundNo replacement
debugNo replacement
routeNo replacement

Renamed#

v3.xv4.x
imagePlaneimage
mousepointer
spatialDataspatial

Replaced#

v3.xv4.x
imageMoved to fallback options
navigationMoved to fallback options

Events#

Event names are not provided as static properties on the Viewer class.

v3.xv4.x
viewer.on(Mapillary.Viewer.click, ...);viewer.on('click', ...);

Contracts#

All emitted events are now an object with the following properties populated:

  • type - Event type
  • target - Instance that emitted the event

Additional properties are provided per event type.

Renamed Event Types#

v3.xv4.x
bearingchangedbearing
fovchangedfov
loadingdataloading
navigablechangednavigable
nodechangedimage
positionchangedposition
povchangedpov
removedremove
sequenceedgeschangedsequenceedges
spatialedgeschangedspatialedges

Image#

The Node class has been renamed to Image.

Properties#

Removed#

v3.xv4.x
cameraUuidNo replacement
fullPanoUse cameraType instead
gpanoUse cameraType instead
panoUse cameraType instead
mergeVersionNo replacement
projectKeyNo replacement

Renamed#

v3.xv4.x
altcomputedAltitude
cacompassAngle
cameraProjectionTypecameraType
clusterKeyclusterId
computedCAcomputedCompassAngle
computedLatLoncomputedLngLat
keyid
latLonlngLat
mergeCCmergeId
organizationKeyownerId
orientationexifOrientation
originalAltoriginalAltitude
originalCAoriginalCompassAngle
originalLatLonoriginalLngLat
sequenceKeysequenceId
userKeycreatorId
userNamecreatorName

Replaced#

v3.xv4.x
focal, ck1, ck2cameraParameters

Types#

v3.xv4.x
ILatLon: { lat: number, lon: number }LngLat: { lat: number, lng: number }
ILatLonAlt: { alt: number, lat: number, lon: number }LngLatAlt: { alt: number, lat: number, lng: number }
AbortMapillaryErrorCancelMapillaryError

Enums#

Renamed#

v3.xv4.x
EdgeDirectionNavigationDirection

Component#

Components#

Removed#

v3.xv4.x
backgroundNo replacement
debugNo replacement
routeUse the custom render API or custom HTML elements instead

Renamed#

v3.xv4.x
imageplaneimage
spatialdataspatial
imageimagefallback
navigationnavigationfallback

Events#

v3.xv4.x
MarkerComponent.dragendmarkerdragend
MarkerComponent.dragstartmarkerdragstart
MarkerComponent.changedmarkerposition
MarkerComponent.hoveredkeychangedhover
SequenceComponent.hoveredkeychangedhover
SequenceComponent.playingchangedplaying
TagComponenent.geometrycreatedgeometrycreate
TagComponenent.creategeometryendtagcreateend
TagComponenent.creategeometrystarttagcreatestart
TagComponenent.modechangedtagmode
TagComponenent.tagschangedtags
Tag.clickclick
Tag.geometrychangedgeometry
Tag.changedtag

Interaction#

Removed#

v3.xv4.x
MouseComponent#doubleClickZoomNo replacement

API#

The complete API functionality, including ents, contracts, and providers, has been replaced. See the v4 API reference and examples for info about the new functionality.