Building & Floor Selection

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.

Floor Selection

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 MapView.currentFloor.

Video Walkthrough

Changing Floors

When initialized, MapView displays the Floor with the elevation that's closest to 0. This can be overridden 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.

Web

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

React

// https://docs.mappedin.com/react/v6/latest/functions/_mappedin_react-sdk.useMapViewEvent.html
useMapViewEvent("floor-change", (event) => {
console.log(
  "Floor changed to:",
  event?.floor.name,
  "in FloorStack:",
  event?.floor.floorStack.name
);
});

Building Selection

Mappedin Maps can contain one to many buildings with each building having one to many floors. Each building has its floors organized into a FloorStack object. When multiple buildings are present, there are multiple FloorStack objects, one for each building. A FloorStack contains one to many Floor objects, each representing the map of each level of the building.

The FloorStack object is accessed by using MapData.getByType('floor-stack').

// Get the FloorStack object.
const floorStacks = mapData.getByType('floor-stack');

Determine If a Coordinate Is Inside a Building

The FloorStack object has a geoJSON property that can be used to determine if a coordinate is inside a building. Use Turf.js's booleanContains function to determine if a coordinate is inside a building.

The code below listens for a click event on the map and determines if the clicked coordinate is inside a building. If it is, the building name is logged to the console. If it is not, a message is logged to the console.

import booleanContains from "@turf/boolean-contains";
...

const buildings = mapData
  .getByType("floor-stack")
  .filter((fs) => fs.type === "Building");

// This demonstrates how to detect if a coordinate is within a building.
// For click events, this can be detected by checking the ClickEvent.floors.
// Checking the coordinate is for demonstration purposes and useful for non click events.
mapView.on("click", async (event) => {
  let found = false;
  buildings?.forEach((building: any) => {
    if (booleanContains(building.geoJSON, event.coordinate.geoJSON)) {
      console.log("Coordinate is within building: ", building.name);
      found = true;
    }
  });
  if (!found) {
    console.log("Coordinate is not within any building");
  }
});

Full Sample

The following CodeSandbox uses select elements populated with all FloorStacks and Floors of the selected FloorStack. When a user selects a new floor from the select element, that floor is displayed in the MapView. Additionally, a floor-change event listener is implemented to update the select element and log the names of the current Floor and FloorStack 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 when navigation is shown.

The example also responds to a click event on the map and determines if the clicked coordinate is inside a building. If it is, the building name is shown in an alert with its name, if it is not, a message is shown in an alert with the message "Coordinate is not within any building".