Web SDK v6.0.1-alpha.26 Release Notes

News & Announcements
1

v6.0.1-alpha.26

June 28, 2024

This update introduces a completely new SDK architecture enabling faster load times, less memory consumption, real time 2D colliders, and more. Please reach out if there are any unexpected changes after upgrading to v6.0.1-alpha.26.

Changes:

  • [Breaking] Increased the default iconSize of label icons from 10 pixels to 20 pixels.
  • [Breaking] Decreased the default iconPadding of label icons from 4 pixels to 2 pixels.
  • [Breaking] Camera.animate has been renamed to Camera.animateTo.
  • [Breaking] maxZoomLevel and minZoomLevel setters have been replaced with setMaxZoomLevel and setMinZoomLevel methods.
  • [Breaking] The priority property for labels and markers has been renamed rank in updateState.
  • [Breaking] The elements in the DOM have shifted. It is not recommended to rely on or modify the Mappedin elements in the DOM.
Element Before After
Map Canvas Top level The map canvas is now a child of <div class="maplibre-canvas-container">
Attribution Top level Attribution elements are now children of <div class="mappedin-control-container">
Colliders Children of <div class="mappedin__smart-collision-engine__container> Colliders are now children of <div class="mappedin-2d-entities">

Features:

  • Colliders such as labels and markers adjust position in real time during camera events.
  • Initial camera bearing, pitch, and zoomLevel can be set in the options for show3dMap.
await show3dMap(document.getElementById('mappedin-map'), mapData, {
	bearing: 45,
	pitch: 45,
	zoomLevel: 19,
});
  • Labels.all will automatically use the icon for spaces and points of interest if one has been set in the editor.
  • The color of the top of the walls can now be set independently of the rest of the wall.
await show3dMap(document.getElementById('mappedin-map'), mapData, {
	wallTopColor: '#000000',
});
  • The ‘click’ event returns a new property, pointerEvent, which can be used to differentiate between mouse clicks.
mapView.on('click', async event => {
	const [space] = event.spaces;
	if (!space) return;
	switch (event.pointerEvent.button) {
		case 0:
			const { coordinate } = event;
			const label = space.name || `Clicked: Lat: ${coordinate.latitude} Lon: ${coordinate.longitude}`;

			mapView.Labels.add(coordinate, label);
			break;
		case 2:
			mapView.Camera.focusOn(space);
			break;
	}
});
  • Outdoor layers below indoor geometry can be hidden using the outdoorView.layersHiddenByGeometry option for show3dMap.

Fixes:

  • Fixed loading of geometry styles.
  • Reduced memory consumption.
  • Reduced bundle size.