[AC-4655] Custom images not working on ti.map

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Cannot Reproduce
Resolution Date	2016-12-07T20:26:21.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Appcelerator Modules
Labels	android, map
Reporter	John Dalsgaard
Assignee	Shak Hossain
Created	2016-12-06T11:41:21.000+0000
Updated	2016-12-20T13:58:25.000+0000

Description

Attachments

File	Date	Size
Screenshot_20161207-032107.png	2016-12-06T21:23:57.000+0000	211432
Screen Shot 2016-12-06 at 12.39.43.png	2016-12-06T11:40:42.000+0000	328807
Screen Shot 2016-12-06 at 12.39.55.png	2016-12-06T11:40:40.000+0000	480556
zeroTrip.png	2016-12-06T11:37:03.000+0000	4483

Comments

Sharif AbuDarda 2016-12-06

Hello, I am testing your image with ti.map 3.1.0 in SDK 6.0.0. I am not able to reproduce the issue. Your custom image shows in my case. See my screenshot.

   operating System
     Name                        = Mac OS X
     Version                     = 10.11.6
     Architecture                = 64bit
     # CPUs                      = 4
     Memory                      = 8589934592
   Node.js
     Node.js Version             = 4.2.2
     npm Version                 = 2.14.7
   Titanium CLI
     CLI Version                 = 5.0.10
   Titanium SDK
     SDK Version                 = 6.0.0.GA
     Target Platform             = android
   ti.map 3.1.0

John Dalsgaard 2016-12-08

Hi Sharif Ok, I can see that you have not tried the test code I have shown above. According to the documentation the image property can be: image : String/Titanium.Blob. So I can get it working with a string as well, which is fine. However, I cannot get it to work with my code where i "put" the image on top of a dark green, round image view. Did you try that? Could I adopt the code to make it work? I would expect my code to return a Titanium.Blob when using the .toImage() method of the view.

John Dalsgaard 2016-12-08

Ok, I have done quite a lot more testing.... And it seems that the problem is the {color:#205081}borderRadius{color} property of the {color:#205081}Ti.UI.View{color}. So this code will show the image on top of a dark green background:

       var annotationView = Ti.UI.createView({
           width:50,
           height:50,
           opacity:0.8,
           backgroundColor:'#2a3b0a',  // Darker green
           // borderRadius:5
       });
        
       //Add image to the annotation view
       var imageView = Ti.UI.createImageView({
               width:35,
               height:35,
               opacity:1,
               image: '/images/zeroTrip.png'
           });
       annotationView.add(imageView);
       mapView.addAnnotation(
           Map.createAnnotation({
               latitude: e.coords.latitude, 
               longitude: e.coords.longitude,
               title:"Test icon",
               subtitle:"06-12-2016",
               // image:imageView.toImage()
               image:annotationView.toImage()
           })
       );

And if I use the {color:#205081}imageView.toImage(){color} instead of the {color:#205081}annotationView.toImage(){color} then it correctly show the icon in the right size (without any background). So it seems the problem is with the {color:#205081}borderRadius{color} property. Do you want me to create a new JIRA - or could you just re-open this? Or even better provide me with a solution that I have overlooked :-) Thanks in advance! /John

John Dalsgaard 2016-12-08

... don't know what happened to the formating above??? Apparently, a code block behaves differently when in a comment??? :-/
John Dalsgaard 2016-12-08

Sigh... and now the formating looks Ok. Strange....?
Hans Knöchel 2016-12-18

[~jda] I added the blob feature in [this PR](https://github.com/appcelerator-modules/ti.map/pull/152) but only tested with Ti.UI.ImageView, not the Ti.UI.View. I didn't expect to have a difference there. So it may be a difference in the toImage method between those two. Can you validate that? Then we would need to fix it there instead.
John Dalsgaard 2016-12-19

Hi Hans, I am pretty sure I had to go back to 2.3.7 to see the change in behaviour - but let me test it again...
John Dalsgaard 2016-12-20

Hans, there seems to be no difference between toBlob() and toImage() - on the Ti.UI.ImageView. toBlob() is not defined on Ti.UI.View - as discussed on TiSlack :-)
Hans Knöchel 2016-12-20

That's expected. Did you try the customView property btw?
John Dalsgaard 2016-12-20

Just did - with borderradius it also disappears.

JSON Source