FindTask - zoom to results not working (multiple layers returning features)

[JennB]

Hi everyone,

I've been working on a web map and am having trouble zooming to the results of the FindTask. At some point, I'll also need to incorporate the functionality to zoom to a result if it's a single point, but first I'm just trying to get it to show results from a line and polygon layer! If someone could help out with my conundrum that would be lovely. Thank you!

<script>
 // get the job number from the URL
 var projNum = getUrlParameter('data').split("+")[0]; //this is a call to a function in a helper file
 
    require([
  "esri/map",
        "esri/tasks/FindTask",
        "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
          
        "esri/Color",
        "dojo/on",
        "dojo/dom",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojo/parser",
          
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
    ], function(
        Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        Color, on, dom, registry, arrayUtils, connect, parser
    ) {      
        var findTask, findParams;
        var map, center, zoom;
        
        parser.parse();        
        map = new esri.Map("map", {
   basemap: "streets",
   center: [-122.8, 49.2],
   zoom: 10
        });
        //Create Find Task using the URL of the map service to search
        findTask = new FindTask("URL HERE");
        map.on("load", function () {  
   //Create the find parameters
   findParams = new FindParameters();
   findParams.returnGeometry = true;
   findParams.layerIds = [0,1,2];
   findParams.searchFields = ["Project_Number"];
   findParams.outSpatialReference = map.spatialReference;
   console.log("find sr: ", findParams.outSpatialReference);
   
   //Set the search text to the value in the box
   findParams.searchText = projNum;
   findTask.execute(findParams, showResults);   
        });                  
        function showResults(results) {
   //This function works with an array of FindResult that the task returns
   map.graphics.clear();
    
   //SYMBOLOGY FOR GRAPHICS
   //polygon
   var polygonSymbol = new SimpleFillSymbol(
    SimpleFillSymbol.STYLE_SOLID, 
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0]), 1), 
    new Color([98, 194, 204, 0.5])
   );
    
   //line
   var lineSymbol = new SimpleLineSymbol();
    //SimpleLineSymbol.STYLE_SOLID;
    lineSymbol.setWidth(3);
    lineSymbol.setColor(new Color([0,230,169,1]));
   
   //point
   var markerSymbol = new SimpleMarkerSymbol();
    markerSymbol.setSize(12);
    markerSymbol.setColor(new Color([0,230,169,1]));          
   //create array of attributes
   var items = arrayUtils.map(results, function (result) {
    var graphic = result.feature;
    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);   
            return result.feature; 
        });
  var myFeatureExtent = graphicsUtils.graphicsExtent(items);    
  map.setExtent(myFeatureExtent, true);
        } 
    });      
    </script>

[RobertScheitlin__GISP]

Jenn,

   Have you checked to see that myFeatureExtent is not null? A point will not return an extent so if your results is limited to one point then graphicsUtils.graphicsExtent will not return anything.

[JennB]

Robert,

I have ran the code without any reference to the points (removed the symbology, the creating the graphics, and the layer ID from the find task) because I knew to be careful of the point geometry. Just testing and trying to get it working on the lines and polygons first. I only included the point code for reference .

[OwenEarley]

If you are using a modern browser such as Chrome then try logging some of the objects to see what is going on.

console.log("Items: ", items);
console.log("Feature Extent: ", myFeatureExtent);
map.setExtent(myFeatureExtent, true); 

Just make sure to open the Developer Tools before running your page and the Console window will show your object properties.

[JennB]

I'll give this a shot in the morning. Midnight for me! Thank you for your responses this far! I'm just getting in to javascript and my appreciation for the help of others can't be expressed enough!

[JennB]

I think it might be failing to get to that point. I put the console.log lines where you suggested and it's not printing anything back to me in Chrome's debugger.

If I put console.log("Items: ", items); after map.graphics.add(graphic); then the console comes back with 3 items as undefined (there should be 3 results from the FindTask).

Also, the type of error I get in the console regarding the extents bit of code: "Cannot read property 'graphicsExtent' of undefined"

[RobertScheitlin__GISP · Accepted solution]

Jenn,

   I did not notice before that you do not have the require for graphicsUtils in your code.

require(["esri/graphicsUtils"], function(graphicsUtils)

[RobertScheitlin__GISP]

So it would look like this

<script>  
 // get the job number from the URL  
 var projNum = getUrlParameter('data').split("+")[0]; //this is a call to a function in a helper file  
   
    require([  
  "esri/map",  
        "esri/tasks/FindTask",  
        "esri/tasks/FindParameters",  
        "esri/symbols/SimpleMarkerSymbol",  
        "esri/symbols/SimpleLineSymbol",  
        "esri/symbols/SimpleFillSymbol",  
        "esri/graphicsUtils",
        "esri/Color",  
        "dojo/on",  
        "dojo/dom",  
        "dijit/registry",  
        "dojo/_base/array",  
        "dojo/_base/connect",  
        "dojo/parser",  
            
        "dijit/layout/BorderContainer",  
        "dijit/layout/ContentPane",  
        "dojo/domReady!"  
    ], function(  
        Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, graphicsUtils,
        Color, on, dom, registry, arrayUtils, connect, parser  
    ) {        
        var findTask, findParams;  
        var map, center, zoom;  
          
        parser.parse();          
        map = new esri.Map("map", {  
   basemap: "streets",  
   center: [-122.8, 49.2],  
   zoom: 10  
        });  
        //Create Find Task using the URL of the map service to search  
        findTask = new FindTask("URL HERE");  
        map.on("load", function () {    
   //Create the find parameters  
   findParams = new FindParameters();  
   findParams.returnGeometry = true;  
   findParams.layerIds = [0,1,2];  
   findParams.searchFields = ["Project_Number"];  
   findParams.outSpatialReference = map.spatialReference;  
   console.log("find sr: ", findParams.outSpatialReference);  
     
   //Set the search text to the value in the box  
   findParams.searchText = projNum;  
   findTask.execute(findParams, showResults);     
        });                    
        function showResults(results) {  
   //This function works with an array of FindResult that the task returns  
   map.graphics.clear();  
      
   //SYMBOLOGY FOR GRAPHICS  
   //polygon  
   var polygonSymbol = new SimpleFillSymbol(  
    SimpleFillSymbol.STYLE_SOLID,   
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0]), 1),   
    new Color([98, 194, 204, 0.5])  
   );  
      
   //line  
   var lineSymbol = new SimpleLineSymbol();  
    //SimpleLineSymbol.STYLE_SOLID;  
    lineSymbol.setWidth(3);  
    lineSymbol.setColor(new Color([0,230,169,1]));  
     
   //point  
   var markerSymbol = new SimpleMarkerSymbol();  
    markerSymbol.setSize(12);  
    markerSymbol.setColor(new Color([0,230,169,1]));            
   //create array of attributes  
   var items = arrayUtils.map(results, function (result) {  
    var graphic = result.feature;  
    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);     
            return result.feature;   
        });  
  var myFeatureExtent = graphicsUtils.graphicsExtent(items);      
  map.setExtent(myFeatureExtent, true);  
        }   
    });        
    </script>

[JennB]

Oh good grief. I can't tell you how many times I double checked the required items to make sure I had everything I needed. At one point I had it in there and had removed it... completely forgot to put it back in.  Well, now I feel like a smart cookie. I better not quit my day job (oh.. heh, wait. This is it...)

You guys are the best . It all works fine (for) now!

[OwenEarley]

As Robert states - a single point will not return an extent so it is worth having a test for this in your code and providing an alternative such as map.centerAndZoom() for this case.