Find Tool - display without dojo grid?

JessicaKnight1 — Tue, 08 May 2012 13:22:23 GMT

I am admittedly very novice at JavaScript and I'm trying to make a basic map application work in the JS API that was working on ArcServer. I want to create a find tool just highlighting the result points, and not have the results post to a table like all of the examples do. Seems like it shouldn't take much to do that but wasn't sure the best way to do it. Thanks.

My next step is getting the geoprocessing task working so I may very well be back asking questions on that...

Re: Find Tool - display without dojo grid?

ShreyasVakil — Sat, 11 Dec 2021 19:19:22 GMT

Hi,
I tried to modify the sample application from resource center according to your requirement. This sample can be good starting point for you to start working on JS API. Please test this code and see if works for you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--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>
      Find Task
    </title>
    <style type="text/css">
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css";
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/Grid.css";
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; }
      body { font-size: 0.9em; font-family: Geneva, Arial, Helvetica, sans-serif;
      } .details { font-weight: bold; } #grid { border:
      1px solid #333;}
    </style>
    <script type="text/javascript">
      djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
    <script type="text/javascript" language="Javascript">
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("esri.map");
      dojo.require("esri.tasks.find");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
     
      var findTask, findParams, map;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-125.05527265731828,"ymin":38.71305283594477,"xmax":-70.215631187727,"ymax":48.40813044933238,"spatialReference":{"wkid":4326}});
        map = new esri.Map("map",{extent:initExtent});
        var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", {
          id: "usa"
        });
        map.addLayer(censusMapLayer);

        //create find task with url to map service
        findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");

        //create find parameters and define known values
        findParams = new esri.tasks.FindParameters();
        findParams.returnGeometry = true;
        findParams.layerIds = [0, 1, 2];
        findParams.searchFields = ["CITY_NAME", "NAME", "SYSTEM", "STATE_ABBR", "STATE_NAME"];
     
        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }


      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();
       
        //Build an array of attribute information and add each found graphic to the map
        dojo.forEach(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);
        });
       
      }
      dojo.addOnLoad(init);
    </script>
  </head>
 
  <body class="claro">
   <div dojotype="dijit.layout.BorderContainer" style="width:100%;height:100%;margin:0" design="headline" gutters="true ">
    <div class="details" dojotype="dijit.layout.BorderContainer" region="top" style="height:30px;">
      Find State/City/River:
      <input type="text" id="searchText" value="KS" />
      <input type="button" value="Find" onclick="execute(dojo.byId('searchText').value);"/>
    </div>
    <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;"></div>
    </div>
  </body>

</html>

Thanks!

Re: Find Tool - display without dojo grid?

JessicaKnight1 — Wed, 09 May 2012 19:49:09 GMT

That's the code I had, which is good. But I can't get it to actually work (as in, find anything). I am using the same search term I used when I had the Query task set up, but no dice.

Re: Find Tool - display without dojo grid?

ShreyasVakil — Wed, 09 May 2012 21:10:24 GMT

Can you post your code or a snippet just to see what might be going wrong.

Re: Find Tool - display without dojo grid?

WillHughes1 — Thu, 15 Aug 2013 12:09:01 GMT

ok, but how can this code be modified to zoom to the selected feature? I would like to be able to perform a select by attribute on a feature class and zoom to the result on the map.

topic Find Tool - display without dojo grid? in ArcGIS JavaScript Maps SDK Questions

Find Tool - display without dojo grid?

Re: Find Tool - display without dojo grid?

Re: Find Tool - display without dojo grid?

Re: Find Tool - display without dojo grid?

Re: Find Tool - display without dojo grid?