map.setExtent problem

JustinAnderson · ‎10-31-2011

I'm running into the following issue, and would be very appreciative if someone can help out.
Code is as follows:

var map;

        function Init() {

            map = new esri.Map("mapDiv");
            newMap = new esri.layers.ArcGISDynamicMapServiceLayer("http://devone/ArcGIS/rest/services/lxvi/MapServer/");

            map.addLayer(newMap);

        }

        function myzoom() {
            var axtent = new esri.geometry.Extent(6008950, 2066586, 6008550, 2066186, new esri.SpatialReference({ "wkid": 2227 }));
            map.setExtent(axtent);

        }

I'm simply trying to let the user zoom to a specific area on my map by clicking on a button that calls the 'myzoom' function. The first time the button is clicked the correct (intended) extent is displayed. However, clicking the button again shifts the map noticeably to the left ("extent B").
Click again, map remains at "Extent B". Zoom in, pan around,etc. then click the button invoking "my zoom" and erroneous "Extent B" is still shown. I've tried multiple map services, and different versions of the api, and still running into the same problem. I really am stuck, and any thoughts would be awesome.

thanks,
Justin

derekswingley1 · ‎10-31-2011

Can you post some more of your code? I don't see a problem with your general workflow or the code snippets you posted.

JustinAnderson · ‎11-01-2011

Thanks Derek for taking a look at this.

Below is the entire code. I changed the map service to one hosted at arcgis online, and changed the extent coordiantes to reflect that change. The first time the myzoom function is invoked the map properly zooms to India. The next time myzoom fires, and each subsequent time, the map
view has shifted to Russia.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Zoom to Extent Test</title>

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">

 <script type="text/javascript">
       djConfig = {
            parseOnLoad: true
        }

        

  </script>


    <script type="text/javascript">
        var map;
        var newMap;
        dojo.require("esri.map");
        
        function Init() {

            
            map = new esri.Map("mapDiv");
           
            newMap = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer"); 
            map.addLayer(newMap);
           

        }

        function myzoom() {
          
            var axtent = new esri.geometry.Extent(105.6673614, 37.0016790, 55.6153456, 5.7191691, map.SpatialReference);
        map.setExtent(axtent);
        
        }


    </script>

</head>
<body onload="Init()">
<div id = "mapDiv" style="width:800px; height:500px"> </div>
<input id="button2" type="button" value="Zoom To India" onclick="myzoom();" />
</body>
</html>

derekswingley1 · ‎11-01-2011

Happy to try to help. Thanks for posting your code.

Few things...
-the order for params for esri.geometry.Extent is xmin, ymin, xmax, ymax, sr. I think you have xmin/xmax and ymin/ymax swapped. Try this:

var axtent = new esri.geometry.Extent(55.6153456, 5.7191691, 105.6673614, 37.0016790, map.SpatialReference);

-you're using 1.6...is that a requirement? If not, please use the latest version, currently 2.5: http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5 (also update the link to the tundra CSS if you do this: http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css
-add a class attribute on your body tag to get the tundra theme: <body class="tundra">
-use dojo.ready() to call your init function instead of body onload

JustinAnderson · ‎11-01-2011

Thanks so much! That was the answer. And thank you for the other suggestions as well.

Cheers,
Justin

derekswingley1 · ‎11-01-2011

Good stuff. Hope you moved to 2.5!