Logging and Displaying Real-Time Distance in an AR Ionic app with Wikitude

We are human and can make mistakes.
When it comes to debugging an application, logging is the most important feature to detect them. Let’s be honest, I have been carried away by this awesome AR technology and should have done this tutorial a while ago (mea culpa).
We will get this done in this tutorial.
Alongside with real-time distance tracking.
Having the distance displayed is a primary tool to help the user locate its progress to the location.

Don’t forget to have a look at the first tutorial otherwise you might get lost.
So let’s get to it!


As usual, four types of logging:

  1. Error
  2. Warning
  3. Debug
  4. Info

To be sure that the Debug Console is available as soon as possible, it’s enabled using the onLoad hook on the body in the index.html file:

And we can now log like this:

The logs are available after tapping this little icon:

Ionic 3 mobile app development augmented reality wikitude debug button

And selecting the type of logs to display:

Ionic 3 mobile app development augmented reality wikitude logs debug

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Real-Time Distance

Now that we have a new tool in our arsenal, we can start coding.
Let’s start with the locationChanged method:

Everytime the user moves, its location changes, the first time we have an initialization phase, this only happens once.

Once this is done we can continuously update the distance with the following method:

Looping through each marker we tell them to update the distance. The loop here is optimized (have a look here for more details).

In the marker.js file, we add the following method:

The text gets updated there.
A GeoLocation object has a distanceToUser method that is quite helpful, once again Wikitude thought about the potential required features!
This method returns the distance between a Marker and the User in meters.

Otherwise, we would have to reproduce the haversine formula.
Normally I’d have directly used the method from the markerLocation GeoLocation object, however Wikitude advises us to use the one located on the GeoObject locations property for better performance.

Finally we can admire the result:

Ionic 3 mobile app development augmented reality wikitude marker distance

Enter your email address in the box below to get access to this tutorial (and others) source code.


Being able to show in real-time how far an objective is located is primordial for any Augmented Reality application using POIs.
This can be easily done with the distanceToUser method, however that method will run on every location changes and the performance can be an issue if there are many markers.
I haven’t yet measured how the application’s performances are impacted so I might update this post once I’ve done it or just post it on Twitter, so be sure to follow me there to get informed.

Performance aside, this brings some new UX issues that we don’t have at the moment with our traditional applications. All the new type of information we will be able to integrate in our future AR application (distance, location, description, etc) will force us to rewrite our brain and rethink how we build applications.

No Comments Yet

Leave a Reply