Setting zoom level problem

yeungyeung · ‎08-09-2011

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">
        
         <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">
                
                <div id="MapMenu" dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">
                </div>

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

AxelSchaefer · ‎08-09-2011

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi_start.htm

map.setLevel(level) Sets the map to the specified level ID. Zooms to the new level based on the current map center point. Valid only with an ArcGISTiledMapService layer.

Or for example:

map.setExtent(esri.geometry.getExtentForScale(map, scale), fit?)

Second: Don't mess the JS-API with the dojo library. Dojo 1.6.1 is shipped with the JS-API. You refer to:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>

and

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>

and your CSS is coming from:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>

You only need:

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css">

and

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>

It's possible to use another DOJO version with the JS-API but I guess you don't need that yet. I advice you to read the Concepts at: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm and check the basic examples in the documentation.

Hope that helps
Axel

yeungyeung · ‎08-09-2011

Thank you for your replying. I solved the problem of zoom level.

But I still have a question. That is when I don't contain the following code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>

then dijit.layout.TabContainer and BorderContainer etc will not function normally... Therefore, is my code having some bug?

JeffPace · ‎08-10-2011

Thank you for your replying. I solved the problem of zoom level.

But I still have a question. That is when I don't contain the following code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>

then dijit.layout.TabContainer and BorderContainer etc will not function normally... Therefore, is my code having some bug?

Since the javascript API includes dojo, you don't need to call the full path to a standalone dojo.

all you need is

dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.BorderContainer ");

etc..

yeungyeung · ‎08-10-2011

Thank you for your reply. All problem solved.