Start a new topic

How can i customize POI marker With custom Layout

we are building AR view using Wikitude API. we need to customize marker image with round edge . now we are using image.Resourece method to pass image to POI marker . 



Hello Kedar,

Please refer to the documentation section here and also to our Javascript API reference here for more details on how to customize POIs.



hola kedar

¿lograste personalizar el POI?

Estaría muy agradecido si compartes tu progreso.



As mentioned by Eva, please refer to the documentation section here and also to our Javascript API reference here for more details on how to customize POIs. You can find all details there and together with the sample app you have a good starting point.




Hello Nicola,

thanks for your answer. The truth read and reviewed on several occasions the documentation and examples. It's a problem that has stuck me a long time ago.

I did the following:


function Marker(poiData) {


this.imgFondo = new AR.ImageDrawable(World.fondo, 2.5, {

        zOrder: 0,

        opacity: 0.0,

        onClick: Marker.prototype.getOnClickTrigger(this)



 this.markerObject = new AR.GeoObject(markerLocation, {

        drawables: {

            cam: [this.imgFondo,  this.titleLabel, this.descriptionLabel],

            indicator: this.directionIndicatorDrawable,

            radar: this.radardrawables





var World = {


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,

    "fondo": poiData[currentPlaceNr].bg, 


   World.markerList.push(new Marker(singlePoi));




var datos = [{

"id": "1",




 "description":" textoooo  ",

 "bg": "new AR.ImageResource('assets/Sun-icon.png');"

}, {

 "id": "2",



 "altitude": "823.45807",


 "bg": "new AR.ImageResource('assets/Earth-icon.png');"

} ];

The result is that no POI appears in the camera view, so what is the error?

I hope you can help me.


Hello Romina,

So your problem is not that you cannot customize POIs but you cannot see any POI. As a first step, I would suggest you try our sample (exactly as we provide it with no further adjustment) and see if this is working for you. Then, please refer to this How To Guide regarding the GeoLocation class and modify your code accordingly.



Hello Eva,

the examples provided by you, work correctly (I see the POI) my problem is when I want to modify the code and add an image to each POI, as it says above, Kedar.

Could you check the code I published in the previous post ?. I saw the link you sent and I understand how the POI is built. But I do not know what I'm doing wrong.

Thank you

Hello Romina,

If you want to change the style of how the POIs look like then this is a CSS issue. So what I would suggest you do is

  1. Copy our sample code where we load POIs (and make sure they are loaded correctly)
  2. Modify the css part so that you will have images there instead of our default layout. The part you need to adjust and define your own css style would be the following:
<!-- content of POI detail page, you may also add thumbnails etc. here if you like -->
<div data-role="content">
    <!-- title -->
    <h3 id="poi-detail-title"></h3>

    <!-- description -->
    <h4 id="poi-detail-description"></h4>

    <!-- distance -->
    <h4>Distance: <a id="poi-detail-distance"></a></h4>




Hello Eva,

What you tell me, I had done a while ago. In my content panel, each POI shows an image, audio and text.

What I want to do is that in the view of the camera there are multiple POIs, where each POI has a different image.

(attached an image)

as well as the example of the solar system, but applied to the example reloading content. I insist on asking you guys, why I can not make it work.

Thank you

Hi Romina,

What you need to do if define an ImageDrawable class for each photo and then associate this drawable with a GeoObject class. You can find more information here


Login or Signup to post a comment