Marker Selection and Property Modification in an Augmented Reality Ionic App using Wikitude

Having some Markers is cool, but we need to be able to modify them!
In this tutorial we dive into some basic modifications by changing the content and associating a new image when tapping on a Marker.

We will skip some beginner code so go back to the previous tutorial otherwise you will be lost. The experiment’s code is also available there.

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!

Our final goal:

Ionic 3 mobile app development augmented reality wikitude select marker

Our POIs

We will use multiple POIs, those data will be located in the meeting-points.js file so we include it in the index.html file:

Here is the meeting-point.ts content:

Typically this data should be on a remote server, I didn’t use a JSON file because I wanted to avoid using JQuery while keeping it simple.

Here we have a different shortDescription used when the marker is not selected, a longDescription when the marker is selected and we want to have more details about the meeting, a name and the icon to use.

We will have some new content in our World, starting the multi-meeting.js as follow:

Our World will use a Resource stocked in markerDrawableSelected , it will be the same for each marker.
An empty markerList is initialized and the currentMarker property is set to null for now.
The onScreenClick hook is used to deselect the currentMarker when the user taps somewhere else on the screen.

The locationChanged hook doesn’t change much:

For now we only create three POIs:

Most of the data comes from the meetingPoints variable initialized in the meeting-points.js file.

Note the AR.CONST.UNKNOWN_ALTITUDE constant, which is pretty handy if you don’t know your altitude.

Once the poiData ready, we call the loadPoisFromJsData method:

Starting by creating a list of markers, then looping on the poiData.
A unique markerDrawableIdle is created with the meeting icon and all the rest is pretty standard (alt, lat, etc).

The marker is created and pushed in the markerList.

The following method is more interesting.When a marker is selected:

If there is already a marker selected and it’s basically the same marker, we do nothing.
Otherwise, we deselect the current marker. All of this is done on the World’s side because it’s the one that is aware of every markers’ state.
Finally we select the marker and set it as the current marker.

Moving on to the Marker Class now!

The Marker

Some changes there:

The isSelected flag will help us later, by default every markers are not selected.

The markerDrawableSelected is not enabled by default, later when a marker will be selected we will change this property.

The onClick method will be returned by another method getOnClickTrigger, which is as follow:

If the marker is selected it will use the setDeselected method, otherwise it will use the setSelected method AND tell the world that a new marker has been selected.

The setSelected and setDeselected methods are where we do the visual modifications.
After all the work we have done, everything will be finalized in those two methods that only contain four lines of code each:

Starting by toggling the isSelected property.
The marker.descriptionLabel.text property is accessed and will either become a long description or a short description using the poiData property.
Finally the enable property of the Drawable Class allows us to switch between the Idle Drawable and the Selected Drawable.

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


Compared to the previous tutorials, this one is more complicated.
There are many hooks to handle there with the communication between a Marker and the World.
The more features a World contains, the more complex it becomes. You can already imagine that adding some information from authentication, social media or sounds will make your world more interesting and more complex to create and debug.
Right now, the switch between the Idle and Selected Drawable is instantaneous, in the next tutorial we will have a look at animations to make it smoother.
Until next time.

No Comments Yet

Leave a Reply

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