Results 1 to 8 of 8

Thread: understanding rendering map the 2nd time

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    52

    Default understanding rendering map the 2nd time

    RESOVLED

    Hello,

    I just cannot seem to figure out why following code does not work 2nd time :

    in controller :
    Code:
        showmap: function(options){
            this.mapPanel = this.render({
                xtype: 'LocationsMapView'
            });
            this.application.viewport.setActiveItem(this.mapPanel, {type:'fade'});
            this.myOptions = {
                zoom: 10,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            this.map = new google.maps.Map(document.getElementById("mapPanelId"), this.myOptions);
            this.geo = new Ext.util.GeoLocation({
                autoUpdate: false,
                allowHighAccuracy:true
            });
            this.geo.on(
                'locationupdate',
                function(){
                    this.centerLatLng = new google.maps.LatLng(this.geo.coords.latitude, this.geo.coords.longitude);
                    this.map.setCenter(this.centerLatLng)
                },
                this);
            this.geo.updateLocation();
    }
    view panel :
    Code:
    MyApp.views.LocationsMapView = Ext.extend(Ext.Panel, {
          layout: 'fit',
          dockedItems: [{
                xtype:'toolbar',
                dock: 'top',
                items: [.....]
          }],
          items:[{
               xtype:'panel',
               id:'mapPanelId'
          }]
    });
    Ext.reg('LocationsMapView', AFCApp.views.LocationsMapView);
    I've tried to wrap the view panel configurations in initComponent with same results.
    So I'm trying to setActiveItem the panel with id, then use DOM to proceed with googlemap API, using coordinates from Ext.util.GeoLocation.

    Any help would be greatly appreciated. Thank you.
    Last edited by won.rhee; 29 Nov 2011 at 4:59 PM. Reason: resovled

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448

    Default

    Where is it not working?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    52

    Default

    So when "showmap" method is dispatched, it works and shows map just fine.
    firsttime_shows_map.jpg


    But when "showmap" is dispatched 2nd time, it shows like this: (DOES NOT SHOW MAP)
    secondtime_no_map.jpg


    Quote Originally Posted by mitchellsimoens View Post
    Where is it not working?
    I was thinking maybe second time "showmap" method is called, DOM was not ready for google.maps.Map().
    Another thought was maybe Ext.util.GeoLocation() was not firing. So i've played around with timeout and maximumAge.
    I've tried alot of things... Using Ext.Map wrapped by Ext.Panel, rather than using Ext.Panel with id wrapped by Ext.Panel... If I used Ext.Map, map will always go back to Palo Alto even if i used useCurrentLocation: true. First time does work correctly as well, just not second time and any subsequent calls. I think this is a different issue from what I've reading.

    I really appreciate taking time to look into my question. Thank you.

  4. #4

    Default

    Hi won rhee
    Thanks for answer 'Map not rendering correctly',
    I have the same problem, at first the map works well, but when I open the map again, I can see only a piece of map. I can't understand how can fail the same code.
    , ,

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    52

    Default

    Quote Originally Posted by dontbugme View Post
    Hi won rhee
    Thanks for answer 'Map not rendering correctly',
    I have the same problem, at first the map works well, but when I open the map again, I can see only a piece of map. I can't understand how can fail the same code.
    , ,
    After trying out several things, I believe following fixed this issue for me.
    I had to destroy the map panel then render it again.

    Code:
            this.mapPanel = this.render({
                xtype:'LocationsMapView',
                listeners:{
                    deactivate: function(p){
                        p.destroy();
                    }
                }
            });
    In order to get deactivate listener, I had to use initComponent and put all the dockeditems and items in the map panel. There is another forum post that mentioned this but cant find it right now.

    I also ditched Ext.util.GeoLocation and just used navigator.geolocation.getCurrentLocation with {enableHighAccuracy:true,maximumAge:1000,timeout:10000} as PositionOptions.

  6. #6

    Default

    I've followed your idea to destroy the object.
    I have a button 'close', I think that is similar as your listener
    But I don't understand the parameter 'p'.

    Code:
    aplica.views.detail = Ext.extend(Ext.Panel, {
        ...
        initComponent: function () {
     ...
            this.dockedItems = [
        {
                    xtype: 'button',
                    text: 'Mapa',
                    handler: function () {
         
                      if (map) map.destroy(); <<<??
         
                       var map = new Ext.Map({
                            title: 'Map',
                            useCurrentLocation: true,
                            mapOptions: {
                                zoom: 13
                            }
                        });
    
                        if (!this.popup) {
          
                            var popup = this.popup = new Ext.Panel({
                                cls: "x-simulator-popup",
                                floating: true,
                                modal: true,
                                centered: true,
                                width: "90%",
                                height: "80%",
                                scroll: 'vertical',
                                layout: 'fit',
                                dockedItems: [
                                  map,
                                   {
                                    dock: 'bottom',
                                    xtype: 'toolbar',
                                    layout: {
                                        type: 'vbox',
                                        pack: 'center',
                                        align: 'stretch'
                                    },
                                    items: [{
                                        xtype: 'button',
                                        ui: 'decline',
                                        text: 'Close',
                                        handler: function () {
                                           //map.destroy();  <<<?
                                            popup.hide('fade');
                                        }
                                    }]
                                }]
                            });
                        }
         this.popup.show('pop');

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    52

    Default

    'p' just points to 'this' so in my example, it's just referring to this.mapPanel :
    from Sencha Doc API 1.1

    deactivate( Ext.Component this )
    Fires after a Component has been visually deactivated.
    Parameters
    - this : Ext.Component


    In your example as handler on Ext.Button, its referring to clicked Ext.Button:
    So in your code map.destroy() would work just fine, I would think as long as you have 'map' instance
    I'm not much of a developer. But hopefully it helps. Below is handler from Ext.Button.

    handler : Function
    A function called when the button is clicked (can be used instead of click event). The handler is passed the following parameters:
    • b : ButtonThis Button.
    • e : EventObjectThe click event.




  8. #8

    Default

    Thanks for your attention won rhee

    I resolved the problem using one map (once created), so I don't need destroy and create other map with other values. I only change the values in the used map.

Posting Permissions

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