topic Re: centerAndZoom problem JS in ArcGIS JavaScript Maps SDK Questions

centerAndZoom problem JS

EduardoDomínguez — Sun, 14 Dec 2014 16:33:29 GMT

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.

Re: centerAndZoom problem JS

OwenEarley — Mon, 15 Dec 2014 05:05:27 GMT

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.

Re: centerAndZoom problem JS

EduardoDomínguez — Mon, 15 Dec 2014 10:49:53 GMT

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.

Re: centerAndZoom problem JS

OwenEarley — Sat, 11 Dec 2021 21:54:20 GMT

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

Re: centerAndZoom problem JS

EduardoDomínguez — Tue, 16 Dec 2014 12:08:38 GMT

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

Re: centerAndZoom problem JS

ReneRubalcava — Tue, 16 Dec 2014 18:33:16 GMT

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

Zoom To Anything

Re: centerAndZoom problem JS

EduardoDomínguez — Tue, 23 Dec 2014 17:29:22 GMT

Many thanks, problem solved!!.