Start a new topic

Landscape image using HtmlDrawable


I have a problem with HtmlDrawable. I'm trying to display images but some of them are taken in portrait mode and some of them in landscape mode.

Then there is a gap in my marker when landscape picture is used.

I attached the screenshot that shows the problem.

Can you please tell me how to solve this?

(1.33 MB)

Hello Lukas,

Can you please send over some more details?

- Which version of the SDK are you using? 

- Are you using any of our Extensions (Titanium, Cordova, Xamarin, Unity)? If yes, which version are you using?

- What device does this happen with (os Version and model)?

- is this happening with the sample app or in your own app? If it happens with your own app, does the sample app work on your device?



Hello Eva,

I'm using Javascript API version 5.3.1

I am not using any extensions.

I tried it on Nexus 7 using Android 6.0.1 and Samsung Galaxy A3 using Android 5 but problem appears on both devices.

This is happening in my own app and sample app works fine on both devices.



Unfortunately this feature is not supported out of the box.

Preferably you manage to host all assets in squared dimensions.

As a workaround you may create an AnimatedImageDrawable and crop the image that way.

var croppedImage = AR.AnimatedImageDrawable(THUMBNAILURL, 1, Math.min(height, width), Math.min(height, width), { .... }

Hope that helps.

Best regards,


Hi Andi,

thank you for your reply.

There's a problem with  AR.AnimatedImageDrawable, that if I want to display e.g. 40 markers. There is an image on few of them but most of the markers are completely missing images.



anything new regarding my problem?

I also noticed that if I go to multitasking and back, rest of the images will show up.


Please check file size of your thumbnails and use console.logs and WebView debugging to better understand the runtime behaviour.

Also implement onError callbacks so that you can properly handle resources that are not available.

resource loading is not that trivial. I recommend loading all assets you need before showing them and show a loading indication in the meantime. Once all Drawables are loaded you create the markers and call .destroy() once you no longer need them.

Hope this helps.



console.log("load img: "+poiData.originalImageUrl);
    var img = new AR.ImageResource(poiData.originalImageUrl,{
            onLoaded : function(){
                    console.log("isLoaded: "+img.isLoaded() );



    this.imageLabel = new AR.AnimatedImageDrawable(img, 3,Math.min(poiData.originalImageSize[0], poiData.originalImageSize[1]),Math.min(poiData.originalImageSize[0], poiData.originalImageSize[1]),{
            zOrder: 0,
            offsetX: 0,
            offsetY: 0.15,
            scale: 0.2,



I attached code snippet.
I don't get any errors. I can see in console.log("load img: "+poiData.originalImageUrl); that all images are fetched from server.
But then only few are loaded as I can see in console.log("isLoaded: "+img.isLoaded() );
Sometimes it is 2, other time 5 or 9. Function isLoaded() is not even returning false for images that are not loaded.
As I also said if I go out of the app and back 2-3 times rest of the images will show up.
Where is the problem?

Thanks a lot for your detailed description. We were able to reproduce the issue and created a ticket for further investigation in order to fix the problem in an upcoming SDK version.

In the meanwhile please reduce the amount of POIs to avoid texture memory issues.

Thanks in advance and sorry for inconvenience.

Login or Signup to post a comment