[CLOSED] Map markers are not drawn when not in the first position of a tabPanel

[Trevor.S]

Sencha Touch version tested:

0.93

only default ext-all.css




Platform tested against:

iOS 4
Android 2.1
Android 2.2


Description:

When a map is contained in a tab in a tabPanel, if it is in a position other than the first, the markers do not appear on the map


Test Case:
Map first in list, thus markers appear



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
fullscreen: true,
onReady: function() {
var position = new google.maps.LatLng(39.5, -98.35);
var gatech = new google.maps.LatLng(33.778463,-84.398881);
var mapdemo = new Ext.Map({
title: 'Map',
iconCls: 'user',
mapOptions: {
center: position,
zoom: 3,
},
listeners: {
single: true,
activate: function(){
var gatechmarker = new google.maps.Marker({
position: gatech,
map: mapdemo.map
});
}
},
});
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
defaults: {
scroll: 'vertical'
},
items: [mapdemo,
{
title: 'About',
html: '<h1>Testing</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card1'
},

{
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}]
});
}
});


Map is second in list, so markers do not appear



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
fullscreen: true,
onReady: function() {
var position = new google.maps.LatLng(39.5, -98.35);
var gatech = new google.maps.LatLng(33.778463,-84.398881);
var mapdemo = new Ext.Map({
title: 'Map',
iconCls: 'user',
mapOptions: {
center: position,
zoom: 3,
},
listeners: {
single: true,
activate: function(){
var gatechmarker = new google.maps.Marker({
position: gatech,
map: mapdemo.map
});
}
},
});
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
defaults: {
scroll: 'vertical'
},
items: [
{
title: 'About',
html: '<h1>Testing</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card1'
},
mapdemo,
{
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}]
});
}
});

[Jamie Avins]

It's not rendered yet, you shouldn't add them until afterrender.

[Trevor.S]

I added changed the listener to trigger on the afterRender, but still had the same issue. Below is code with the listener changed to afterRender, a delay of 1000 (I saw it recommended by evant in a different thread I believe) and an alert with "Testing" to show when the listener is triggering.

On chrome and on an Iphone you can see that if the listener triggers before ever focusing on the map tab, no marker will be added. If you switch to the Map before the listener triggers then the marker will appear. This gives me the idea of adding the markers when the tab is selected, but that seems like a workaround. Anyways the code I am using is posted below. Thank you for your reply.



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
fullscreen: true,
onReady: function() {
var position = new google.maps.LatLng(39.5, -98.35);
var gatech = new google.maps.LatLng(33.778463,-84.398881);
var mapdemo = new Ext.Map({
title: 'Map',
iconCls: 'user',
mapOptions: {
center: position,
zoom: 3,
},
listeners: {
single: true,
delay: 1000,
afterRender: function(){
alert("Testing");
var gatechmarker = new google.maps.Marker({
position: gatech,
map: mapdemo.map
});
}
},
});
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
defaults: {
scroll: 'vertical'
},
items: [
{
title: 'About',
html: '<h1>Testing</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card1'
},
mapdemo,
{
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}]
});
}
});

[hendricd]

@Trevor --

We're working on a new render mechanism for the Map component that will publish an appropriate event with the Map object is indeed ready.

The afterrender event is going to be a bit early to interact with the map object in most cases, especially in Card layouts.