1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    8
    Vote Rating
    0
    aasanchez is on a distinguished road

      0  

    Default Map not rendering correctly

    Map not rendering correctly


    I'm trying to add a Map to a Panel. The panel has a Toolbar to display the title.
    Here is the code:

    Code:
     myhelloworld.ui.MyMap = Ext.extend(Ext.Panel,{
     
     	id:'myMapPanel',
    	fullscreen:true,
    	title:'My Map',
    	iconCls:'icon-mymap',
    	layout:'auto',
    	items:this.items,
    	
    	initComponent: function(){
    	
    		this.titlebar = new Ext.Toolbar({
    			title:'My Map',
    			dock:'top'
    		});
    		
    		this.map = {
    			xtype:'map',
    			id:'mymap',
    			fullscreeen:true,
            	title: 'My Loc.',
           	//getLocation: true,   // Gets user's current location
            	mapOptions: {        // Used in rendering map
             	zoom: 12
            	}        
        		};//eo map panel
    		
    		this.items = [this.titlebar, this.map];	
    		
    		myhelloworld.ui.MyMap.superclass.initComponent.apply(this,arguments);
    	
    	}, //eo initComponent
     
     	onLoad: function(){
     		console.log('OnLoad MyMap called...');
      	}
     
     });//eo MyMap Class
    When the app renders and I click on the icon to take me to the map, the map looks like this:
    http://alvarosanchez.com/tempUpload/map.png

    If I resize the browser window (while testing) even just a little then the whole map shows.
    Any ideas?
    Thanks !

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,146
    Vote Rating
    673
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You probably want something more like this:

    Code:
    myhelloworld.ui.MyMap = Ext.extend(Ext.Panel, {
    
        id: 'myMapPanel',
        fullscreen: true,
        title: 'My Map',
        iconCls: 'icon-mymap',
        layout: 'fit',
        
        initComponent: function(){
        
            this.titlebar = new Ext.Toolbar({
                title: 'My Map',
                dock: 'top'
            });
            
            this.map = {
                xtype: 'map',
                id: 'mymap',
                fullscreeen: true,
                title: 'My Loc.',
                //getLocation: true,   // Gets user's current location
                mapOptions: { // Used in rendering map
                    zoom: 12
                }
            };//eo map panel
            this.items = [this.map];
            this.dockedItems = [this.titleBar];
            
            myhelloworld.ui.MyMap.superclass.initComponent.apply(this, arguments);
            
        }, //eo initComponent
        onLoad: function(){
            console.log('OnLoad MyMap called...');
        }
        
    });//eo MyMap Class
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    8
    Vote Rating
    0
    aasanchez is on a distinguished road

      0  

    Default


    Evan,
    Thanks for the help, but I tried this already and what happens is that the tabBar at the bottom disappears.

    Here is the code I'm using for the tabbed component:

    Code:
    myhelloworld.App = Ext.extend(Ext.TabPanel,{
    
    	id:'tabpanel',
    	fullscreen:true,
    	ui:'black',
    	tabBar: {
    		centered:true,
    		dock:'bottom',
    		layout: {pack:'center'}
    	},
    	animation:'slide',
    	scroll:false,
    	//monitorOrientation:true,
    	
    	initComponent: function(){		
    
    		// components
    		this.myInfo = new myhelloworld.ui.MyInfo();
    		this.myMap = new myhelloworld.ui.MyMap();
    
    		this.items = [
    			this.myInfo,
    			this.myMap			
    		];
    
    		myhelloworld.App.superclass.initComponent.apply(this,arguments);
    
    		// events
    		this.myInfo.on('activate',this.onMyInfoActivate,this);
    		this.myMap.on('activate',this.onMyMapLoad,this);
    
    	},
    
    	getTitleBar: function(){
    		return this.titleBar;
    	},
    
    	onMyInfoActivate: function(){
    		this.myInfo.onLoad();		
    	},
    
    	onMyMapLoad: function(){
    		this.myMap.onLoad();
    	}
    
    });

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    1
    Vote Rating
    0
    j2h is on a distinguished road

      0  

    Exclamation Same problem here

    Same problem here


    I have the same problem as mentioned above: the map is rendered with parts in grey (and a wrong position) and becomes healthy by reload (which is a problem on mobile).
    I assumed that css is responsible (because of the wrong position) but it is not (tried without custom css).

    My code looks quite similar to the posted ones:

    dummy.views.dummy = Ext.extend(Ext.Container, {
    id: 'view-fm',
    fullscreen: true,
    layout: {
    type: 'vbox',
    align: 'stretch'
    },
    items: [{
    width: '100%',
    height: '46pt',
    xtype: '...'
    },{
    flex: 2,
    xtype: 'map',
    mapOptions : {
    zoom: 5
    }
    }]
    });
    Attached Images
    Last edited by j2h; 30 Jun 2011 at 12:01 PM. Reason: neutralize code

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default map

    map


    Someone has known how to fix it?

  6. #6
    Sencha User
    Join Date
    Jun 2011
    Posts
    52
    Vote Rating
    0
    won.rhee is on a distinguished road

      0  

    Default


    I remember I had similar problems using TabPanel.
    Now I am attaching the bottom "tabbar" wrapped in Ext.Panel in my Viewport, using card layout.
    Then using setActiveItem, I render views I want, each using layout: fit so that it'll "fit" into items section of Viewport.
    Have you tried "layout:'fit'" in your MyMap ui?

    Code:
     myhelloworld.ui.MyMap = Ext.extend(Ext.Panel,{
     
         id:'myMapPanel',
        fullscreen:true,
        title:'My Map',
        iconCls:'icon-mymap',
        layout:'auto', //TRY layout:'fit'
        items:this.items,
        
        initComponent: function(){
        
            this.titlebar = new Ext.Toolbar({
                title:'My Map',
                dock:'top'
            });
            
            this.map = {
                xtype:'map',
                id:'mymap',
                fullscreeen:true,
                title: 'My Loc.',
               //getLocation: true,   // Gets user's current location
                mapOptions: {        // Used in rendering map
                 zoom: 12
                }        
                };//eo map panel
            
            this.items = [this.titlebar, this.map];    
            
            myhelloworld.ui.MyMap.superclass.initComponent.apply(this,arguments);
        
        }, //eo initComponent
     
         onLoad: function(){
             console.log('OnLoad MyMap called...');
          }
     
     });//eo MyMap Class

Similar Threads

  1. [FIXED-207] Ext.Map: wrapped map unavailable in afterRender
    By cnelissen in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 8 Sep 2010, 7:05 PM
  2. Map not resizing or positioning correctly
    By gevely in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 4 Mar 2009, 11:03 PM
  3. Map not resizing or positioning correctly
    By gevely in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 23 Feb 2009, 1:21 AM
  4. Panel in tab + google map -> rendering problem
    By Ujoux in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 8 Nov 2008, 3:51 AM
  5. JasonReader how to correctly map these fields?
    By ntulip in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 11 Feb 2008, 12:39 AM

Thread Participants: 4

Tags for this Thread