Assistance Needed with Dynamic Map Switching in Mappedin React SDK

Other Mappedin Tech
1

Hi Mappedin Support Team,

I hope you’re doing well. I am reaching out because we are experiencing an issue when dynamically switching between buildings in our campus guide application using your React SDK.

Issue Description:

We have integrated your SDK to display indoor maps for different buildings (e.g., “Hall Building” and “EV Building”) based on a selected building. When the user switches buildings, we update the mapId accordingly and force a re-mount of the <MapView> component by updating its key. Additionally, we are calling mapView.destroy() to ensure the previous map instance is removed. However, although our console logs show that the selected building and mapId update correctly (for example, switching to “EV Building” sets the mapId to “67b023355b54d7000b151b86”), the displayed map remains that of the “Hall Building.” In some instances, we also see warnings like “THREE.WebGLRenderer: Context Lost” and errors related to useMap being used outside a MapView context.

What We Have Tried:

  1. Force Remount: We update a state variable used as a key for <MapView> to force a complete re-mount when the building changes.
  2. Destroy Previous Instance: We attempt to call mapView.destroy() (using a ref and/or via useMap()) before switching the map.
  3. Delay Remount: We’ve introduced a short delay (using setTimeout) to allow for proper teardown before reinitializing the new map.
  4. Console Logging: Our logs confirm that the building change and mapId update occur as expected, but the new map never appears.

Despite these measures, the map displayed does not update to reflect the new building selection.

Request:

Could you please advise on the best practices for dynamically switching maps in the Mappedin React SDK? Specifically:

  • Is there a recommended way to destroy and reinitialize the MapView component when the mapId changes?
  • Are there any known issues or caching mechanisms in the SDK that might cause the old map data to persist even after updating the mapId?
  • Would using a different lifecycle method or API call (e.g., an explicit “reload” function) be necessary to fully refresh the map?

Any guidance or documentation you can provide would be greatly appreciated, as it is critical for our application to support dynamic building switching reliably.

We are a team of students working on our campus guide project, and we truly appreciate the free access to your SDK which has been invaluable for our development.

Thank you for your support and assistance.

2

Hi @Mohamed_Redhouane_Ne !

Exciting to hear you’re working with the React SDK for your project :partying_face:

Would you be able to share a code snippet? That would help us reproduce the issue on our end, especially since the React SDK is still relatively new. I’d like to confirm whether it might be a bug on our side.

In the meantime, here’s an example of how switching out viewId is handled in this showcase demo.

In this implementation, we are using useMapData({ key, secret, mapId }) and remounting the entire component.

Hope this helps!

3

Hello @KimCodeashian,

Thank you for your reply. We are working on our campus guide application using your React SDK, where each map represents a different building. For example, we have separate maps for the “Hall Building” and the “EV Building.” Our goal is to allow users to dynamically switch between these building maps.

However, we are encountering an issue: when the user selects a different building, the correct map ID updates (as confirmed by our console logs), and new map data is fetched. Despite this, the displayed map does not update accordingly—it continues to show the previous building’s map.

Below is a snippet of our implementation:


import { MapView, useMapData } from "@mappedin/react-sdk";
import "@mappedin/react-sdk/lib/esm/index.css";
import { useState, useEffect } from "react";
import BuildingSelector from "../Components/IndoorDirections/BuildingSelector";
import Labels from "../Components/IndoorDirections/Labels";
import CameraEvents from "../Components/IndoorDirections/CameraEvents";
import FloorSelector from "../Components/IndoorDirections/FloorSelector";
import AccessibleToggle from "../Components/IndoorDirections/AccessibleToggle";
import IndoorPOI from "../Components/IndoorDirections/IndoorPOI";
import SearchNavigation from "../Components/IndoorDirections/SearchNavigation";

const BUILDINGS = {
  "Hall Building": "67b0241a845fda000bf299cb",
  "EV Building": "67b023355b54d7000b151b86",
};

export default function IndoorDirections() {
  const [accessible, setAccessible] = useState(false);
  const [selectedBuilding, setSelectedBuilding] = useState("Hall Building");
  const mapId = BUILDINGS[selectedBuilding]; // Directly derived from selectedBuilding

  // Fetch map data with unique key for each building change
  const { isLoading, error, mapData } = useMapData({
    key: "??",
    secret: "??",
    mapId,
  });

  useEffect(() => {
    if (mapData) {
      console.log("New Map Data Loaded:", mapData);
    }
  }, [mapData]);

  if (isLoading) {
    return <div className="flex-1 flex items-center justify-center">Loading...</div>;
  }

  if (error) {
    return <div className="flex-1 flex items-center justify-center text-red-500">Error loading map</div>;
  }

  return (
    <div className="flex flex-col relative h-[calc(100vh-128px)] w-full bg-gray-50">
      <BuildingSelector
        selectedBuilding={selectedBuilding}
        onBuildingSelect={setSelectedBuilding}
      />

      {mapData && (
        <MapView
          key={mapId} // Key based on mapId ensures proper remount
          mapData={mapData}
          className="flex-1 w-full relative"
          options={{ backgroundColor: "#f9fafb", showWatermark: false }}
        >
          {/* Map children components */}
          <div className="absolute top-4 left-0 right-0 px-4 z-50">
            <SearchNavigation accessible={accessible} />
          </div>

          <div className="hidden md:block">
            <CameraEvents />
          </div>

          <div className="absolute bottom-4 left-0 right-0 px-4 z-50">
            <div className="flex flex-col md:flex-row items-center justify-between gap-4">
              <div className="md:hidden w-full">
                <CameraEvents />
              </div>

              <div className="flex items-center gap-4 w-full md:w-auto">
                <FloorSelector />
                <AccessibleToggle setAccessible={setAccessible} />
                <IndoorPOI />
              </div>
            </div>
          </div>

          <Labels />
        </MapView>
      )}
    </div>
  );
}

Details of the Issue:

  • When switching buildings, our logs confirm that the selectedBuilding and corresponding mapId update correctly (e.g., changing to “EV Building” sets mapId to “67b023355b54d7000b151b86”).
  • We pass this mapId as the key to the <MapView> component to force a remount.
  • Despite this, the displayed map remains the same (e.g., the Hall Building’s map continues to appear), indicating that the MapView does not reinitialize as expected.
  • We also encounter warnings like “THREE.WebGLRenderer: Context Lost,” suggesting that the previous map instance may not be fully cleared before reloading the new one.

Thank you!

4

Thanks for sending over your implementation — I’ve been able to replicate it with the same conclusion.

I’ve notified our team to investigate further but for the time being, you can pass in the mapId as a key to force it to reload the whole component with the new mapId.

<MapComponent viewId={viewId} mapId={mapId} key={mapId} />

Let me know if this works for you!