Community

Buggy centerAndZoom after setExtent

659
0
03-06-2011 09:40 AM
ChristopherBennett
by
New Contributor
‎03-06-2011 09:40 AM
I have an app that implements a "bookmarks" feature in code by defining an array of extents, then calling map.setExtent(extents) after the user clicks a button.  The problem is that if the user clicks a ZoomIn button, the map control actually zooms out.  Same thing for double-clicking the map itself.  However, clicking the ZoomOut button restores normal behavior until the setExtent is called again.  Zooming is performed with a call to map.centerAndZoom.

I'm attaching a sample that demonstrates the behavior.  This is just the "Show Mouse Coordinates" example straight off the Javascript API sample page under the Map category.  I've simply added a couple of buttons to implement the behavior.  Important note: extent1 is in the original map projection, while extent2 is in my application's map service projection (2264).  Extent1 does not exhibit the behavior, while extent2 does.

This behavior does not occur with setting the extent within the original service's projection.  I might have concluded that this is the problem, but since my application's map is published in this projection, I have to wonder if there is some interaction between the map and the projection.

Anybody ever seen this sort of behavior?

Thanks!

-Chris.

<!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" />
    <!--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>Create Map Display Mouse Coordinates</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
    <script type="text/javascript">
      dojo.require("esri.map");

  var myMap;

  var extent1 = new esri.geometry.Extent({ "xmin": -11054509, "ymin": 4558692, "xmax": -10943217, "ymax": 4665092, "spatialReference": { "wkid": 102100} });
  
  var extent2 = new esri.geometry.Extent(1973137.425, 801985.798, 1983912.550, 792960.648, new esri.SpatialReference( {wkid: 2264}) );
        
        
  function init() {
   myMap= new esri.Map("map");
   
        dojo.connect( myMap, "onLoad", function() {
          dojo.connect(myMap, "onMouseMove", showCoordinates);
          dojo.connect(myMap, "onMouseDrag", showCoordinates);
        });

        var mapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
        myMap.addLayer(mapServiceLayer);
      }

 function zoomIn() {
        var ext = myMap.extent;
        var ctr = ext.getCenter();

        myMap.centerAndZoom(ctr, 0.25);
 }

    function showCoordinates(evt) {
   var mp = evt.mapPoint;
         dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
    }


      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
<button onclick="myMap.setExtent(extent1)" >Set Extent 1</button>
<button onclick="myMap.setExtent(extent2)">Set Extent 2</button> 
<button onclick="zoomIn()">Zoom In</button>

   <span id="info" style="position:absolute; right:150px; bottom:5px; color:#000; z-index:50;"></span>
   
    <div id="map" style="position:relative; width:900px; height:600px; border:1px solid #000;">
    </div>
  </body>
</html>
0 Kudos
0 Replies