topic Re: Zoom function screws up map display in ArcGIS JavaScript Maps SDK Questions

Zoom function screws up map display

KennethRichards — Fri, 30 Aug 2013 18:44:25 GMT

I've written a zoom function that is supposed to zoom to a point by creating a bounding box based on the coordinantes of the point. It attempts to zoom the new extent but it gives me an error and then the map resizes and layers redraw incorrectly at different scales. The scale bar displays NaN instead of numbers.

function makeZoomButton(id){//id is objectid
        var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='photos/bg_magnify.png'";
        zBtn = zBtn + " width='18' height='18'";
        zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>"; //activates zoomRow function
        return zBtn;
      }

    function zoomRow(id){
        var grid = dijit.byId('grid');
        var clickedWell = grid.getItem(id);
        var selectedWell = map.graphics;
        var distance = 1000;
        var newExtent = new esri.geometry.Extent({
            "xmin": selectedWell.x - distance,
            "ymin": selectedWell.y - distance,
            "xmax": selectedWell.x + distance,
            "ymax": selectedWell.y + distance,
            "spatialReference":{"wkid":4326}
        });

        console.log(map.graphics.graphics);
        dojo.forEach(map.graphics.graphics,function(graphic){
            console.log(graphic);
          if((graphic.attributes) && graphic.attributes.FID === clickedWell.FID){
            selectedWell = graphic.geometry;
            return;
          }
        });

        map.setExtent(newExtent);
       
    }

Anyone have any ideas on what is going on and how to fix it?
My well layer I am using in my zoon function is in 4326 on the server but I am not sure about the others.

[ATTACH=CONFIG]27123[/ATTACH]

Re: Zoom function screws up map display

JasonZou — Fri, 30 Aug 2013 22:09:34 GMT

Make sure the spatial reference you set in newExtent is the same as the one in selectedWell. If not, change it to be the same. The reason your zoom function messed up is due to the mismatch of the extent (x,y) values and the spatial reference.

Re: Zoom function screws up map display

JohnGrayson — Sat, 11 Dec 2021 21:47:21 GMT

Ken, Try sending 'newExtent' to the console; it's probably incorrect. Seems like the loop to find the selected well should come before you create the extent. Here's another possible approach:

    function zoomRow(id){
        var grid = dijit.byId('grid');
        var clickedWell = grid.getItem(id);
        
       var selectedWell = null;
       dojo.forEach(map.graphics.graphics,function(graphic){           
          if((graphic.attributes) && graphic.attributes.FID === clickedWell.FID){
            selectedWell = graphic.geometry;
            return;
          }
        });

       if(selectedWell != null){
         var distance = 1000;
          var newExtent = new esri.geometry.Extent({
            "xmin": selectedWell.x - distance,
            "ymin": selectedWell.y - distance,
            "xmax": selectedWell.x + distance,
            "ymax": selectedWell.y + distance,
            "spatialReference":{"wkid":4326}
          });
          map.setExtent(newExtent);
       }       
    }

Re: Zoom function screws up map display

VinayBansal — Sat, 11 Dec 2021 21:47:24 GMT

Since map.graphics.graphics is an array , you can simply run the loop and break the loop when requested graphic is found....

function zoomRow(id){
        var grid = dijit.byId('grid');
        var clickedWell = grid.getItem(id);
        
       var selectedWell = null;
var graphic = null;
       for(var iGraphicCnt =0; iGraphicCnt < map.graphics.graphics.length;iGraphicCnt++)
{
graphic = map.graphics.graphics[iGraphicCnt];
          if((graphic.attributes) && graphic.attributes.FID === clickedWell.FID){
            selectedWell = graphic.geometry;
           break;
          }
        }

       if(selectedWell != null){
         var distance = 1000;
          var newExtent = new esri.geometry.Extent({
            "xmin": selectedWell.x - distance,
            "ymin": selectedWell.y - distance,
            "xmax": selectedWell.x + distance,
            "ymax": selectedWell.y + distance,
            "spatialReference":{"wkid":4326}
          });
          map.setExtent(newExtent);
       }       
    }