Skip to main content
Version: 5.0

Migration Guide

On December 5th, 2022 we released the Mappedin Web SDK v5. This release focuses on improving the developer experience by making methods more accessible, simplifying complex methods, and reducing code required. This short migration guide explains the steps needed to migrate from version 4.

Changes​

MapView​

One of the largest changes with this release is how we apply labels to the maps. In v5 of the SDK Flat Labels and Floating Labels have been moved into their own object, with their own methods.

Floating Labels​

// Before
mapView.labelAllLocations();

// After
mapView.FloatingLabels.labelAllLocations();

Please see 'Floating Labels' for all additional methods.

FlatLabels​

// Before
mapView.labelAllLocations({ flatLabel: true });

// After
mapView.FlatLabels.labelAllLocations();

Please see 'Flat Labels' for all additional methods.

mapView.setPolygonColor

  • Now only accepts a MappedinPolygon as an argument. Polygon ID is not longer available as an option
  • textColor is no longer an accepted parameter
setPolygonColor( polygon: MappedinPolygon, color: string )

mapView.enableImageFlippingPolygon

  • Now only accepts a MappedinPolygon as an argument
  • Options object, with polygon ID and rotation, no longer accepted as an argument
enableImageFlippingForPolygon( polygon: MappedinPolygon )

mapView.getPolygonsAtCoordinate now accepts an options object instead of an explicit parameter for includeNonInteractive.

mapView.getPolygonsAtCoordinate(MappedinCoordinate, {
	includeNonInteractive: boolean,
});

mapView.createTooltip has been seperated into two methods with breaking changes. createTooltip now has a parameter that accepts a html snippet, rather than defining it within an options object. It is to be used for static content with our default wrapper styling.

createCustomTooltip is to be used for custom content with no wrapper, as well as accepts a custom selector

// Before
createTooltip(node: MappedinNode | MappedinCoordinate, options: TCreateTextTooltipOptions | TCreateCustomInnerHTMLTooltipOptions | TCreateCustomTooltipOptions)

// After
createTooltip(nodeOrCoordinate: MappedinNode | MappedinCoordinate, contentHtml: string, options?: TCreateTooltipOptions);

createCustomTooltip(nodeOrCoordinate: MappedinNode | MappedinCoordinate, contentHtml: string, selector: string, options?: TCreateTooltipCommonOptions);

mapView.setState is now asynchronous

Events​

E_SDK_EVENT.POLYGON_CLICKED and E_SDK_EVENT.NOTHING_CLICKED have been deprecated in favor of a single event E_SDK_EVENT.CLICK.

mapView.on(
	E_SDK_EVENT.CLICK,
	({ position, polygons, nearBlueDot }: TMapClickEvent) => {
		console.log(
        `POSITION: ${position}, POLYGONS: ${polygons}, BLUEDOT: ${nearBlueDot});
	}
)

E_CAMERA_EVENT.TILT_CHANGED,E_CAMERA_EVENT.ROTATION_CHANGED,E_CAMERA_EVENT.ZOOM_CHANGED, E_CAMERA_EVENT.POSITION_CHANGED have been deprecated in favor of a single event E_CAMERA_EVENT.CHANGED.

mapView.Camera.on(E_CAMERA_EVENT.CHANGED, ({ tilt, rotation, zoom, position }) => {
	console.log(`TILT: ${tilt}, ROTATION: ${rotation}, ZOOM: ${zoom}, POSITION: ${position}`);
});

Camera Controls​

  • mapview.Camera.focusOn now takes two parameters targets and options rather than just an options object
// Before
mapview.Camera.focusOn(options: TFocusOnOptions);

// After
mapview.Camera.focusOn(
  targets: TCameraTargets,
  options?: TFocusOnCameraOptions & TCameraAnimationOptions);
  • mapView.Camera.translate now has explicit direction and distance parameters
// Before
mapview.Camera.translate(options: TMoveCameraOptions);

// After
mapview.Camera.translate(
  direction: E_CAMERA_DIRECTION,
  distance: number,
  options?: TCameraAnimationOptions);
  • points removed from TFocusOnTargets for focusOn() and animateCamera(). Use a MappedinCoordinate instead
  • mapview.Camera.set's positionOptions argument is now required instead of being optional
  • TAnimatePositionOptions has been renamed to TCameraTransform
  • TFocusOnTargets has been renamed to TCameraTargets

Removed​

Mapview​

  • mapView.updateClosedStateForPolygon and mapView.openAllPolygons has been removed from the SDK
  • mapView.createThreeJSMarker, mapView.removeThreeJSMarker, and mapView.removeAllThreeJSMarkers have been removed from the SDK
  • MapView.labelPolygon, MapView.removeLabel, MapView.removeAllLabels has been removed

Events​

  • GET_NEAREST_NODE has been removed. Use GET_NEAREST_NODE_BY_SCREEN_COORDINATES instead

Camera​

  • controller.Camera.setTilt, controller.Camera.setRotation, and controller.Camera.setZoom have all been removed. Use controller.Camera.set instead
  • FOCUS_ON_LEGACY has been removed. Instead, use FOCUS_ON
  • TFocusOnOptions has been removed
  • TMoveCameraOptions has been removed

Journeys​

  • controller.drawJourney and controller.createJourney has been removed. Use Journey.draw instead
  • controller.clearJourney has been removed. Use Journey.clear instead

BlueDot​

  • controller.BlueDotState has been removed. Use onBlueDotStateChanged instead
  • controller.createFont has been removed. No alternative option available
  • ENABLE_BEARING event has been removed
  • GET_BLUE_DOT_IS_FOLLOWING has been removed
  • SET_BLUE_DOT_IS_FOLLOWING has been removed
  • geolocationSource has been removed from the type TEnableBlueDotOptions
  • Mappedin.Search has been removed. Use OfflineSeach instead