Building & Floor Selection

Mappedin SDK for React Native version 6 is currently in an alpha 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.

Floor Selection

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

Changing Floors

When initialized, MapView displays the Mappedin.Floor with the elevation that's closest to 0. This can be overridden by setting Mappedin.TShow3DMapOptions.initialFloor to a Mappedin.Floor or Mappedin.Floor.id and using it in the MapViewProps.

Declarative

<MapView
  options={{
    initialFloor: 'm_123456789',
  }}
  mapData={{
    key: "mik_yeBk0Vf0nNJtpesfu560e07e5",
    secret: "mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022",
    mapId: "660c0c3aae0596d87766f2da",
  }}
>
</MapView>

Imperative

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

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

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

Listening for Floor Changes

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

useEvent("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 Mappedin.FloorStack object. When multiple buildings are present, there are multiple Mappedin.FloorStack objects, one for each building. A Mappedin. FloorStack contains one to many Mappedin.Floor objects, each representing the map of each level of the building.

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

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