Human Voice Navigation

_|

This example calculates a multi-stop route, starts navigation simulation, and plays human voice instructions while updating the UI with turn and ETA details.

Highlights

• Build a route with multiple waypoints
• Render the route on the map
• Start navigation simulation with voice guidance
• Display instruction, ETA, and remaining distance

Key implementation

Initialize the SDK and select a voice

import {
  GemKitPlatform,
  SdkSettings,
  ContentStore,
  ContentType,
  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();
}

await GemKitPlatform.getInstance().loadNative();
SdkSettings.appAuthorization = 'YOUR_API_TOKEN_HERE';

const voices = ContentStore.getLocalContentList(ContentType.humanVoice);
if (voices && voices.length > 0) {
  SdkSettings.setVoiceByPath(voices[0].fileName);
}

Build the route and start simulation

import {
  Landmark,
  RoutePreferences,
  RoutingService,
  NavigationService,
  SoundPlayingService,
  GemError,
} from '@magiclane/maps-sdk';

const handler = RoutingService.calculateRoute(
  [departureLandmark, intermediaryLandmark, destinationLandmark],
  new RoutePreferences({}),
  (err: GemError, calculatedRoutes: Route[]) => {
    if (err === GemError.success && calculatedRoutes.length > 0) {
      const routesMap = gemMap.preferences.routes;
      calculatedRoutes.forEach((route, index) => {
        routesMap.add(route, index === 0, getRouteLabel(route));
      });
      gemMap.centerOnRoutes(calculatedRoutes);
    }
  }
);

SoundPlayingService.canPlaySounds = true;
NavigationService.startSimulation(routesMap.first, undefined, {
  onNavigationInstruction: (instruction) => {
    setCurrentInstruction(instruction);
  },
  onError: (error: GemError) => {
    if (error !== GemError.cancel) {
      NavigationService.cancelNavigation(handler);
    }
  },
});

Notes

• Replace YOUR_API_TOKEN_HERE with your Magic Lane API token.
• On Android, add a short delay before initialization if needed.
• Voice packages must be installed locally before selection.