[TIMOB-13628] Android Maps v2: Support the native zOrderOnTop option

GitHub Issue	n/a
Type	New Feature
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2014-05-08T17:53:28.000+0000
Affected Version/s	Release 3.1.0
Fix Version/s	2013 Sprint 22, 2013 Sprint 22 API, Release 3.2.0
Components	Android
Labels	exalture, module_androidmapv2, qe-testadded
Reporter	Jesper Jonsson
Assignee	Hieu Pham
Created	2013-04-19T15:01:52.000+0000
Updated	2014-05-12T10:40:19.000+0000

Description

Problem

When the map is placed in a view hierarchy it can sometimes be placed below all views (even below the window background color). This happens for example when you animate the parent view position. But when placed in a quite large view hierarchy I've noted that it randomly can behave the same as described above. This can be prevented if the [zOrderOnTop](http://developer.android.com/reference/com/google/android/gms/maps/GoogleMapOptions.html#zOrderOnTop(boolean)) is set to true and the maps view will be placed above all other views in the Activity. Run the code on 4.2.x device with Google Play installed.

 
var win = Ti.UI.createWindow({ 
   backgroundColor : 'transparent', 
   orientationModes : [Titanium.UI.PORTRAIT], 
   exitOnClose : true, 
   navBarHidden : true 
}); 
win.open(); 

var view2 = Ti.UI.createView({ 
width : Ti.UI.FILL, 
height : Ti.UI.FILL, 
backgroundColor : 'transparent' 
}); 

var view3 = Ti.UI.createView({ 
top : 0, 
left : 0, 
width : Ti.UI.FILL, 
height : 200, 
backgroundColor : 'yellow' 
}); 
var label = Ti.UI.createLabel({ 
color:'black', 
text: "I'm under the map, and should never be visible! But am I?", 
textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT, 
font: { fontSize: 30 }, 
top: 0, 
left : 0 
}); 
view3.add(label); 
view2.add(view3); 

var MapModule = require('ti.map'); 
var mapview = MapModule.createView({ 
    mapType:MapModule.NORMAL_TYPE, 
    //zOrderOnTop: true 
}); 
view2.add(mapview); 

win.add(view2); 

setTimeout(function() 
{ 
var dialog = Ti.UI.createAlertDialog({ 
message: 'Going to animate, bye bye maps! :/', 
title: 'Notification', 
ok: 'Okay', 
}); 
dialog.addEventListener('click', function() 
{ 
view2.animate({ 
left : 200, 
duration : 150 
}); 
dialog.removeEventListener('click', arguments.callee); 
}); 
dialog.show(); 
}, 5000);

1. Run the above code, click the alert after 5 seconds 2. Uncomment zOrderOnTop line, repeat step 1. Fail case: yellow label on top of map Expected case: should not see yellow label.

Comments

Hieu Pham 2013-07-15

PR: https://github.com/appcelerator/titanium_modules/pull/125
Hieu Pham 2013-09-02

PR in new repo: https://github.com/appcelerator-modules/ti.map/pull/4
Ping Wang 2013-10-18

The PR does not fix the original test case reliably. Closed the PR. We need more investigation.

Hieu Pham 2013-10-25

Test case:

   var MapModule = require("ti.map");
   var win = Titanium.UI.createWindow({
       backgroundColor : "white"
   });
    
   var mapContainer = Ti.UI.createView({
       id : 'mapContainer',
       top : "50%",
       width : "95%",
       bottom : "15dip",
       visible : true,
       layout : "vertical",
       backgroundImage : "/images/map_bg.png"
   });
   win.add(mapContainer);
   
   var mapview = MapModule.createView({
       mapType : MapModule.NORMAL_TYPE,
       region : {
           latitude : 33.74511,
           longitude : -84.38993,
           latitudeDelta : 0.01,
           longitudeDelta : 0.01
       },
       animate : true,
       regionFit : true,
       userLocation : true,
       top : "5dip",
       bottom : "10dp",
       width : "98%",
   });
    
   mapContainer.add(mapview);
   win.open();

1. Run code on pre Jelly Bean device. 2. With zOrderOnTop not set, you should see a black area where the map is for ~200ms before map renders. 3. With zOrderOnTop set to true, you should NOT see the black area. You should NOT see myLocation button, as well as zoom buttons.

Farouk Mokrani 2014-05-12

I have the same issue any solution for this problem ?

JSON Source