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.
- The SDK is available on NPM at https://www.npmjs.com/package/@mappedin/mappedin-js
- API reference on our Developer Portal at https://developer.mappedin.com/docs/web/latest
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
// BeforemapView.labelAllLocations();
// AftermapView.FloatingLabels.labelAllLocations();
Please see 'Floating Labels' for all additional methods.
FlatLabels
// BeforemapView.labelAllLocations({flatLabel: true});
// AftermapView.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
// BeforecreateTooltip(node: MappedinNode | MappedinCoordinate, options: TCreateTextTooltipOptions | TCreateCustomInnerHTMLTooltipOptions | TCreateCustomTooltipOptions)
// AftercreateTooltip(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 parameterstargets
andoptions
rather than just an options object
// Beforemapview.Camera.focusOn(options: TFocusOnOptions);
// Aftermapview.Camera.focusOn( targets: TCameraTargets, options?: TFocusOnCameraOptions & TCameraAnimationOptions);
mapView.Camera.translate
now has explicitdirection
anddistance
parameters
// Beforemapview.Camera.translate(options: TMoveCameraOptions);
// Aftermapview.Camera.translate( direction: E_CAMERA_DIRECTION, distance: number, options?: TCameraAnimationOptions);
points
removed fromTFocusOnTargets
forfocusOn()
andanimateCamera()
. Use aMappedinCoordinate
insteadmapview.Camera.set
'spositionOptions
argument is now required instead of being optionalTAnimatePositionOptions
has been renamed toTCameraTransform
TFocusOnTargets
has been renamed toTCameraTargets
Removed
Mapview
mapView.updateClosedStateForPolygon
andmapView.openAllPolygons
has been removed from the SDKmapView.createThreeJSMarker
,mapView.removeThreeJSMarker
, andmapView.removeAllThreeJSMarkers
have been removed from the SDKMapView.labelPolygon
,MapView.removeLabel
,MapView.removeAllLabels
has been removed
Events
GET_NEAREST_NODE
has been removed. UseGET_NEAREST_NODE_BY_SCREEN_COORDINATES
instead
Camera
controller.Camera.setTilt
,controller.Camera.setRotation
, andcontroller.Camera.setZoom
have all been removed. Usecontroller.Camera.set
insteadFOCUS_ON_LEGACY
has been removed. Instead, useFOCUS_ON
TFocusOnOptions
has been removedTMoveCameraOptions
has been removed
Journeys
controller.drawJourney
andcontroller.createJourney
has been removed. UseJourney.draw
insteadcontroller.clearJourney
has been removed. UseJourney.clear
instead
BlueDot
controller.BlueDotState
has been removed. UseonBlueDotStateChanged
insteadcontroller.createFont
has been removed. No alternative option availableENABLE_BEARING
event has been removedGET_BLUE_DOT_IS_FOLLOWING
has been removedSET_BLUE_DOT_IS_FOLLOWING
has been removedgeolocationSource
has been removed from the typeTEnableBlueDotOptions
Search
Mappedin.Search
has been removed. UseOfflineSeach
instead