centerAndZoom problem JS

EduardoDomínguez

HI everyone,

I don't know how to center the result of a findind task in my map, the aim is to select a State (being highlighted on the map) and then zoom and center into the selected State, but only is selected and zoomed in the middle. Anyone could help me? thanks in advance.

Part of the code is this:

//create find task with url to map service

        findTask = new esri.tasks.FindTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");

        //create find parameters and define known values

        findParams = new esri.tasks.FindParameters();

        findParams.returnGeometry = true;

        findParams.layerIds = [2];

        findParams.searchFields = ["state_name"];

      }

      function execute(searchText) {

        //set the search text to find parameters

        findParams.searchText = searchText;

        findTask.execute(findParams, showResults);

      }

      function showResults(results) {

        //symbology for graphics

        var markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));

        var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);

        var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));

        //find results return an array of findResult.

        map.graphics.clear();

        var dataForGrid = [];

        //Build an array of attribute information and add each found graphic to the map

        dojo.forEach(results, function(result) {

           

          var graphic = result.feature;

         

          dataForGrid.push([result.layerName, result.foundFieldName, result.value]);

          switch (graphic.geometry.type) {

          case "point":

            graphic.setSymbol(markerSymbol);

            break;

          case "polyline":

            graphic.setSymbol(lineSymbol);

            break;

          case "polygon":

            graphic.setSymbol(polygonSymbol);

            break;

          }

          map.graphics.add(graphic);

          map.centerAndZoom(??????, 12);  //Here is the problem.

OwenEarley

Hi Eduardo,

Have a look at this example I created - States - Find Task

There are a number of options for zooming the map to the State - the best one is option 3 as it will fit the extent to the map:

        function showResults(results) {
       
            var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
                new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
       
            //find results return an array of findResult.
            map.graphics.clear();
            var dataForGrid = [];
           
            dojo.forEach(results, function(result) {           
                var graphic = result.feature;
               
                dataForGrid.push([result.layerName, result.foundFieldName, result.value]);
               
                graphic.setSymbol(polygonSymbol);
                map.graphics.add(graphic);
               
                var zoomToPt = graphic.geometry.getCentroid();
                // Option 1: This zooms to a fixed zoom level that may not be appropriate for some states
                //map.centerAndZoom(zoomToPt, 12);
               
                // Option 2: This keeps the zoom level and pans to the zoom point
                //map.centerAt(zoomToPt);
               
                // Option 3: This sets the map extent to the feature extent
                map.setExtent(graphic.geometry.getExtent(),true);
            });
       
        }