Skip to main content
Version: 6.0

Migration Guide

Mappedin JS version 6.0 is a major release that includes a number of changes to the SDK. Mappedin JS v6 uses a GeoJSON-based rendering engine, rebuilt from the ground up. It works in unison with MapLibre which enables outdoor base maps as well as data visualization features. By using GeoJSON as the core data format, v6 can integrated with existing external data sources. This guide explains the steps needed to migrate from version 5.

Initialization Changes​

The options for getting a map have changed. getVenue() has been replaced by getMapData().

v5 Initialization

const options: TGetVenueOptions = {
	venue: 'mappedin-demo-mall',
	clientId: '5eab30aa91b055001a68e996',
	clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
};

async function init() {
	const venue = await getVenue(options);
	const mapView = await showVenue(element, venue);
}

v6 Initialization

const options = {
	key: '5eab30aa91b055001a68e996',
	secret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
	mapId: 'mappedin-demo-mall',
};

async function init() {
	const mapData = await getMapData(options);
	const mapView = await show3dMap(element, mapData);
}

Component Access​

Mappedin.<collection> has been replaced by MapData.getByType(<collection>)

For example:

In v5 access nodes using Mappedin.nodes, which contains an array of Node objects.

In v6 access nodes using MapData.getByType('node'), which returns an array of Node objects.

Mappedin.getCollectionItemById is replaced by mapData.getById(<collection>, id)

The following classes have been redesigned. Refer to the chart below for a mapping of similar classes.

v5 Componentv6 Component
MappedinPolygonSpace
MappedinMapGroupFloorStack
MappedinMapFloor
MappedinCoordinateCoordinate
MappedinNodeNode

MapView.state no longer exists. These states are now available within their respective classes BlueDot.state and StackedMaps.state.

UI Components​

FloatingLabels have been replaced with Labels.

FloatingLabels.labelAllLocations() has been replaces with Labels.all().

Tooltips have not been carried over from v5 and Markers should be used instead.

Updating UI Components​

setPolygonColor, clearPolygonColor and other methods of changing the state of UI objects on the map is now performed using MapView.updateState(), which also supports initial for returning properties to their original state.

Camera.animate() has been renamed to Camera.animateTo().

Markers.animate() has been renamed to Markers.animateTo().

Interactivity​

MapView.addInteractivePolygonsForAllLocations() has been replaced by updating the state of each space to be interactive as shown below.

// Set each space to be interactive.
mapData.getByType('space').forEach((space) => {
	mapView.updateState(space, {
		interactive: true,
	});
});

Event names passed from MapView.on() have been changed:

v5 Eventv 6 Event
E_SDK_EVENT.CLICKclick
E_SDK_EVENT.MAP_CHANGED , E_SDK_EVENT.MAP_CHANGED_WITH_REASONfloor-change
E_SDK_EVENT.OUTDOOR_VIEW_LOADEDoutdoor-view-loaded

Stacked maps​

StackedMaps APIs have been simplified to make them easier to use.

v5 Methodv6 Method
StackedMaps.showOverview()StackedMaps.expand()
StackedMaps.disable() StackedMaps.collapse()
StackedMaps.scrollToMap()MapView.setFloor()
StackedMaps.zoomIntoMap()MapView.setFloor() followed by StackedMaps.collapse() with a duration of 0

Map Metadata​

Classes containing enterprise map metadata have been renamed.

v5 Componentv6 Component
MappedinCategoryEnterpriseCategory
MappedinLocationEnterpriseLocation
MappedinVenueEnterpriseVenue

Wayfinding & Directions​

MappedinNavigatable.directionsTo is replaced by MapData.getDirections.

MapData.getDirections() only supports getting directions between two locations. For multi destination directions, use MapData.getDirectionsMultiDestination().

Journey is now Navigation.

v5 Multi Destination Directions

const directions = getDirections(start, [dest1, dest2]);

v6 Multi Destination Directions

const directions = getDirectionsMultiDestination(start, [dest1, dest2]);

Camera​

v5 Camera.tilt in radians is replaced by v6 Camera.pitch in degrees. Camera.minPitch and Camera.maxPitch are now available to set the minimum and maximum pitch values.

v5 Camera.rotation in radians is replace in v6 by Camera.bearing in degrees Clockwise rotation is now positive.

v5 Camera.zoom, Camera.minZoom and Camera.maxZoom used meters from ground level. In v6 these now use mercator zoom level units.

The following camera methods and accessors have been renamed.

v5 Methodv6 Method
Camera.position()Camera.center()
Camera.setSafeAreaInsets()Camera.setScreenOffsets()
Camera.getSafeAreaInsets()Camera.screenOffsets()
MapView.Camera.on(...)MapView.on(...)
E_CAMERA_EVENT.USER_INTERACTION_STARTuser-interaction-start
E_CAMERA_EVENT.USER_INTERACTION_ENDuser-interaction-end
E_CAMERA_EVENT.CHANGEDcamera-change

OfflineSearch has been moved to MapData.search(). The results returned in SearchResult are more structured:

const results = mapData.Search.query('levis');
// results
{
	places: SearchResultPlaces[];
	enterpriseLocations?: SearchResultEnterpriseLocations[];
	enterpriseCategories?: SearchResultEnterpriseCategory[];
}

Multi Language​

The methods to work with maps in multiple languages have been changed.

// Specify a non default language when getting map data.
TODO: COMING SOON
// Get supported languages.
const supportedLanguages = mapData.getByType('enterprise-venue')[0].languages;
// Change langauges
await mapData.changeLanguage('es')

Blue Dot​

Blue Dot events have moved from BlueDot.on() to MapView.on().

v5

const blueDotChangeHandler = ({ map, nearestNode, position, bearing }) => {
	// Do something with the new values
};
mapView.BlueDot.on(E_BLUEDOT_EVENT.POSITION_UPDATE, blueDotChangeHandler);

v6

// Position update
mapView.on('blue-dot-position-update', (e) => {
	console.log('blue-dot-position-update', e.coordinate, e.floor, e.accuracy, e.heading);
});

// State change
mapView.on('blue-dot-state-change', (e) => {
	console.warn('blue-dot-state-change', e.state, e.action);
});

// Error
mapView.on('blue-dot-error', (e) => {
	console.error('blue-dot-error', e);
});

BlueDot.updateBearing() functionality has been moved to the BlueDot.update() method and is provided using the heading property. In v6, to remove the heading unset it in the update method as shown below, otherwise it will use the heading provided from the browser.

BlueDot.update({ heading: undefined });

PositionUpdater has been removed. The same functionality can be achieved by calling BlueDot.enable({ watchBrowserPosition: false }) and then calling the BlueDot.update() method.

Blue Dot rotation mode was set when enabling Blue Dot in v5 using TEnableBlueDotOptions.useRotationMode. In v6, this is set by calling BlueDot.follow and setting the TFollowMode.

The v5 behavior of TEnableBlueDotOptions.allowImplicitFloorLevel has changed. In v5 it assumed the user was always on the default map if no level update was provided by the indoor positioning provider. In v6, if the floor cannot be determined Blue Dot will render on every floor by default. If the position update has a floorLevel, it will only render on that floor. To force it to render on all floors set floorOrFloorId to undefined:

BlueDot.update({ floorOrFloorId: undefined });

Blue Dot smoothing has not been carried over from v5..