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).

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

Get on-demand or continuous updates: Mapsted: Programmatically Handling User Positions

CoreApi.Location.PositionChangeListener listener = position -> {
    // Read the user coordinate via position.x and position.y
    // 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:

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

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

3. Active Route Information

First request a route and start navigation as shown in Wayfinding (coreApi.routing().requestRoute(...) and startNavigation(...)). Then register a NavigationCallback to drive the AR overlay from live turn-by-turn updates — the next instruction point gives the direction for the AR arrow, and progress updates let you refresh the overlay in real time:

// Drive AR overlays from live turn-by-turn navigation updates.
NavigationCallback arNavigationCallback = new NavigationCallback() {
    @Override
    public void onNavigationInitSuccess(NavigationState state) { }

    @Override
    public void onNavigationInitFailure(NavigationError error) { }

    @Override
    public void onRouteSegmentReached(RoutePathSegment segment,
                                      List<RoutePathSegment> remainingSegments,
                                      List<RoutePathSegment> completedSegments) { }

    @Override
    public void onRouteInstruction(RoutePointInstruction current,
                                   RoutePointInstruction next,
                                   RoutePointInstruction afterNext) {
        // The next instruction point drives the AR arrow direction.
        MercatorZone target = next.getPoint();
    }

    @Override
    public void onUserProgressAlongRoute(NavigationState state) {
        // Continuous progress updates; refresh the AR overlay each tick.
        RoutePointInstruction upcoming = state.getNextInstruction();
    }

    @Override
    public void onRouteRecalculation(NavigationState state, Route route, RoutePathType type) { }

    @Override
    public void onDestinationReached(Waypoint destination) {
        // Place a destination marker in the AR scene.
    }

    @Override
    public void onNavigationStopped() { }
};

coreApi.routing().addNavigationListener(arNavigationCallback);

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:

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

Mapsted Maps - Mobile Docs
Mapsted Maps - Mobile Docs Mapsted Analytics - Docs