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
