Stacked Maps

Mappedin JS 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.

Stacked maps consist of individual layers that represent different floors of a multi-story building. These layers are conceptually or digitally stacked to create a complete view of the structure, allowing users to visualize, navigate, and interact with multiple floors in an integrated way.

Stacked Maps can be enabled by calling StackedMaps.expand() and disabled by calling StackedMaps.collapse(). The current state of Stacked Maps can be accessed using StackedMaps.state, which can be either expanded or collapsed. MapView.on() fires the event stacked-maps-state-change when the state of the Stacked Maps changes.

Stacked Maps style can be customized by passing a TExpandOptions object to StackedMaps.expand(). This allows for customization of the distance between floors, which floors are shown in the stack and whether the mapView.on('floor-change') event is fired and MapView.currentFloor is updated when the user changes the elevation of the camera to center a new floor.

The sample code below shows the implementation of a button to toggle the Stacked Maps view on and off and sets the distance between floors to 30 meters.

enableButton.onclick = () => {
	if (mapView.StackedMaps.state === 'collapsed') {
		enableButton.innerText = 'Disable';
		mapView.StackedMaps.expand({ distanceBetweenFloors: 30 });
	} else {
		enableButton.innerText = 'Enable';
		mapView.StackedMaps.collapse();
	}
};

Try the code above in the CodeSandbox below, which enables and disables Stacked Maps and listens for the stacked-maps-state-change event.