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
withTYPE_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
- Get on-demand or continuous updates: Mapsted: Programmatically Handling User Positions
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
orARView
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