Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    23
    Vote Rating
    0
    Trevor.S is on a distinguished road

      0  

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

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


    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

    Code:
        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

    Code:
    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'
                }]
            });
        }
    });

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    23
    Vote Rating
    0
    Trevor.S is on a distinguished road

      0  

    Default


    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.

    Code:
    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'
                }]
            });
        }
    });

  4. #4
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @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.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


Similar Threads

  1. Google Map Markers
    By alexandercarter in forum Sencha Touch 1.x: Discussion
    Replies: 17
    Last Post: 9 May 2011, 5:50 AM
  2. Issue with Markers in a Map within a TabPanel
    By kru424 in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 2 Aug 2010, 6:47 AM
  3. OpenLayers map into a tabpanel
    By jimmy06200 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 15 Oct 2009, 2:04 AM
  4. [CLOSED] Button drawn out of its form panel
    By zaccret in forum Ext GWT: Bugs (1.x)
    Replies: 4
    Last Post: 10 Jun 2008, 9:54 PM

Thread Participants: 2