Find Query - Zooming to....

simonmiles · ‎06-24-2010

I've created a web app with a find task within it. All works well but what i would like to do is get the FIND task to remove any exisitng find queries from the map and then zoom out to full extent, displaying the new finds OR better still, zoom to the new finds. Did start out using the datagrid sample but didnt quiet like it.

Below is a copy of my JS and html - any suggestions?

JS

    dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("esri.map");
        dojo.require("esri.tasks.find");


        var findTask, findParams, map;
        var startExtent;

        function init() {
            startExtent = new esri.geometry.Extent({ "xmin": 457000.00012207, "ymin": 157999.85012207, "xmax": 523000.00012207, "ymax": 202003.15012207, "spatialReference": { "wkid": 27700} });
            map = new esri.Map("map", { extent: startExtent });
            var streetMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://moon/ArcGIS/rest/services/basemapping_v2/MapServer");
            map.addLayer(streetMapLayer);

            var dynlayer2 = new esri.layers.ArcGISDynamicMapServiceLayer("http://moon/ArcGIS/rest/services/demos/tpo/MapServer", { "opacity": 0.75 });
            map.addLayer(dynlayer2);

            //create find task with url to map service
            findTask = new esri.tasks.FindTask("http://moon/ArcGIS/rest/services/demos/Java_V2/MapServer");

            //create find parameters and define known values
            findParams = new esri.tasks.FindParameters();
            findParams.returnGeometry = true;
            findParams.layerIds = [0];
            findParams.searchFields = ["ADDRESS"];

        }

        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.PictureMarkerSymbol('images/pushpin.png', 25, 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;
                    }
                map.graphics.add(graphic);
            });
            var data = {
                items: dataForGrid
            };
            var store = new dojo.data.ItemFileReadStore({ data: data });
            grid.setStore(store);
        }
        dojo.addOnLoad(init);

HTML

<!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">
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="tundra.css">
   <link rel="stylesheet" type="text/css" href="Grid.css">
    <link rel="stylesheet" type="text/css" href="layout.css">
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6">
    </script>
    <script type="text/javascript" src="pushpin.js"></script>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.TabContainer");
         </script>
</head>

<body class="tundra">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
    gutters="false" style="width:100%; height:100%;">
      <div id="header" dojotype="dijit.layout.ContentPane" region="top">
        RBWM demo with the Java API
       <div id="subheader">Basemap and LLPG</div>
      </div>
      <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
        <div dojotype="dijit.layout.TabContainer" >
          <div dojotype="dijit.layout.ContentPane" title = "Search" selected="true">
          <div class="heading">Find Postcode: <input type="text" id="searchText" value="SL6 1RR" />
    <input type="button" value="Find" onclick="execute(dojo.byId('searchText').value);" /></div>
          </div>
          <div dojotype="dijit.layout.ContentPane" title="Map Tips" >

         <p>Map navigation using mouse:
    <ul>
      <li>Drag to pan</li>
      <li>SHIFT + Click to recenter</li>
      <li>SHIFT + Drag to zoom in</li>
      <li>SHIFT + CTRL + Drag to zoom out</li>
      <li>Mouse Scroll Forward to zoom in</li>
      <li>Mouse Scroll Backward to zoom out</li>
      <li>Use Arrow keys to pan</li>
      <li>+ key to zoom in a level</li>
      <li>- key to zoom out a level</li>
      <li>Double Click to Center and Zoom in</li>
    </ul></p>
          </div>
<div dojotype="dijit.layout.ContentPane" title = "legend" selected="true">
    <div dojotype="dijit.layout.ContentPane" region="bottom" style="height:100%;">

    <img src="tpo.png">
    </div>
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
      </div>
      <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
        <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width:100%;height:100%;margin:0;">

      </div>
    </div>
</body>

</html>

Please note that i dont have my services attached to a web server, so you wouldnt be able to see my services.

Thanks

Simon Miles
Royal Borough Of Windsor and Maidenhead.