Map Download

_|

This example lists available offline map packages and lets the user download, pause, or delete them. It also shows download progress and status for each item.

Highlights

• Load available map packages with ContentStore
• Download and pause map packages
• Delete downloaded packages
• Track download status and progress

Key implementation

Enable content downloads

import {
  GemKitPlatform,
  SdkSettings,
  ServiceGroupType,
  IGemKitPlatform,
} from '@magiclane/maps-sdk';
import { GemKitNativeReact } from '@magiclane/maps-sdk-react-native';

let gemKitInstance;
if (IGemKitPlatform.getInstance() == null) {
  gemKitInstance = new GemKitNativeReact();
  GemKitPlatform.getInstance(gemKitInstance);
} else {
  gemKitInstance = IGemKitPlatform.getInstance();
}

GemKitPlatform.getInstance().loadNative();
SdkSettings.appAuthorization = 'YOUR_API_TOKEN_HERE';
SdkSettings.setAllowOffboardServiceOnExtraChargedNetwork(
  ServiceGroupType.ContentService,
  true
);
SdkSettings.setAllowInternetConnection(true);

Load available maps

import { ContentStore, ContentType, GemError } from '@magiclane/maps-sdk';

ContentStore.asyncGetStoreContentList(
  ContentType.roadMap,
  (err: GemError, items) => {
    if (err === GemError.success && items) {
      setMaps(items);
    }
  }
);

Download and pause

mapItem.asyncDownload(
  (err: GemError) => {
    if (err === GemError.success) {
      setProgress(100);
    }
  },
  {
    onProgressCallback: (prog: number) => {
      setProgress(prog);
    },
    allowChargedNetworks: true,
  }
);

await mapItem.pauseDownload(() => {
  setStatus(mapItem.status);
});

Notes

• Replace YOUR_API_TOKEN_HERE with your Magic Lane API token.
• Use ContentStoreItemStatus to reflect download state in the UI.
• The map view uses GLView, but the content workflow is identical to the web SDK.