Stacked Maps

Stacked Maps is currently an experimental component of the Mappedin SDK. While in this state, some features may not behave as intended and APIs may be changed. Experimental features are being tested together with early adopters to fine-tune them.

Stacked Maps is a feature of the Mappedin SDK that allows multiple floors of a building to be shown together as a stack of floors. This view is useful to provide users with an overview of a journey that may span multiple floors or to allow users to get an overview of an entire venue.

To enable Stacked Maps, begin with a Journey which spans multiple floors. The sample app draws a path from a location on the first floor to the third floor.

The first iteration of Stacked Maps requires a multi floor Journey to be drawn before Stacked Maps can appear. Refer to the A-B Wayfinding Guide for more information on creating journeys.

Multi buffer rendering is also enabled to allow X-Ray paths to be used, making it easier for the user to see their path through walls and other obstructions. xRayPath is true by default. The sample code below shows explicitly setting it to true for illustration purposes.

Copy
const mapView = await showVenue(document.getElementById("app")!, venue, {
  multiBufferRendering: true,
  xRayPath: true,
  loadOptions: {
    outdoorGeometryLayers: [
      "__TEXT__",
      "__AUTO_BORDER__",
      "Void",
      "Base",
      "Tarmac",
      "Landscape",
      "Floor Shadow",
      "Airplanes",
      "Airplane Shadows",
      "Walkways"
    ]
  }
});

The TMapViewOptions passed to showVenue above also defines the outdoor layers of the map. This allows outdoor layers to be automatically hidden when viewing the Stacked Maps to make it easier for the user to view the detail they are interested in. The outdoor layers are passed to the showVenue call in the loadOptions parameter, which contains an array called outdoorGeometryLayers. The outdoorGeometryLayers will be unique for every map and can be viewed when editing a map within Mappedin CMS.

A Journey is created, which draws a path from a location on the first floor to the third floor.

Copy
const start = venue.locations.find((l) => l.name === "Arrivals - Door 4")!;
const end = venue.locations.find((l) => l.name === "Retail 317")!;
mapView.Journey.draw(start.directionsTo(end));

The MapView is now prepared to display Stacked Maps. Stacked Maps can be enabled and disabled mapView.StackedMaps.enable() and mapView.StackedMaps.disable(). When calling enable an app can specify a verticalDistanceBetweenMaps, which represents the space between each floor. This value can be adjusted based on the size of the floors of the map and screen space available to display.

Copy
//Enable Stacked maps with a verticalDistanceBetweenMaps of 125
mapView.StackedMaps.enable({
  verticalDistanceBetweenMaps: 125
});

//Disable Stacked Maps
mapView.StackedMaps.disable();

A user may click on a connection marker to zoom to that point on the map. The showOverview() method returns to the default zoom level when viewing Stacked Maps. showOverview() is called if the user clicks on the map while in Stacked Maps view.

Copy
mapView.on(E_SDK_EVENT.CLICK, ({ maps }) => {
  if (mapView.state === STATE.STACKED) {
    mapView.StackedMaps.showOverview();
  }
});

The Codesandbox below demonstrates the use of Stacked Maps to show a Journey.