Exploring Mappedin Indoor Maps

Indoor mapping has become essential for venues where GPS fails: shopping malls, airports, hospitals, corporate campuses. Mappedin provides the infrastructure to render, navigate, and interact with these complex spaces. But before you can display a map, you need to understand how to access it.

Interactive Demo

Explore the Galleria Mall demo above. Toggle labels to see space names, pan and zoom to navigate the venue. This is rendered using the Mappedin React SDK with demo credentials.

What is MVF?

MVF (Mappedin Venue Format) is Mappedin's GeoJSON-based format for encoding indoor map data. While comparable to Apple's Indoor Mapping Data Format (IMDF), MVF goes further with built-in navigation graphs, multi-destination routing, and accessibility-aware pathfinding—capabilities that IMDF doesn't provide. MVF contains:

• Geometry: Walls, floors, spaces, and structural elements
• Metadata: Room names, categories, accessibility information
• Navigation graph: Pathfinding nodes and connections between spaces
• Assets: Icons, textures, and visual elements

The current version, MVF v3, supports multi-floor buildings, outdoor areas, and complex venue layouts. You can download MVF files from the Mappedin Maker tool or fetch them programmatically via the REST API.

REST API Authentication

Mappedin uses a straightforward OAuth-style token flow. You exchange API credentials for a short-lived bearer token, then use that token for subsequent requests.

Step 1: Obtain an Access Token

interface TokenResponse {
  access_token: string;
  expires_in: number;
}

async function getAccessToken(
  apiKey: string,
  apiSecret: string
): Promise<string> {
  const response = await fetch(
    "https://app.mappedin.com/api/v1/api-key/token",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        key: apiKey,
        secret: apiSecret,
      }),
    }
  );

  const data: TokenResponse = await response.json();
  return data.access_token;
}

The token endpoint returns:

{
  "access_token": "eyJhbGciOiJIUzI1NiIs...",
  "expires_in": 172800
}

Tokens last 48 hours (172800 seconds). For production apps, implement token caching and refresh logic.

Step 2: Use the Token

Pass the token to the Mappedin SDK instead of raw credentials:

import { getMapData } from "@mappedin/mappedin-js";

const options = {
  accessToken: "your-access-token",
  mapId: "your-map-id",
};

const mapData = await getMapData(options);

This approach keeps your API secret server-side. The client only sees the temporary token.

Listing Available Maps

Once authenticated, you can query the REST API to list maps associated with your API key. This is useful for building admin tools, map selectors, or debugging which maps you have access to.

interface MapInfo {
  id: string;
  name: string;
  venue: string;
  status: string;
  created: string;
  modified: string;
}

async function listMaps(accessToken: string): Promise<MapInfo[]> {
  const response = await fetch("https://app.mappedin.com/api/v1/maps", {
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": "application/json",
    },
  });

  if (!response.ok) {
    throw new Error(`Failed to list maps: ${response.status}`);
  }

  return response.json();
}

The response includes metadata about each map: its ID (needed for loading), name, venue association, and timestamps.

Loading a Map

With a map ID and access token, you can load the full map data:

import { getMapData, show3dMap } from "@mappedin/mappedin-js";

async function loadMap(mapId: string, accessToken: string) {
  // Fetch map data
  const mapData = await getMapData({
    accessToken,
    mapId,
  });

  // Render in a container
  const mapView = await show3dMap(
    document.getElementById("map-container") as HTMLDivElement,
    mapData
  );

  return { mapData, mapView };
}

Offline MVF Loading

For applications that need offline capability, you can download MVF files and hydrate them locally:

import { hydrateMapData, show3dMap } from "@mappedin/mappedin-js";

async function loadOfflineMap(mvfUrl: string) {
  // Fetch the MVF v3 zip file
  const response = await fetch(mvfUrl);
  const arrayBuffer = await response.arrayBuffer();
  const zipBuffer = new Uint8Array(arrayBuffer);

  // Parse the MVF data
  const mapData = await hydrateMapData({
    type: "binary",
    main: zipBuffer,
  });

  // Render the map
  const mapView = await show3dMap(
    document.getElementById("map-container") as HTMLDivElement,
    mapData
  );

  return { mapData, mapView };
}

This approach works well for kiosk applications, mobile apps with poor connectivity, or any scenario where you want to bundle map data with your application.

Practical Applications

Understanding the API authentication and map discovery flow enables several use cases:

Multi-venue applications: Build a single app that dynamically loads different venue maps based on user location or selection.

Map management dashboards: Create admin tools that list all available maps, show their status, and provide quick preview functionality.

Development workflows: Programmatically test against multiple maps during CI/CD, ensuring your navigation logic works across different venue layouts.

White-label solutions: Build a platform that serves different maps to different clients, all using the same codebase.

Try It Out

The interactive map above demonstrates these concepts in action. For a full browsing experience, try the Mappedin Demo Map Explorer where you can browse all available public demo maps and preview them interactively.

For complete SDK documentation, visit the Mappedin Developer Portal. The docs cover everything from basic map rendering to advanced features like wayfinding, search, and real-time positioning.