Integrating a Labeled Marker in an Augmented Reality Ionic App using Wikitude

The first time I developed an Augmented Reality application I used an (ugly) black and white Marker. This method was very cool and I was totally bluffed by the technology.
However, this wasn’t very scalable. Can you imagine how annoying it would be to go around and paint markers everywhere?
Nowadays these markers can be integrated by using geolocations, locations of walls and points of intersection!

Some changes

Markers are still used, however, not in this shape:

Ionic 3 mobile app development augmented reality wikitude marker
Here is our new experience folder’s organization:

Ionic 3 mobile app development augmented reality wikitude secret shop folder

Two images will be used, one will be the 2D representation of our Marker in the real world and the other one will just be an indicator.

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!

Using the index.html file from the previous tutorial, we add two scripts:

The secret-shop.js file contains our World and the marker.js file contains a Class that will return a specific Marker.

Moving back to the home.ts file:

We set our new experiment.

Our new world

Here is the first part of our World in the secret-shop.js file:

For now, we only have three properties.
The initiallyLoadedData flag that will change once the World is loaded.
markerDrawableIdle and markerDrawableDirectionIndicator which will contain some ImageResources.

The locationChanged method will be triggered once the location has changed and give us the new latitude, longitude and altitude.
The code inside will run if the World hasn’t been initialized yet. It will create new data for a Point Of Interest (POI) that is close to the current user.

A Point Of Interest is simply a valuable location, if you are lost in a desert, the closest POI would be the closest Oasis or the closest City.

Once everything is ready, this data will be used to load the POI by calling the loadPois method.

Which is as follow:

Just setting the ImageResources then initializing a new Marker passing the poiData variable.

Finally, the locationChanged method is attached to the AR.context.onLocationChanged callback:

The Marker

Moving on to our final file, the marker.js:

Starting by declaring a Class that receives the poiData from the World and creates a new Geolocation.

Still inside this constructor:

Two Labels are created, one for the title and another one for the description.
The first parameter is the content, followed by the height and some styles similar to the CSS language.

Note the zOrder parameter, it acts like the z-index property so both labels are on the same layer, one above (translate : { y: 0.55}) and one below (translate : { y: -0.55}).

Just like in the previous tutorial, we add an indicator:

And set everything together:

Our Marker is now created with its indicator:

Ionic 3 mobile app development augmented reality wikitude marker

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


Markers have evolved, however there is still some room for improvement.
If the user has a bad GPS it will totally mess up the application by placing the markers at the wrong places: you don’t want to have your McDonald’s icon in front of the Burger King.
Creating a Marker is very simple and dynamic, at the end of the day, it’s just a Class that can receive different information.
Typically a Factory can deliver different types of Markers and make mobile Augmented Reality application development  a piece of cake.

1 Comment

  1. ndn ndn
    September 10, 2017    

    Hi Matthieu,
    I have made a try about your “Integrating a Labeled Marker in an Augmented Reality Ionic App using Wikitude”. Unfortunely, it doesn’t work.
    With Android Studio, I could debug the app “/Ionic/ionic-wikitude-label-integration-master/platforms/android/build/outputs/apk/android-debug.apk” which shows me the following error, on the file marker.js :

    09-10 20:19:55.511 31770-31770/io.ionic.starter D/Toast: showing allowed
    09-10 20:19:55.832 31770-31770/io.ionic.starter I/chromium: [INFO:CONSOLE(1)] “Uncaught SyntaxError: “, source: file:///android_asset/www/assets/experience/world/secret-shop/js/marker.js (1)
    09-10 20:19:55.952 31770-31770/io.ionic.starter D/SystemWebChromeClient: file:///android_asset/www/build/main.js: Line 55599 : good load

    As explained here :, class is a reserved word.

    My ionic configuration is :
    cli packages: (/home/develop/.npm-packages/lib/node_modules)
    @ionic/cli-utils : 1.9.2
    ionic (Ionic CLI) : 3.9.2

    global packages:
    Cordova CLI : 7.0.1

    local packages:
    @ionic/app-scripts : 1.3.7
    Cordova Platforms : android 6.2.3 ios 4.3.1
    Ionic Framework : ionic-angular 3.2.1

    Node : v6.11.2
    npm : 3.10.10
    OS : Linux 3.10

    Thanks in advance for your help.

Leave a Reply

Your email address will not be published. Required fields are marked *