john.c.cartwright

problems w/ OverviewMap dijit when used in TabContainer

Discussion created by john.c.cartwright on Jan 22, 2011
Hello All,

I'm having a little trouble with esri.dijit.OverviewMap when used with a Map contained w/in a TabContainer.  The overview map does not align with the main map and the current map window does not show as an overlay w/in the overview map.

I've tried using margin, padding in the style attribute of the constructor w/o success.

A simple example page is listed below.  Any suggestions would be much appreciated.

Thanks!

--john

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>TabContainer Test</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriScalebar{
        padding: 20px 20px;
      }
     
      #map{
        padding:0;
      }
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
<script type="text/javascript">
     dojo.require("dijit.layout.BorderContainer");
     dojo.require("dijit.layout.ContentPane");
     dojo.require("esri.map");
     dojo.require("esri.dijit.Scalebar");
     dojo.require("dijit.layout.TabContainer");
  dojo.require("esri.dijit.OverviewMap");

  var globals = {};
 
  function init() {
   globals.layersLoaded = 0;  //varible to keep track of when all layers have been loaded.
      globals.loading = dojo.byId("loadingImg");  //loading image. id
      globals.initExtent = new esri.geometry.Extent({
          "xmin": -13632648.791420517,
          "ymin": 4542594.847435551,
          "xmax": -13621699.187118681,
          "ymax": 4546875.321019515,
          "spatialReference": {
              "wkid": 102100
          }
      });
      globals.map = new esri.Map("map", {
          extent: globals.initExtent
      });
   dojo.connect(globals.map, "onLoad", showLoading);
   dojo.connect(globals.map, "onZoomStart", showLoading);
   dojo.connect(globals.map, "onPanStart", showLoading);

      //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service   
      var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
      globals.map.addLayer(basemap);
   dojo.connect(basemap, "onUpdateEnd", hideLoading);
     
      //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
      //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
      var resizeTimer;
      dojo.connect(globals.map, 'onLoad', function(theMap) {
          var scalebar = new esri.dijit.Scalebar({
              map: globals.map,
              attachTo: "bottom-left"
          });
         
    var overviewMapDijit = new esri.dijit.OverviewMap({
     map: globals.map,
     attachTo:"bottom-right",
     width: 150,
     height: 120,
     visible: true,
     opacity: 0.3
    });
    overviewMapDijit.startup();
   
    dojo.connect(dijit.byId('map'), 'resize', function(){ //resize the map if the div is resized
              clearTimeout(resizeTimer);
              resizeTimer = setTimeout(function(){
                  globals.map.resize();
                  globals.map.reposition();
              }, 500);
          });
      });
  
   function showLoading() {
    esri.show(globals.loading);
    globals.map.disableMapNavigation();
    globals.map.hideZoomSlider();
   }
 
   function hideLoading(error) {
    globals.layersLoaded++;
    if (globals.layersLoaded === globals.map.layerIds.length) {
     esri.hide(globals.loading);
     globals.map.enableMapNavigation();
     globals.map.showZoomSlider();
     globals.layersLoaded = 0;
    }
   }
  
  } //end init function

 
  dojo.addOnLoad(init);
    </script>
  </head>
 
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
  <div id="center" dojotype="dijit.layout.ContentPane" style="overflow:hidden;" region="center">
   <div dojotype="dijit.layout.TabContainer" >
    <div id="welcome" dojotype="dijit.layout.ContentPane" title="Welcome" selected="true">
     Welcome
    </div>
    <div id="mapTab" dojotype="dijit.layout.ContentPane" title="Map" selected="false">
     <div id="map" dojotype="dijit.layout.ContentPane">
      <img id="loadingImg" src="images/loading.gif" style="position:absolute; right:512px; top:256px; z-index:100;" />
     </div>
    </div>
    <div id="optionsTab" dojotype="dijit.layout.ContentPane"  title="Options" >
     Options
    </div>
   </div>
     </div>
</div>
  </body>

</html>

Outcomes