Two tabs and a common menu bar

SamirGambhir — Wed, 04 Jul 2012 15:54:41 GMT

Hi,
My application has two tabs with base map on each. It also has a menu bar with a number of items. I would like these items to perform specific actions depending on which tab is in focus. I would like to focus on overview map to begin with. Right now the overview map responds to action on the first tab only. If the second tab is clicked and the basemap is zoomed in or out, the overview map does not respond to this action. Here is the relevant code:

HTML code:
...
<div dojoType="dijit.form.DropDownButton">
      <span><strong>Overview Map</strong></span>
        <div dojoType="dijit.TooltipDialog" id="tooltip2" style="width:inherit;">
          <div id="OVMapM"></div>
          <div id="OVMapA"></div>
        </div>
      </div>
...

CSS code:
...
#OVMapM, #OVMapA {
width:50px;height:50px;margin-left:2px;position:relative; display:none;
}
...

JavaScript code:
...
function init(){
...
var selectChildEvent = dojo.subscribe("projectTabContainer-selectChild", null, onSelectChild);
        dijit.byId('projectTabContainer').selectChild(dijit.byId('analysisTab'));
        dijit.byId('projectTabContainer').selectChild(dijit.byId('mappingTab'));
        dojo.unsubscribe(selectChildEvent);
...
}

function onSelectChild(page) {
      switch(page.id){
        case 'mappingTab':
          mapM = new esri.Map("mapM", {extent : iniExtentM});
          StreetMapM = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
          StreetMapM.setOpacity(0.60);
          mapM.addLayer(StreetMapM);
          ovExtentM = new esri.geometry.Extent({"xmin": 7256469.033685486, "ymin": 607780.9570028302, "xmax": 10835388.124604845, "ymax": 4634224.864539183, "spatialReference":{"wkid":102100}});
          ovMapM = new esri.Map("OVMapM", {extent: ovExtentM, slider:false});


          var StreetMapOvM = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
          ovMapM.addLayer(StreetMapOvM);

          show('OVMapM');
          hide('OVMapA');

          dojo.connect(ovMapM, "onLoad", function() {ovMapM.disableMapNavigation();overViewBoxM(mapM.extent);});
          dojo.connect(ovMapM, "onClick", CenterMap);
          dojo.connect(mapM, "onExtentChange", overViewBoxM);
          break;
        case 'analysisTab':
          mapA = new esri.Map("mapA", {extent : iniExtentA});
          StreetMapA = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
          StreetMapA.setOpacity(0.60);
          mapA.addLayer(StreetMapA);
          ovExtentA = new esri.geometry.Extent({"xmin": 7256469.033685486, "ymin": 607780.9570028302, "xmax": 10835388.124604845, "ymax": 4634224.864539183, "spatialReference":{"wkid":102100}});
          ovMapA = new esri.Map("OVMapA", {extent: ovExtentA, slider:false});


          var StreetMapOvA = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
          ovMapA.addLayer(StreetMapOvA);

          show('OVMapA');
          hide('OVMapM');

          dojo.connect(ovMapA, "onLoad", function() {ovMapA.disableMapNavigation();overViewBoxA(mapA.extent);});
          dojo.connect(ovMapA, "onClick", CenterMap);
          dojo.connect(mapA, "onExtentChange", overViewBoxA);
          break;
      }
    }

function show(myDiv){
      var showDojo = dojo.byId(myDiv).style;
      if (showDojo.display="none"){
        showDojo.display="block";
      }
      else{
        showDojo.display="block";
      }
    }

    function hide(myDiv){
      var hideDojo = dojo.byId(myDiv).style;
      if (hideDojo.display="block"){
        hideDojo.display="none";
      }
      else{
        hideDojo.display="none";
      }
    }

I'll appreciate any suggestions,
Thanks
Samir

Re: Two tabs and a common menu bar

SamirGambhir — Mon, 16 Jul 2012 13:40:19 GMT

Hi,
This question has been viewed by many but no solutions so far. I understand it might be time-intensive to provide full solution or coding for this problem, but can somesuggest an approach to solve this problem?
Thanks
Samir

Re: Two tabs and a common menu bar

StephenLead — Tue, 17 Jul 2012 22:39:26 GMT

Hi Samir,

You could try posting this on www.stackoverflow.com as it may be more of a general internet question, rather than specific to the ArcGIS Server JS API.

Another approach is to simplify the problem by trying to get your buttons, menus and toolbars to interact with 2 divs on a page (eg, have two divs with a span each. Depending on which tab is in focus, update that span when you press a button).

Once that's working, you'll have a pattern which works for two maps on a map, and you can hook it up to the ArcGIS-specific functions.

Good luck,
Steve

Re: Two tabs and a common menu bar

SamirGambhir — Wed, 18 Jul 2012 17:42:40 GMT

Thanks Steve,
I have posted this question on stackoverflow.com
Samir

topic Re: Two tabs and a common menu bar in ArcGIS JavaScript Maps SDK Questions

Two tabs and a common menu bar

Re: Two tabs and a common menu bar

Re: Two tabs and a common menu bar

Re: Two tabs and a common menu bar