yeungyl0726

Setting zoom level problem

Discussion created by yeungyl0726 on Aug 9, 2011
Latest reply on Aug 10, 2011 by yeungyl0726
Recently I'm planning to write a web site which containing 2 tab, Menu(tab1) and Map(tab2).
But I face a problem when I try to write it.
When I run the program with VS2010, and then click the map tab(tab2), that the map zoom to maximize level, so that "map data not yet available" message occur. I need to set the zoom level manually...
Following is the code, can anybody suggest a solution, so that it can automatically set to e.g. level 5 when I click the map tab?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Testing</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"  djConfig="parseOnLoad: true"></script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>
    <script type="text/javascript">
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        // Map
        dojo.require("esri.map");
        dojo.require("esri.dijit.AttributeInspector-all");
     </script>
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
     <script type="text/javascript">
         var map;
         var Layer;

         function init() {
             //esri.config.defaults.io.proxyUrl = "proxy.ashx";
             var initalExtent = new esri.geometry.Extent({ "xmin": -13188594, "ymin": 4084405, "xmax": -13173402, "ymax": 4095030, "spatialReference": { "wkid": 102100} });
             map = new esri.Map("map", { extent: initalExtent });

             var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
             map.addLayer(basemap);
             map.setLevel(5);

             Layer = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/Geology/FeatureServer/9", {
                                            mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                                            outFields: ["station_id","lithology_type","metamorphic_facies","geomodifications"]
                                            });
             Layer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol());           
        map.addLayers([Layer]);
       

        var resizeTimer;
        dojo.connect(map, 'onLoad', function (theMap) {
            dojo.connect(dijit.byId('map'), 'resize', function () {  //resize the map if the div is resized
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function () {
                    map.resize();
                    map.reposition();
                }, 500);
            });
           
        });
    }
        dojo.addOnLoad(init);
     </script>
</head>

<body class="claro">
    <div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height:600px;" doLayout="false">
        <!--Form-->
         <div dojoType="dijit.layout.ContentPane" title="Menu" style="width: 100%; height:500px;">          
          </div>
             
         <div id="MapTab" dojoType="dijit.layout.ContentPane" title="Map" style="width: 100%; height:500px;" >
             <div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="Div1">
                <!--Map Menu-->
                <div id="MapMenu" dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">
                </div>

                <!--Map-->
                <div id="map" dojoType="dijit.layout.ContentPane" splitter="true" region="center" style="overflow:hidden;">
                </div>
            </div>
        </div>
</body>
</html>

Outcomes