centerAndZoom problem JS

3774
6
Jump to solution
12-14-2014 08:33 AM
EduardoDomínguez
New Contributor II

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.

0 Kudos
1 Solution

Accepted Solutions
OwenEarley
Occasional Contributor III

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);
            });
       
        }

View solution in original post

0 Kudos
6 Replies
OwenEarley
Occasional Contributor III

As you know that the result of the find task is a polygon (State boundary) then you can use the getCentroid() method to get your target point.

Alternatively, you may want to look at polygon.getExtent()‌ to get the feature extent and then use getCentroid() on the extent. This will work better for multipart features - such as Hawaii.

0 Kudos
EduardoDomínguez
New Contributor II

Thank you,

I am not an expert programming, I've tried many things but I don't get it. Always the same result, the boundary is highlighted but without being zoomed and centered.I am writing a bad code surely.

0 Kudos
OwenEarley
Occasional Contributor III

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);
            });
       
        }
0 Kudos
EduardoDomínguez
New Contributor II

Many many thanks. I had done it using zoom and center but getExtent is much better!!.

0 Kudos
ReneRubalcava
Frequent Contributor

Just wanted to throw it out there that I recently posted a way to let you zoom to anything.

Zoom To Anything

EduardoDomínguez
New Contributor II

Many thanks, problem solved!!.