Thanks. For reference, below is how I did it. There's probably a more elegant way of implementing in the marker.js.
added to multiplepois.js
loadPoisFromJsonData: function loadPoisFromJsonDataFn(poiData) { /* Empty list of visible markers. */ World.markerList = []; /* Start loading marker assets. */ World.markerDrawableIdle1 = new AR.ImageResource("assets/marker1.png", { onError: World.onError }); World.markerDrawableSelected1 = new AR.ImageResource("assets/marker1_selected.png", { onError: World.onError }); World.markerDrawableIdle2 = new AR.ImageResource("assets/marker2.png", { onError: World.onError }); World.markerDrawableSelected2 = new AR.ImageResource("assets/marker2_selected.png", { onError: World.onError }); World.markerDrawableIdle3 = new AR.ImageResource("assets/marker3.png", { onError: World.onError }); World.markerDrawableSelected3 = new AR.ImageResource("assets/marker3_selected.png", { onError: World.onError }); World.markerDrawableIdle4 = new AR.ImageResource("assets/marker4.png", { onError: World.onError }); World.markerDrawableSelected4 = new AR.ImageResource("assets/marker4_selected.png", { onError: World.onError }); World.markerDrawableIdle5 = new AR.ImageResource("assets/marker0.png", { onError: World.onError }); World.markerDrawableSelected5 = new AR.ImageResource("assets/marker5_selected.png", { onError: World.onError }); /* Loop through POI-information and create an AR.GeoObject (=Marker) per POI. */ for (var currentPlaceNr = 0; currentPlaceNr < poiData.length; currentPlaceNr++) { var singlePoi = { "id": poiData[currentPlaceNr].id, "latitude": parseFloat(poiData[currentPlaceNr].latitude), "longitude": parseFloat(poiData[currentPlaceNr].longitude), "altitude": parseFloat(poiData[currentPlaceNr].altitude), "title": poiData[currentPlaceNr].name, "description": poiData[currentPlaceNr].description }; /* To be able to deselect a marker while the user taps on the empty screen, the World object holds an array that contains each marker. */ World.markerList.push(new Marker(singlePoi)); } World.updateStatusMessage(currentPlaceNr + ' places loaded'); },
Removed the definition of the markerDrawable in marker.js and added the following:
if (poiData.id == 1) { this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle1, 2.5, { zOrder: 0, opacity: 1, /* To react on user interaction, an onClick property can be set for each AR.Drawable. The property is a function which will be called each time the user taps on the drawable. The function called on each tap is returned from the following helper function defined in marker.js. The function returns a function which checks the selected state with the help of the variable isSelected and executes the appropriate function. The clicked marker is passed as an argument. */ onClick: Marker.prototype.getOnClickTrigger(this) }); /* Create an AR.ImageDrawable for the marker in selected state. */ this.markerDrawableSelected = new AR.ImageDrawable(World.markerDrawableSelected1, 2.5, { zOrder: 0, opacity: 0.0, onClick: null }); }; if (poiData.id == 2) { this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle2, 2.5, { zOrder: 0, opacity: 1, /* To react on user interaction, an onClick property can be set for each AR.Drawable. The property is a function which will be called each time the user taps on the drawable. The function called on each tap is returned from the following helper function defined in marker.js. The function returns a function which checks the selected state with the help of the variable isSelected and executes the appropriate function. The clicked marker is passed as an argument. */ onClick: Marker.prototype.getOnClickTrigger(this) }); /* Create an AR.ImageDrawable for the marker in selected state. */ this.markerDrawableSelected = new AR.ImageDrawable(World.markerDrawableSelected2, 2.5, { zOrder: 0, opacity: 0.0, onClick: null }); }; if (poiData.id == 3) { this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle3, 2.5, { zOrder: 0, opacity: 1, /* To react on user interaction, an onClick property can be set for each AR.Drawable. The property is a function which will be called each time the user taps on the drawable. The function called on each tap is returned from the following helper function defined in marker.js. The function returns a function which checks the selected state with the help of the variable isSelected and executes the appropriate function. The clicked marker is passed as an argument. */ onClick: Marker.prototype.getOnClickTrigger(this) }); /* Create an AR.ImageDrawable for the marker in selected state. */ this.markerDrawableSelected = new AR.ImageDrawable(World.markerDrawableSelected3, 2.5, { zOrder: 0, opacity: 0.0, onClick: null }); }; if (poiData.id == 4) { this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle4, 2.5, { zOrder: 0, opacity: 1, /* To react on user interaction, an onClick property can be set for each AR.Drawable. The property is a function which will be called each time the user taps on the drawable. The function called on each tap is returned from the following helper function defined in marker.js. The function returns a function which checks the selected state with the help of the variable isSelected and executes the appropriate function. The clicked marker is passed as an argument. */ onClick: Marker.prototype.getOnClickTrigger(this) }); /* Create an AR.ImageDrawable for the marker in selected state. */ this.markerDrawableSelected = new AR.ImageDrawable(World.markerDrawableSelected4, 2.5, { zOrder: 0, opacity: 0.0, onClick: null }); }; if (poiData.id == 5) { this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle5, 2.5, { zOrder: 0, opacity: 1, /* To react on user interaction, an onClick property can be set for each AR.Drawable. The property is a function which will be called each time the user taps on the drawable. The function called on each tap is returned from the following helper function defined in marker.js. The function returns a function which checks the selected state with the help of the variable isSelected and executes the appropriate function. The clicked marker is passed as an argument. */ onClick: Marker.prototype.getOnClickTrigger(this) }); /* Create an AR.ImageDrawable for the marker in selected state. */ this.markerDrawableSelected = new AR.ImageDrawable(World.markerDrawableSelected5, 2.5, { zOrder: 0, opacity: 0.0, onClick: null }); };
Hi,
We don't have a specific sample for this but you can have a look at this forum thread. This will help you understand.
Greetings
Eva
Hi Eva,
No these all show the same repeated image for the marker. I want to specify different images to use for each marker.
James
Hi James,
I believe this is what you are looking for https://www.wikitude.com/external/doc/documentation/latest/android/poi.html#multiple-pois.
Thanks,
Eva
Attached is a design example. Please ignore the arrows in the middle
James Morgan
I'm looking to create multiple Geo Objects and have a different appearance for each marker, preferably just an image. I can't find any documentation on this. Would you have any examples of how to do this?