tidev / ti.map

Use native Apple Maps & Google Maps in iOS and Android with Axway Titanium
Other
49 stars 129 forks source link

Calling .toImage() on the map view gives blank image #147

Closed agrycroko closed 8 years ago

agrycroko commented 8 years ago

I'm trying to get a blob of the map view by calling .toImage(), but results in a black image with 'Google' in the bottom left corner. Any fixes for this?

ashcoding commented 8 years ago

@garycrook Is this for Android or iOS? And could you give more information? Thanks!

agrycroko commented 8 years ago

Sorry, it's for Android. I've set up all of the Google Maps API key etc. and the map is showing in the app.

app.ui.map = require('ti.map'); ... var mapView = app.ui.map.createView({ mapType: app.ui.map.SATELLITE_TYPE, userLocation: true, animate: true, regionFit: true }); ... var mapContainerView = Ti.UI.createView({}); mapContainerView.add(mapView); // Other Ti views get added to mapContainerView as overlays .. win.add(mapContainerView); .. var imageBlob = mapView.toImage();

When saved out to a file or the blob is passed straight to an ImageView, it's just a blank image with 'Google' in the bottom left corner. It hasn't captured the actual map into the bitmap.

wsliaw commented 8 years ago

Hi, for Android, you have to do this way:

mapView.addEventListener('onsnapshotready', function(e) {
    var imageBlob = e.snapshot;
});

reference: http://docs.appcelerator.com/platform/latest/#!/api/Modules.Map.View-event-onsnapshotready

agrycroko commented 8 years ago

Cool, thanks that worked!

wsliaw commented 8 years ago

you're welcome ;)

ashcoding commented 8 years ago

@wsliaw Great work! :+1: Closing this. :)

agrycroko commented 8 years ago

I called it like this on iOS:

var imageBlob = mapView.toImage(null, true); // no immediate callback, honour scale factor

Then processed the blob afterwards. Any help?

Thanks,

Gary

On 7 April 2016 at 01:12, Anthony Catalano notifications@github.com wrote:

I can not get toImage to work on IOS its saves the map blank with the word "legal" in the bottom left hand corner and I tried using a callback. Any ideas?

var Map = require('ti.map'); var GPSmap = Map.createView({ mapType : Map.SATELLITE_TYPE, region : { latitude : MYLATITUDE, longitude : MYLONGITUDE, latitudeDelta : 0.01, longitudeDelta : 0.01 }, userLocation : false });

win.add(GPSmap);

var mapBlob = GPSmap.toImage(function(e){ var filename = Titanium.Filesystem.applicationDataDirectory + "/tempmap.jpg"; f = Titanium.Filesystem.getFile(filename); f.write(mapBlob);

                myimageview.image = Ti.Filesystem.applicationDataDirectory + "/tempmap.jpg"
            });

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/appcelerator-modules/ti.map/issues/147#issuecomment-206628120

TonyCat commented 8 years ago

Thanks Gary I noticed that it worked out of the box when I used it in Alloy but when when I wrote classic style the honour scale factor is a must to get it to work. Cheers!

agrycroko commented 8 years ago

No problem :-)

On 7 April 2016 at 13:53, Anthony Catalano notifications@github.com wrote:

Thanks Gary I noticed that it worked out of the box when I used it in Alloy but when when I wrote classic style the honour scale factor is a must to get it to work. Cheers!

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/appcelerator-modules/ti.map/issues/147#issuecomment-206879639