Find Task

HabG_ · ‎09-11-2014

Hi

I want to use a FindTask to select a feature (polygon or point) using an ID field and zoom to the feature being searched when I click on the search button. This sample on ArcGIS API for JavaScript Sandbox does it but I don't want the table show below the map. I only want to show the search on the top and the map. Can anyone help please by modifying the the code?

Thanks

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Display Find Task results in Dojo DataGrid</title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      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",
        "dojox/grid/DataGrid",
        "dojo/data/ItemFileReadStore",
        "dijit/form/Button",
        "dojo/parser",
          
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser
      ) {      
        var findTask, findParams;
        var map, center, zoom;
        var grid, store;
        
        parser.parse();        
        
        registry.byId("search").on("click", doFind);
        
        center = [-83.266, 42.568];
        zoom = 11;
        map = new esri.Map("map", {
          basemap: "streets",
          center: center,
          zoom: zoom
        });


        //Create Find Task using the URL of the map service to search
        findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");


        map.on("load", function () {
          //Create the find parameters
          findParams = new FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
          findParams.searchFields = ["OWNERNME1", "OWNERNME2"];
          findParams.outSpatialReference = map.spatialReference;
          console.log("find sr: ", findParams.outSpatialReference);
        });                  
        
        function doFind() {
          //Set the search text to the value in the box
          findParams.searchText = dom.byId("ownerName").value;
          findTask.execute(findParams, showResults);
        }


        function showResults(results) {
          //This function works with an array of FindResult that the task returns
          map.graphics.clear();
          var symbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_SOLID, 
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2), 
            new Color([98, 194, 204, 0.5])
          );


          //create array of attributes
          var items = arrayUtils.map(results, function (result) {
            var graphic = result.feature;
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);
            return result.feature.attributes;
          });


          //Create data object to be used in store
          var data = {
            identifier : "PARCELID", //This field needs to have unique values
            label : "PARCELID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
            items : items
          };


          //Create data store and bind to grid.
          store = new ItemFileReadStore({
            data : data
          });
          var grid = registry.byId("grid");
          grid.setStore(store);
          grid.on("rowclick", onRowClickHandler);


          //Zoom back to the initial map extent
          map.centerAndZoom(center, zoom);
        }


        //Zoom to the parcel when the user clicks a row
        function onRowClickHandler(evt) {
          var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).PARCELID;
          var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
            return ((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId);
          });
          if ( selectedTaxLot.length ) {
            map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
          }
        }
      });      
    </script>
  </head>
  <body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;">
      Owner name: <input type="text" id="ownerName" size="60" value="Katz" />      
          <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search       
          </button>
    </div>
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
     <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
      <thead>
        <tr>
          <th field="PARCELID">Parcel ID</th>
          <th field="OWNERNME1" >Owner 1</th>
          <th field="OWNERNME2">Owner 2</th>
          <th field="RESYRBLT ">Year Built</th>
          <th field="SITEADDRESS" width="100%">Address</th>
        </tr>
      </thead>
    </table>
    </div>
  </div>
  </body>
</html>

RobertScheitlin__GISP · ‎09-11-2014

So here is my version with the unneeded requires and functions removed and it zooms to all the returned features:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices--> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <title>Display Find Task results in Dojo DataGrid</title> 


    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/Grid.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/claroGrid.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> 
    <style> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } 
    </style> 
    <script src="http://js.arcgis.com/3.10/"></script> 
    <script> 
      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", 
        "dijit/form/Button", 
        "dojo/parser",
        "esri/graphicsUtils",
           
        "dijit/layout/BorderContainer", 
        "dijit/layout/ContentPane", 
        "dojo/domReady!" 
      ], function( 
        Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, 
        Color, on, dom, registry, arrayUtils, connect, Button, parser, graphicsUtils
      ) {       
        var findTask, findParams; 
        var map, center, zoom;   
         
        parser.parse();         
         
        registry.byId("search").on("click", doFind); 
         
        center = [-83.266, 42.568]; 
        zoom = 11; 
        map = new esri.Map("map", { 
          basemap: "streets", 
          center: center, 
          zoom: zoom 
        }); 


        //Create Find Task using the URL of the map service to search 
        findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/"); 


        map.on("load", function () { 
          //Create the find parameters 
          findParams = new FindParameters(); 
          findParams.returnGeometry = true; 
          findParams.layerIds = [0]; 
          findParams.searchFields = ["OWNERNME1", "OWNERNME2"]; 
          findParams.outSpatialReference = map.spatialReference; 
          console.log("find sr: ", findParams.outSpatialReference); 
        });                   
         
        function doFind() { 
          //Set the search text to the value in the box 
          findParams.searchText = dom.byId("ownerName").value; 
          findTask.execute(findParams, showResults); 
        } 


        function showResults(results) { 
          //This function works with an array of FindResult that the task returns 
          map.graphics.clear(); 
          var symbol = new SimpleFillSymbol( 
            SimpleFillSymbol.STYLE_SOLID, 
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), 
            new Color([255, 0, 0, 0.5]) 
          ); 


          //create array of attributes 
          var items = arrayUtils.map(results, function (result) { 
            var graphic = result.feature; 
            graphic.setSymbol(symbol); 
            map.graphics.add(graphic); 
            return result.feature;
          });
         
          var myFeatureExtent = graphicsUtils.graphicsExtent(items);
          map.setExtent(myFeatureExtent, true);

        } 
      });       
    </script> 
  </head> 
  <body class="claro"> 
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;"> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;"> 
      Owner name: <input type="text" id="ownerName" size="60" value="Katz" />       
          <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search       
          </button> 
    </div> 
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>   
  </div> 
  </body> 
</html>

View solution in original post

JakeSkinner · ‎09-11-2014

Hi Hab,

Below is an example on how to do this. The app will zoom to the first result found from the FindTask.

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices--> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <title>Display Find Task results in Dojo DataGrid</title> 


    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/Grid.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/claroGrid.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> 
    <style> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } 
    </style> 
    <script src="http://js.arcgis.com/3.10/"></script> 
    <script> 
      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", 
        "dojox/grid/DataGrid", 
        "dojo/data/ItemFileReadStore", 
        "dijit/form/Button", 
        "dojo/parser", 
           
        "dijit/layout/BorderContainer", 
        "dijit/layout/ContentPane", 
        "dojo/domReady!" 
      ], function( 
        Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, 
        Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser 
      ) {       
        var findTask, findParams; 
        var map, center, zoom; 
        var grid, store; 
         
        parser.parse();         
         
        registry.byId("search").on("click", doFind); 
         
        center = [-83.266, 42.568]; 
        zoom = 11; 
        map = new esri.Map("map", { 
          basemap: "streets", 
          center: center, 
          zoom: zoom 
        }); 


        //Create Find Task using the URL of the map service to search 
        findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/"); 


        map.on("load", function () { 
          //Create the find parameters 
          findParams = new FindParameters(); 
          findParams.returnGeometry = true; 
          findParams.layerIds = [0]; 
          findParams.searchFields = ["OWNERNME1", "OWNERNME2"]; 
          findParams.outSpatialReference = map.spatialReference; 
        });                   
         
        function doFind() { 
          //Set the search text to the value in the box 
          findParams.searchText = dom.byId("ownerName").value; 
          findTask.execute(findParams, showResults); 
        } 


        function showResults(results) { 
          map.graphics.clear(); 
          var symbol = new SimpleFillSymbol( 
            SimpleFillSymbol.STYLE_SOLID, 
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2), 
            new Color([98, 194, 204, 0.5]) 
          ); 

          var graphic = results[0].feature; 
          graphic.setSymbol(symbol); 
          map.graphics.add(graphic);
          map.setExtent(map.graphics.graphics[0].geometry.getExtent(), true);
        } 

      });       
    </script> 
  </head> 
  <body class="claro"> 
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;"> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;"> 
      Owner name: <input type="text" id="ownerName" size="60" value="Katz" />       
          <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search       
          </button> 
    </div> 
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div> 
  </div> 
  </body> 
</html>

RobertScheitlin__GISP · ‎09-11-2014

So here is my version with the unneeded requires and functions removed and it zooms to all the returned features:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices--> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <title>Display Find Task results in Dojo DataGrid</title> 


    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/Grid.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dojox/grid/resources/claroGrid.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> 
    <style> 
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } 
    </style> 
    <script src="http://js.arcgis.com/3.10/"></script> 
    <script> 
      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", 
        "dijit/form/Button", 
        "dojo/parser",
        "esri/graphicsUtils",
           
        "dijit/layout/BorderContainer", 
        "dijit/layout/ContentPane", 
        "dojo/domReady!" 
      ], function( 
        Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, 
        Color, on, dom, registry, arrayUtils, connect, Button, parser, graphicsUtils
      ) {       
        var findTask, findParams; 
        var map, center, zoom;   
         
        parser.parse();         
         
        registry.byId("search").on("click", doFind); 
         
        center = [-83.266, 42.568]; 
        zoom = 11; 
        map = new esri.Map("map", { 
          basemap: "streets", 
          center: center, 
          zoom: zoom 
        }); 


        //Create Find Task using the URL of the map service to search 
        findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/"); 


        map.on("load", function () { 
          //Create the find parameters 
          findParams = new FindParameters(); 
          findParams.returnGeometry = true; 
          findParams.layerIds = [0]; 
          findParams.searchFields = ["OWNERNME1", "OWNERNME2"]; 
          findParams.outSpatialReference = map.spatialReference; 
          console.log("find sr: ", findParams.outSpatialReference); 
        });                   
         
        function doFind() { 
          //Set the search text to the value in the box 
          findParams.searchText = dom.byId("ownerName").value; 
          findTask.execute(findParams, showResults); 
        } 


        function showResults(results) { 
          //This function works with an array of FindResult that the task returns 
          map.graphics.clear(); 
          var symbol = new SimpleFillSymbol( 
            SimpleFillSymbol.STYLE_SOLID, 
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), 
            new Color([255, 0, 0, 0.5]) 
          ); 


          //create array of attributes 
          var items = arrayUtils.map(results, function (result) { 
            var graphic = result.feature; 
            graphic.setSymbol(symbol); 
            map.graphics.add(graphic); 
            return result.feature;
          });
         
          var myFeatureExtent = graphicsUtils.graphicsExtent(items);
          map.setExtent(myFeatureExtent, true);

        } 
      });       
    </script> 
  </head> 
  <body class="claro"> 
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;"> 
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;"> 
      Owner name: <input type="text" id="ownerName" size="60" value="Katz" />       
          <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search       
          </button> 
    </div> 
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>   
  </div> 
  </body> 
</html>

HabG_ · ‎09-11-2014

Thanks Jake and Robert, both codes can do the job, however the correct answer choice accepts only one answer.

PatrickWild · ‎10-28-2014

Thanks for this useful bit of code, I have integrated successfully in my app.

However, rather than using a content pane, I would prefer a cleaner look and feel.

I would like to use something like the geocoder search box seen here: ArcGIS API for JavaScript | Simple Geocoding

Is this possible?

Any direction appreciated.

Thanks,

PW