Skip to main content
Version: 6.0

Level Selection

Mappedin SDK version 6 is currently in a beta state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.
Using Mappedin JS with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

When mapping a building with multiple floors, each floor has its own unique map. These are represented by the Floor class, which are accessed using MapData.getByType('floor'). The currently displayed Floor can be accessed using MapObject.floor. MapView displays one Floor at a time.

Mappedin-Web-SDK-v6-Level-Selector

Video Walkthrough​

Changing Floors​

When initialized, MapView displays the Floor with the elevation that's closest to 0. This can be overriden by setting TShow3DMapOptions.initialFloor to a Floor or Floor.id and passing it to show3dMap().

// Setting the initial floor to Floor.id 'm_123456789'.
const mapView = await show3dMap(document.getElementById('mappedin-map') as HTMLDivElement, mapData, {
	initialFloor: 'm_123456789',
});

The Floor displayed in a MapView can also be changed during runtime by calling mapView.setFloor() and passing in a Floor or Floor.id.

// Set the floor to Floor.id 'm_987654321'.
mapView.setFloor(`m_987654321`);

Listening for Floor Changes​

Mappedin JS event system provides the ability to listen for floor changes on a MapView. The code below listens for the floor-change event and logs the new floor name to the console.

// Listen for changes to the floor.
mapView.on('floor-change', (event) => {
	console.log('Floor changed to: ', event.floor.name);
});

Full Sample​

The following CodeSandbox uses a select element, which is populated with all Floors within the MapObject. When a user selects a new floor from the select element, that floor is displayed in the MapView. An implementation of the floor-change event listener is also included that updates the select element and prints the floor name to the console. This is useful for scenarios where the user uses something other than the select element change the Floor, such as clicking on a Connection to another Floor.