B1 maprender event does not fire, but painted event does

[bweiler]

The maprender event does not fire, but the painted event does.

Doesn't work:

mapView.on({'maprender': function(view) {

Works fine:

mapView.on({'painted': function(view) {

[Jamie Avins]

Can we get the config used to replicate this issue?

[bweiler]

This was easy to reproduce in a smaller test app. However, I still had to cut out extra stuff, so hopefully this still works.

When I use painted, it works. When I use maprender it doesn't fire.

Ext.Loader.setConfig({ 
    enabled: true 
}); 


Ext.application({
    name: 'Test',
    
    models: ['ContactModel'],
    stores: ['ContactListData'],
    views: ['Main', 'ContactList', 'Contact', 'Map'],
    controllers: ['ContactController'],


    launch: function() {
        console.log("Test application launched.");
    }
});

Ext.define('Test.controller.ContactController', {
    extend: 'Ext.app.Controller',
    
    config: {
        
        // Setup the listeners
        control: {
            'contactlistview': {
                painted: 'onRender'
            },
            'contactlistview list': {
                itemtap: 'onItemTap'
            },
            'contactlistview #SettingsButton': {
                tap: 'onSettings'
            }
        }
    },
    
    launch: function() {
        
        console.log('controller launch called');
        
        var main = Ext.create('Test.view.Main'),
            contacts = Ext.create('Test.view.ContactList'),
            mapview = this.buildMapView(),
                        Test.globals.application = this.getApplication();
        
        main.add(contacts);
        main.add(mapview);
        main.setActiveItem(mapview);
        
    },
        
    buildMapView: function() {
        
        var mapView = Ext.create('Test.view.Map', {flex: 1});
            //globals = Test.globals.mapGlobals;
        
        
        // Perform the map dependent initialization
        mapView.on({'maprender': function(view) {    
                console.log("maprender event");
            }
        });
        
        return mapView;
    }
});

Ext.define('Test.view.Map', {
    extend: 'Ext.Map',
    xtype: 'mapview',
    mixins: ['Ext.mixin.Observable'],
    //requires: ['Ext.mixin.Observable'],
    
    config: {
        layout: 'fit',
        //fullscreen: true,
        mapOptions: {
            disableDefaultUI: true,
            zoomControl: true,
            zoom: 10
        },
    },
    
    initialize: function() {
          this.enableBubble('location');
          this.enableBubble('geocode');
          this.enableBubble('popup');
    },
    getBubbleTarget: function() {


        var target = Test.globals.application;


            return target;
    }
});

[Jamie Avins]

The problem is you are trying to listen to the maprender event too late as maprender is done extremely early now to give people access to the map object as soon as possible. You should be able to just use mapView right after creation and have full access to it's API. If you still need to grab that event, you could do it the following way:

        var mapView = Ext.create('Test.view.Map', {
            flex: 1,
            listeners: {
                maprender: function() {
                    console.log("maprender event");
                }
            }
        });

Or you could extend the Map class and put the listener in initialize.

Let me know if you need further assistance.

[kingkong22]

I do have same problem but after dynamic create the map class, I found that it does not align center with the position that I've assigned on it. The marker will appear correctly but on top left and not the center part on the map.

[cyberwombat]

I concur with original poster - maprender does not fire - my code is same as yours Jamie but in B1 it stopped working.

[John2011]

I have the same problem. The "rendermap" event was no longer fired. I have replaced it with the "painted" event, however the map is not working properly.

One of the issues I am having is that the map is no longer centered on the center. Instead it seems to go to the far lower-right corner of the position I have set.

Also custom methods and variables attached to the map are no longer accessible, but I have been able to work around this by putting "config." in front of the method name.

MyApp.views.locationMap = Ext.create('Ext.Map', {
    id: 'locationMap',
    mapOptions: {
        center: MyApp.data.startPosition,
        zoom: MyApp.data.zoomLevel,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    positionIcon: null,
    infoBubble: null,
    markers: [],
    listeners: {
        painted: function(thisMap, map) {
            console.log('rendering map');
            console.log(MyApp.data.startPosition);
            thisMap.config.setPosition();
        }
    },
    setPosition: function() {
    },
    clearMarkers: function() {
    }
});

[bweiler]

Here's a workaround for centering the map:

// Perform the map dependent initialization
mapView.on({'painted': function(view) {
  ...  
  // Mark the user's location
  if (globals.location) {
     view.addMarker(globals.location);
     view.setMapCenter(globals.location);
  }
  ...

[bweiler]

[In reply to Jamie's post above]

This makes sense. The only way to capture the maprender event is to put the listener in the map configuration.

This should probably be clarified in the documentation for the maprender event.

Thanks