Mappedin JS v6.0.0-rc.0 & React SDK v6.0.1-beta.54

News & Announcements
,
1

Mappedin JS v6.0.0-rc.0 & React SDK v6.0.1-beta.54

August 7, 2025

This is the first release candidate for Mappedin JS v6. This version introduces significant breaking changes as the SDK transitions from beta to release candidate status.

:warning: Breaking Changes

show3dMap

  • The TShow3dMapOptions key multiFloorView.floorHeight has been renamed to multiFloorView.floorGap.
// ❌ Before
const mapView = await show3dMap(el, mapData, {
	multiFloorView: {
		floorHeight: 10,
	},
});

// ✅ After
const mapView = await show3dMap(el, mapData, {
	multiFloorView: {
		floorGap: 10,
	},
});
  • Multi-floor View is now enabled by default.
// ❌ Before
const mapView = await show3dMap(el, mapData, {
	multiFloorView: {
		enabled: true,
	},
});

// ✅ After
const mapView = await show3dMap(el, mapData);
  • 2D occlusion is now enabled by default and the option has been removed from show3dMap().
// ❌ Before
const mapView = await show3dMap(el, mapData, {
	occlusion: {
		enabled: true,
	},
});

// ✅ After
const mapView = await show3dMap(el, mapData);

Paths

  • getDirections() is now asynchronous.
// ❌ Before
const directions = mapView.getDirections(...);

// ✅ After
const directions = await mapView.getDirections(...);
  • Replaced pathOptions.nearRadius, pathOptions.farRadius, pathOptions.nearZoom, and pathOptions.farZoom with a unified width option.
// ❌ Before
mapView.Paths.add(path, { nearRadius: 0.5, farRadius: 1, nearZoom: 16, farZoom: 18 });

// ✅ After
mapView.Paths.add(path, { width: 1 });

Markers

  • Marker anchor property renamed to placement.
// ❌ Before
mapView.Markers.add(
	space,
	`<div>${...}</div>`,
	{
		anchor: 'left',
	},
);

// ✅ After
mapView.Markers.add(
	space,
	`<div>${...}</div>`,
	{
		placement: 'left',
	},
);
  • Marker dynamicResize option is now enabled by default.
// ❌ Before
const marker = mapView.Markers.add(space, `<div>${...}</div>`, {
	dynamicResize: true,
});

// ✅ After
const marker = mapView.Markers.add(space, `<div>${...}</div>`);

Labels

  • Label appearance options have been flattened and simplified.
// ❌ Before
mapView.Labels.add(target, 'label', {
	appearance: {
		text: {
			foregroundColor: 'white',
			backgroundColor: 'black',
		},
		marker: {
			foregroundColor: {
				active: 'white',
				inactive: 'white',
			},
			backgroundColor: {
				active: 'black',
				inactive: 'black',
			},
		},
	},
});

// ✅ After
mapView.Labels.add(target, 'label', {
	appearance: {
		color: 'white',
		outlineColor: 'black',
	},
});
  • Labels.all() has been renamed to Labels.__EXPERIMENTAL__all() to clearly indicate experimental status.
// ❌ Before
mapView.Labels.all();

// ✅ After
mapView.Labels.__EXPERIMENTAL__all();
  • auto() methods have been renamed to __EXPERIMENTAL__auto().
// ❌ Before
mapView.auto();

// ✅ After
mapView.__EXPERIMENTAL__auto();

Events

  • Click event keys are now all optional, with the exception of coordinate and pointerEvent.
mapView.on('click', event => {
	const { spaces, objects, floors } = event;
	spaces.forEach(() => {});
	objects.forEach(() => {});
	floors.forEach(() => {});
	// etc
});

// ✅ After
mapView.on('click', event => {
	const { spaces, objects, floors } = event;
	if (spaces) {
		spaces.forEach(() => {});
	}
	if (objects) {
		objects.forEach(() => {});
	}
	if (floors) {
		floors.forEach(() => {});
	}
	// etc
});
  • Hover event keys are now all optional, with the exception of coordinate.
// ❌ Before
mapView.on('hover', event => {
	const { spaces, objects, floors } = event;
	spaces.forEach(() => {});
	objects.forEach(() => {});
	floors.forEach(() => {});
	// etc
});

// ✅ After
mapView.on('hover', event => {
	const { spaces, objects, floors } = event;
	if (spaces) {
		spaces.forEach(() => {});
	}
	if (objects) {
		objects.forEach(() => {});
	}
	if (floors) {
		floors.forEach(() => {});
	}
	// etc
});

MapLibre Overlay

  • The experimental createMapLibreOverlay() function has been removed and will be published under a separate @mappedin/maplibre-overlay package.
// ❌ Before
import { createMapLibreOverlay } from '@mappedin/mappedin-js';

// ✅ After
import { createMapLibreOverlay } from '@mappedin/maplibre-overlay';

Visibility

  • Setting opacity: 0 no longer implicitly sets visible: false. Use the visible property explicitly to remove an element from the scene.
// ❌ Before
mapView.updateState(space, { opacity: 0 });
mapView.getState(space).visible; // false

// ✅ After
mapView.updateState(space, { opacity: 0 });
mapView.getState(space).visible; // true
mapView.updateState(space, { visible: false });

Camera

  • Camera transform values are now rounded for stability and to reduce floating-point precision errors.
// ❌ Before
transform.center.latitude; // 43.52041666666667891234
transform.center.longitude; // -79.3827777777778123456
transform.zoomLevel; // 18.123456789012345

// ✅ After
transform.center.latitude; // 43.5204167 (7 decimals)
transform.center.longitude; // -79.3827778 (7 decimals)
transform.zoomLevel; // 18.12346 (5 decimals)
new CameraTransform(camera, { precision: -1 }); // Get raw values if needed

States

  • Improved the types and input validation for getState and updateState. As a result, many of the types have changed.
// ❌ Before
import type {
	TGetState,
	TUpdateState,
	TUpdateStates, // Removed
	TDoorsState,
	TFacadeState,
	TFloorState,
	TGeometryState,
	TImageState,
	TLabelState,
	TMarkerState,
	TModelState,
	UpdateModelState, // Removed
	TPathState,
	TPathUpdateState,
	TShapeState,
	TShapeUpdateState,
	Text3DState, // Removed
	UpdatableText3DState, // Removed
	TWallsState,
	TWallsUpdateState,
} from '@mappedin/mappedin-js';

// ✅ After
import type {
	TUpdateState,
	TGetState,
	TDoorsState,
	TDoorsUpdateState, // Added
	TFacadeState,
	TFacadeUpdateState, // Added
	TFloorState,
	TFloorUpdateState, // Added
	TGeometryState,
	TGeometryUpdateState, // Added
	TImageState,
	TImageUpdateState, // Added
	TLabelState,
	TLabelUpdateState, // Added
	TMarkerState,
	TMarkerUpdateState, // Added
	TModelState,
	TModelUpdateState, // Replaces UpdateModelState
	TPathState,
	TPathUpdateState, // Added
	TShapeState,
	TShapeUpdateState, // Added
	TText3DState, // Replaces Text3DState
	TText3DUpdateState, // Replaces UpdatableText3DState
	TWallsState,
	TWallsUpdateState, // Added
} from '@mappedin/mappedin-js';

BlueDot

  • The BlueDot API has been removed and will be published under a separate @mappedin/blue-dot package.
// ❌ Before
import { show3dMap } from '@mappedin/mappedin-js';

const mapView = await show3dMap(...);
mapView.BlueDot.enable();

// ✅ After
import { show3dMap } from '@mappedin/mappedin-js';
import { BlueDot } from '@mappedin/blue-dot';

const mapView = await show3dMap(...);
new BlueDot(mapView).enable();

Features

  • Added navigationFlags getter to Node.
  • Added floor-independent BlueDot positioning.
  • Upgraded MapLibre to v5.

Fixes

  • Fixed side not working in updateState().
  • Removed tabindex from canvas and attribution.
  • Fixed transparency fighting for overlapping Paths.
  • Fixed Path animation delays.
  • Fixed outlines persisting when polygon is visible: false.
  • Fixed loading MVF v3 for enterprise.
  • Fixed shading only working on elevation 0.
  • Fixed Mappedin attribution showing when outdoorView is disabled.
1 Like