Maps in Container Dijits

[GlenReid]

Kind of a follow up to this old post:

http://forums.esri.com/Thread.asp?c=158&f=2396&t=277953

Instead of a hard coded map size, I have a full map.  My problem has to do with the browser resize.  The active tab is based on a passed argument and the active tab's map is initialized with the dojo connect resize that you see in the samples.  The initial map's resizing works fine.

function initMap(map) {
 switch (map) {
  case "daily":
   dailyMap = new esri.Map("dailyMapDiv", {extent:initExtent, logo:false});
   dailyMap.addLayer(streets);
   var dailyResizeTimer;
   dojo.connect(dailyMap, 'onLoad', function() {
    dojo.connect(dijit.byId('dailyMapDiv'), 'resize', function() {
     clearTimeout(dailyResizeTimer);
     dailyResizeTimer = setTimeout(function() {
      dailyMap.resize();
      dailyMap.reposition();
     }, 500);
    });
   });
   break;

  case "monthly":
   monthlyMap = new esri.Map("monthlyMapDiv", {extent:initExtent, logo:false});
   monthlyMap.addLayer(satellite);
   var monthlyResizeTimer;
   dojo.connect(monthlyMap, 'onLoad', function() {
    dojo.connect(dijit.byId('monthlyMapDiv'), 'resize', function() {
     clearTimeout(monthlyResizeTimer);
     monthlyResizeTimer = setTimeout(function() {
      monthlyMap.resize();
      monthlyMap.reposition();
     }, 500);
    });
   });
   break;

  default:
          resisMap = new esri.Map("resisMapDiv", {extent:initExtent, logo:false});
   resisMap.addLayer(topo);
   var resisResizeTimer;
   dojo.connect(resisMap, 'onLoad', function() {
    dojo.connect(dijit.byId('resisMapDiv'), 'resize', function() {
     clearTimeout(resisResizeTimer);
     resisResizeTimer = setTimeout(function() {
      resisMap.resize();
      resisMap.reposition();
     }, 500);
    });
   });
 }
}

When another tab is selected, the new map is initialized, but the dojo.connect doesn't get fired and thus map resizing doesn't work.  Do I need to remove the old 'onload' from the first map even though it is a separate object?  Am even I able to do this?

Thanks,
Glen

[timgogl]

you might try the disconnect, see if that helps. i think you maybe able to consolidate your functions some...

this is rough, and untested... but hopefully it will give you an idea....

function initMap(map){
 var rTimer;
 var dijitID;

 if(mapLoad){
  dojo.disconnect(mapLoad);
  dojo.disconnect(con);
 }

 switch(map){
  case 'daily':
   dijitID = 'dailyMapDiv';
   newMap = new esri.Map("dailyMapDiv", {extent:initExtent, logo:false});
   newMap.addLayer(streets);
          break;

  case 'monthly':
   dijitID='monthlyMapDiv';
   newMap = new esri.Map("monthlyMapDiv", {extent:initExtent, logo:false});
   newMap.addLayer(satellite);
          break;

  default:
   dijitID='rsisMapDiv';
   newMap = new esri.Map("resisMapDiv", {extent:initExtent, logo:false});
   newMap.addLayer(topo);
 }

 var mapLoad = dojo.connect(newMap,'onLoad',function(){
  var con = dijit.byId(dijitID),'resize',function(){
   clearTimeout(rTimer);
   rTimer = setTimeout(function(){
    newMap.resize();
    newMap.reposition();
   },500);
  });
 });
}

so if the connection exsists (mapLoad) it dojo disconnects it and the resize connection.

heh.. hrm.. gotta go see if i have the correct syntax for the disconnect. but i think it is right.

yeah. its correct.

also, if you want to keep all seperate functions for the different maps, you could add the disconnect as the last line of code to execute in each connection.

[GlenReid]

Thanks for the suggestion.  I took your code and tweaked it a little to get it working.  Like mine first example, the resize works on the initial map, but any subsequent map doesn't get into the dojo.connect for mapLoad:

var mapLoad, newMap, con;

function initMap(map){
 var rTimer;
 var dijitID;

 if (mapLoad){
  dojo.disconnect(mapLoad);
  dojo.disconnect(con);
 }

 switch(map){
  case 'daily':
   console.log("daily");
   dijitID = 'dailyMapDiv';
   newMap = new esri.Map("dailyMapDiv", {extent:initExtent, logo:false});
   newMap.addLayer(streets);
          break;

  case 'monthly':
   console.log("monthly");
   dijitID='monthlyMapDiv';
   newMap = new esri.Map("monthlyMapDiv", {extent:initExtent, logo:false});
   newMap.addLayer(satellite);
      break;

  default:
   console.log("resis");
   dijitID='resisMapDiv';
   newMap = new esri.Map("resisMapDiv", {extent:initExtent, logo:false});
   newMap.addLayer(topo);
 }

 mapLoad = dojo.connect(newMap, 'onLoad', function(){
   con = dojo.connect(dijit.byId(dijitID), 'resize', function() {
   clearTimeout(rTimer);
   rTimer = setTimeout(function(){
    newMap.resize();
    newMap.reposition();
   },500);
  });
 });
}