Problem
If you attempt to add any view to a Map View, the added view will not appear. As Titanium.Map.View decends from Titanium.UI.View, you should be able to add any view you want to (on top of) a Map View.
Expected behavior
A red square should appear in the bottom left corner of the map.
Actual behavior
The red square does not appear at all.
Testcase
Paste the following code into a new project's app.js file and run it using the Android 2.2 Google APIs emulator.
If you change "Ti.Map.createView" to Ti.UI.createView", the red square appears correctly.
{panel:title=app.js}
var win1 = Ti.UI.createWindow({
backgroundColor:'#fff',
exitOnClose:true,
navBarHidden:true,
layout:'vertical'
});
var map1=Ti.Map.createView({
mapType:Ti.Map.STANDARD_TYPE,
animate:true,
region:{latitude:37.423156, longitude:-122.084917,
latitudeDelta:0.01, longitudeDelta:0.01},
regionFit:true,
annotations:[Ti.Map.createAnnotation({
latitude:37.423156,
longitude:-122.084917,
image:'/images/MapPin.png'
})],
userLocation:true,
height:Ti.UI.Fill
});
win1.add(map1);
var square1=Ti.UI.createView({
height:20,
width:20,
backgroundColor:'red',
bottom:10,
left:10
});
map1.add(square1);
win1.open();
{panel}
Solution/Fix
{panel:title=app.js}
var win1 = Ti.UI.createWindow({
backgroundColor : '#fff',
exitOnClose : true,
navBarHidden : true,
//layout : 'vertical'
});
var map1 = Ti.Map.createView({
mapType : Ti.Map.STANDARD_TYPE,
animate : true,
region : {
latitude : 37.423156,
longitude : -122.084917,
latitudeDelta : 0.01,
longitudeDelta : 0.01
},
regionFit : true,
annotations : [Ti.Map.createAnnotation({
latitude : 37.423156,
longitude : -122.084917,
image : '/images/MapPin.png'
})],
userLocation : true,
height : Ti.UI.Fill
});
win1.add(map1);
var square1 = Ti.UI.createView({
height : 20,
width : 20,
backgroundColor : 'red',
bottom : 10,
left : 10,
//zIndex: 1
});
win1.add(square1);
win1.open();
{panel}
View Based Solution
{panel:title=app.js}
var win1 = Ti.UI.createWindow({
backgroundColor : '#fff',
exitOnClose : true,
navBarHidden : true,
//layout : 'vertical'
});
var viewbot = Ti.UI.createView({
});
win1.add(viewbot);
var map1 = Ti.Map.createView({
mapType : Ti.Map.STANDARD_TYPE,
animate : true,
region : {
latitude : 37.423156,
longitude : -122.084917,
latitudeDelta : 0.01,
longitudeDelta : 0.01
},
regionFit : true,
annotations : [Ti.Map.createAnnotation({
latitude : 37.423156,
longitude : -122.084917,
image : '/images/MapPin.png'
})],
userLocation : true,
height : Ti.UI.Fill
});
viewbot.add(map1);
var square1 = Ti.UI.createView({
height : 20,
width : 20,
backgroundColor : 'red',
bottom : 10,
left : 10,
//zIndex: 1
});
viewbot.add(square1);
win1.open();
{panel}
The fix here is simple. There is no bug. Do not try and add the square1 to the map view, instead add the square1 to the win1 just as map1 is. Your layout property for the win1 is set to vertical, this will drop the red square below the map view and out of sight. That is why it is not visible. If you comment out the "vertical" property, you will see the red square in the correct position over map1.
Carter, your "fix" will not work universally. Keep in mind that the testcase in this ticket is a simplified example. If the MapView is in another less-than-fullscreen view, and that view has other elements in it that need to be arranged vertically, and we want the square positioned in/on the MapView (let's say right in the middle for example), then we have no way to accomplish this without a kludgy workaround of putting the MapView inside another absolute-layout view. This seems silly, because MapView decends from View, so we should be able to add anything to it we want...directly.
Shawn, As you know, the two mobile operating systems, iOS and Android, were designed slightly differently and thus work a bit differently. In iOS, every UI component is view based. For example, a button in iOS sits in a transparent view, just as the mapView sits in its own view. On android however, this works differently. A button is just a button, there is no view associated with it, it is its own entity. The same with the mapViews in android, it is its own entity. Just like you can't add a view to a button in android, you can't add views to mapViews in android. This is not our design, rather the native behavior of the android operating system. So to make your code more appropriate for cross-platform use, the method I posted above to overlay a view over a map is the best way. I hope this clears up your question and issue. Let me know if you still have any more questions. Carter PS: I added another test code that shows that if you manually create a view and put it in the window. Then add the mapView and overlay to it, the overlay will show as expected in both platforms. This confirms what I said in this comment.
Carter, thanks for the thorough explanation. You viewbot view is the current workaround I am using. Perhaps this bug ought to be modified then, to issue a console warning or error when an attempt is made to add another visual element to a MapView.
Your welcome Shawn. Yes, the name mapView is a bit misleading in that it seems as if you should be able to add views to it. But in general its usually good practice to have a parent view, such as viewbot, to add everything too so that you can have the most control over the behavior of a subset of views. Would you mind closing this jira ticket if you have no further problems? Thanks
Carter, I would close it if I could, but I don't have the power! Although I could also just edit this ticket to change it into a request for a console warning or error when an attempt is made to add another visual element to a MapView.
All set, I resolved the ticket and marked as invalid. Thanks for your patience with this.
Closing as per feedback from Shawn.