MapOverview

Udaya_BhaskerCheerala · ‎11-18-2010

Hi All,
Iam trying to add overview to map with the the below code. Iam not able to bind map to overview window. can anyone please help me?

Thanks,
Uday

<!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"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Navigation toolbar</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
      //@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css";
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; }
      .zoomprevIcon { background-image:url(images/nav_previous.png); width:16px; height:16px; }
      .zoomnextIcon { background-image:url(images/nav_next.png); width:16px; height:16px; }
      .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; }
      .deactivateIcon { background-image:url(images/nav_decline.png); width:16px; height:16px; }

      #footer
     {
      margin:2px;
      padding: 2px;
      background-color:white; color:#2a3537;
      border: solid 2px #79663b;
      font-size:10pt; text-align:center;
      height: 30px;
      }

/*Example of a class selector, using a period in front of an HTML elment
      allows you to specify a style for multiple elements. All elements with
      a class attribute set to the specified value will have this style applied.*/
      .shadow {
        padding:8px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-box-shadow: 0px 6px 3px -3px #888;
        -webkit-box-shadow: 0px 6px 3px -3px #888;
        box-shadow: 0px 6px 3px -3px #888;
        background-color:white; border: solid 4px #80a8c1;
      }
</style>
<script type="text/javascript">djConfig = { parseOnLoad:true }</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>

<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dijit.layout.BorderContainer");
dojo.require("esri.map");
dojo.require("esri.toolbars.navigation");
dojo.require("dijit.form.Button");
dojo.require("dijit.Toolbar");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.dijit.OverviewMap");

var map, navToolbar;
function init() {

     var initExtent = new esri.geometry.Extent({
          "xmin": -8573661,
          "ymin": 4705838,
          "xmax": -8572214,
          "ymax": 4706543,
          "spatialReference": {
            "wkid": 102100
          }
        });

        esriConfig.defaults.map.sliderLabel = null;
   esriConfig.defaults.map.slider = null;
        map = new esri.Map("map", {
          extent: initExtent
        });
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"));

        navToolbar = new esri.toolbars.Navigation(map);
        dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

//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 basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
        map.addLayer(basemap);
        dojo.connect(map, "onLoad", function(map) {
          dojo.connect(dijit.byId('map'), 'resize', resizeMap);
          var overviewMap = new esri.dijit.OverviewMap({map: map},dojo.byId("overviewDiv"));
          overviewMap.startup();
        });
      }

function extentHistoryChangeHandler()
      {
        dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
        dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();

      }

function resizeMap() {
        //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_faq.htm
        var resizeTimer;
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
        }, 500);
      }

      dojo.addOnLoad(init);
</script>
</head>

<body class = "claro">
    <div id="navToolbar" dojoType="dijit.Toolbar">
      <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zoom In</div>
      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
      <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToFullExtent();">Full Extent</div>
      <div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
      <div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
      <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Pan</div>
      <div dojoType="dijit.form.Button" id="deactivate" iconClass="deactivateIcon" onClick="navToolbar.deactivate()">Deactivate</div>

<div id="map" dojotype="dijit.layout.ContentPane" class="shadow" region="center" style="position:relative; overflow:hidden;">
<div id="ovWin" class="shadow" style="position:absolute; left:5px; top:5px; z-Index:998; width:200px;height:200px; ">
<div id="overviewDiv" style="width:100%;height:100%;"></div>
</div>
</div>
</div>

<div id="footer" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom">
this is the footer section
</div>

</body>

</html>