Results 1 to 8 of 8

Thread: Access the map instance before it is rendered?

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1634 in a recent build.
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    35
    Vote Rating
    1
      0  

    Exclamation Access the map instance before it is rendered?

    Hi everyone,

    Look at this code:

    Code:
    var MyClientInfo;var tabpanel; 
    var mapdemo; 
    
    function initialize() {
        var position = new google.maps.LatLng(26.23122,50.51097);
        var marker = new google.maps.Marker({
                     position: position,
                     title : 'Sencha HQ'
                });
        mapdemo.map.panTo(position);            
        marker.setMap(mapdemo);
        mapdemo.maps.addOverlay(marker);      
    }
    
    
    
    
    Ext.application({
        name: 'MyApp',
        launch: function() {
    
    
    
    
            var position = new google.maps.LatLng(37.44885,-122.158592);
            infowindow = new google.maps.InfoWindow({
                    content: 'Sencha Touch HQ'
                });
                
            mapdemo = new Ext.Map({
                mapOptions : {
                    center : new google.maps.LatLng(37.381592, -122.135672),  //nearby San Fran
                    zoom : 12,
                    mapTypeId : google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                            style: google.maps.NavigationControlStyle.DEFAULT
                        }
                },
    
    
    
    
                listeners : {
                    maprender : function(comp, map){
                        var marker = new google.maps.Marker({
                                         position: position,
                                         title : 'Sencha HQ',
                                         map: map
                                    });
    
    
    
    
                                    google.maps.event.addListener(marker, 'click', function() {
                                         infowindow.open(map, marker);
                                    });
                        setTimeout( function(){ map.panTo (position); } , 1000);
                    }
                }
            });
                       
            tabpanel = Ext.create("Ext.tab.Panel", {
                xtype:'tabpanel',
                id: 'tabpanel',            
                fullscreen: true,
                tabBarPosition: 'bottom',
                items: [
                    {
                        title: 'Home',
                        iconCls: 'MyHome',
                        scroll: 'vertical',
                        html: [ "My HTML 1"    ], 
                        dockedItems: [{
                            xtype: "toolbar",
                            docked: 'top',
                            items: [ 
                                {
                                    xtype: "spacer", 
                                },
                                {
                                    xtype: "button", 
                                    text: "Refresh", 
                                    handler: function () { 
                                        // function
                                    }                                
                                }
                            ]
                        }]                            
                    },               
                    {
                        xtype: 'list',
                        title: 'Snapshot',
                        iconCls: 'Snapshot',
                        itemTpl: "<b>{title}:</b> {desc}",
                        store: {
                            fields: ['title', 'desc'],
                            data: [
                                {title: 'Name', desc: "Sencha Name"},
                                {title: 'Email', desc: "Sencha Email"},
                                {title: 'Mobile 1', desc: "Sencha Mobile 1"},
                                {title: 'Mobile 2', desc: "Sencha Mobile 2"}
                            ]
                        }
                    },
                    {
                        title: 'History',
                        iconCls: 'History',
                        html: [ "My HTML 2" ].join("")
                    },  
                    {
                        id: 'ViolationsTab',
                        title: 'Violations',
                        iconCls: 'Violations',
                        scroll: 'vertical',
                        badgeText: "5",
                        html: [ "<div id='TblContainerV'>My HTML 3</div>" ], 
                        dockedItems: [{
                            xtype: "toolbar",
                            docked: 'top',
                            items: [ 
                                {
                                    xtype: "spacer", 
                                },
                                {
                                    xtype: "button", 
                                    text: "Refresh", 
                                    handler: function () { 
                                        //Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
                                    }                                
                                }
                            ]
                        }]                            
                    },                
                    {
                        title: 'Map',
                        iconCls: 'Map',
                        layout: 'fit',
                        
                        items: [mapdemo],
                        dockedItems: [{
                            xtype: "toolbar",
                            docked: 'top',
                            items: [ 
                                {
                                    xtype: "spacer", 
                                },
                                {
                                    xtype: "button", 
                                    text: "Refresh", 
                                    handler: function () { 
                                        //Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
                                        //initialize();
                                    }                                
                                }
                            ]
                        }]
                    }                                                
                ]
            }).setActiveItem(0);     
        }    
    });
    Map created fine, but when I try to use Map instance (mapdemo), it does NOT work.
    I need to use this instance to deal with map: Add markers, Overlays, ...etc.

    When I call this function:

    Code:
    function initialize() {
        var position = new google.maps.LatLng(26.23122,50.51097);
        var marker = new google.maps.Marker({
                     position: position,
                     title : 'Sencha HQ'
                });
        mapdemo.map.panTo(position);            
        marker.setMap(mapdemo);
        mapdemo.maps.addOverlay(marker);      
    }
    I got the following error:
    TypeError: 'undefined' is not an object (evaluating 'mapdemo.map.panTo')
    Attached snapshot.

    BTW, I tried this:

    Code:
            var panel  = tabpanel.getComponent(0),
            index  = tabpanel.getItems().indexOf(panel),
            tabBar = tabpanel.getTabBar(),
            HomeObj   = tabBar.getItems().getAt(index);
            console.log(HomeObj);
    But it didn't work . I changed the Zero index to Map Component index, but no luck.

    How I can proceed to continue coding with the Map?
    Any available tutorial?

    Regards,
    Attached Images Attached Images

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      0  

    Default

    Instead of using the map property, use getMap() on the Ext.Map instance.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    9
    Vote Rating
    0
      0  

    Default

    Function that does something with map (adding marker for example):

    Code:
    /* mappanel - Ext.Map instance*/
    function addMarker(mappanel) {
        var map=mappanel.getMap(),
        position = new google.maps.LatLng(26.23122,50.51097),
        marker = new google.maps.Marker({
            position: position,                 
            title : 'Sencha HQ',                 
            icon:'http://a3.twimg.com/profile_images/1089012240/sencha-logo_normal.png'
        });
        map.panTo(position);
        marker.setMap(map);
    }

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    35
    Vote Rating
    1
      0  

    Default

    Hi every1,

    I tried what you suggest both, but getting the Object in only one condition:

    - When I create the map in the first Tab of the panel, and activate that tab initially.
    - Or, visit the map tab and wait it to load, after that executing the code of adding markers for example.

    Both ways is NOT applicable for my application, any suggestions?

    Thanks for your help.

    Regards,

  5. #5
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Vote Rating
    7
      0  

    Default

    This is because the Map instance is not created until the Map component is actually rendered.

    We done this because of sizing problems, but I've been told that we might be able to fix it now. So I'm opening it as a ticket.

    Thanks.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    9
    Vote Rating
    0
      0  

    Default

    May be 'maprender' event will be helpfull. ?o fire 'maprender' event, you need to set Ext.Map panel as active item in your tabpanel, after that you can set as active item something else. No need to wait. Unfortunately there is no autoRender.
    P.S
    There is private method 'renderMap()' that fire 'maprender' event.

  7. #7
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    Using the maprender event will work for now. I have also changed the code a bit so you will be able to use to use the map instance much earlier and still avoids TOUCH-1030 which happens when the map is rendered offscreen.

    Sencha Inc

    Jamie Avins

    @jamieavins

  8. #8
    Sencha User
    Join Date
    Nov 2010
    Posts
    9
    Vote Rating
    0
      0  

    Default

    Wonderfull! Now I can clear my map-render hooks . Thanks!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •