Skip to content
Developers Docs

AR Guide

AR-Mode Implementation

AR-mode (Augmented Reality Mode) provides an immersive way for users to interact with their surroundings by overlaying digital information on the physical world. Using the Mapsted SDK, developers can integrate AR features like indoor navigation, point-of-interest (POI) overlays, and 3D object placement directly within their apps.

Prerequisites

  • iOS: Familiarity with ARKit.
  • Android: Familiarity with ARCore.
  • A mobile app integrated with the Mapsted Mobile SDK
  • Camera permissions must be handled by the developer
  • Compatible device (Android/iOS) with AR support

Key Features of AR-Mode

  • Real-time location tracking
  • 3D object placement
  • Interactive POIs
  • Customizable overlays
  • Seamless integration with map views

AR-Mode Demo Video

  • For a quick overview of AR-Mode in action, watch this demo video: Link

Triggering AR Mode

AR Mode can be initiated through multiple mechanisms:

1. UI Button Trigger

Inject a floating button into the Mapsted MapView.

2. Tilt Detection Trigger

Use device motion APIs to detect vertical screen orientation:

  • iOS: Use CMMotionManager
  • Android: Use SensorManager with TYPE_ACCELEROMETER

Example use-case: Automatically launch AR mode when the phone is held upright (portrait/vertical).

3. Restrict AR Activation to Active Navigation

Ensure AR can only be launched when a route is in progress (see below).

Core Requirements for AR Mode

To provide a functional AR navigation experience, the following data must be retrieved from the Mapsted SDK:

1. User Position

CoreApi.Location.PositionChangeListener listener = position -> {
    // Use position.getX() and position.getY()
    // Convert to LatLng
    // https://developer.mapsted.com/mobile-sdk/#coordinate-systems
     };

coreApi.locations().addPositionChangeListener(listener);

 ```

 #### 2. Phone Heading / Direction
- Use the heading callback to determine device orientation:
[PhoneHeadingChange Callback] (https://developer.mapsted.com/mobile-sdk/#programmatically-handling-user-positions)

``` java
CoreApi.PhoneHeadingChangeListener listener = headingRad -> {
   float headingDeg = headingRad * 180.0F / 3.14159F;
};

coreApi.locations().heading()
   .addPhoneHeadingChangeListener(listener);
 ```

 #### 3. Active Route Information
- Programmatically use route objects:
[Mapsted: Programmatic Wayfinding](https://developer.mapsted.com/mobile-sdk/#programmatic-wayfinding)
- Listen for routing updates:

``` java
RoutingStatusCallback routingStatusListener = new RoutingStatusCallback() {
        @Override
        public void onRoutingStatus(boolean isRoutingModeOn, Route route) {
        // Confirms if route status changed (e.g., user exited route)
        }

        @Override
 public void onRouteSegmentReached(RouteSegment currentRouteSegment, List<RouteSegment> visitedRouteSegments, List<RouteSegment> upcomingRouteSegments) {
        // New route segment reached 
        }

        @Override
        public void onRouteInstruction(RouteNode nextKeyNode, @Nullable RouteNode nextKeyNodeNextQuickInstruction) {
        // Next instruction point reached
        }

        @Override
        public void onUserProgressAlongRoute(RouteUserProgress routeUserProgress) {
        // Updated on a per-step basis
        }

        @Override
        public void onRouteRecalculation(Route route) {
        // Route recalculated
        }

        @Override
        public void onDestinationReached(Waypoint destination) {
        // Destination reached
        }
    };

// Register listener
coreApi.routing().addRoutingStatusListener(routingStatusListener);

Implementing AR Visuals

Once the required data is available:

iOS (ARKit)

  • Use ARSCNView or ARView to display camera + 3D overlays
  • Example: Add a virtual arrow in the direction of the next segment

Documentation: Apple ARKit Overview

let configuration = ARWorldTrackingConfiguration()
sceneView.session.run(configuration)

let arrowNode = SCNNode(geometry: SCNCone(topRadius: 0, bottomRadius: 0.1, height: 0.2))
arrowNode.position = SCNVector3(0, 0, -1) // 1m in front
sceneView.scene.rootNode.addChildNode(arrowNode)

Android (ARCore)

Use ArFragment or Sceneform (or raw ARCore APIs) to overlay content Position anchors based on device pose and routing info

Documentation: Google ARCore Documentation

Anchor anchor = session.createAnchor(pose);
AnchorNode anchorNode = new AnchorNode(anchor);
TransformableNode node = new TransformableNode(arFragment.getTransformationSystem());
node.setParent(anchorNode);
node.setRenderable(arrowRenderable);
arFragment.getArSceneView().getScene().addChild(anchorNode);

Camera Permission Handling

iOS:

  • Add key to Info.plist:
<key>NSCameraUsageDescription</key>
<string>This app uses your camera for AR navigation</string>

Android:

  • Request at runtime:
<uses-permission android:name="android.permission.CAMERA" />

Optional Enhancements

  • AR Pop-ups: Add floating text or icons over key landmarks
  • AR Path Line: Render 3D path lines for route segments
  • Destination Highlighting: Place a marker or effect at the destination anchor

Conclusion

This integration leverages Mapsted's real-time positioning and routing features to anchor AR content in meaningful indoor locations. ARKit and ARCore enable enhanced visualization of navigation data, improving user understanding and engagement during wayfinding.

To integrate:

  1. Ensure route is in progress
  2. Retrieve position, heading, and route segments from Mapsted SDK
  3. Use ARKit/ARCore to place virtual objects relative to user and path