find and then zoom to new graphic extent help

jamiehollingsworth · ‎11-08-2013

I have found lots of info how to use a find or query tasks and then zoom to the new extent of these selected features, but i can not seem to get it to work. can someone please take a look and let me know what i have done wrong.

here is my code and a link to fiddle

http://jsfiddle.net/7vUwE/

thanks

<!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" />     <!--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>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">     <style>       html, body {     height: 100%;     width: 100%;     margin: 0;     padding: 0; } #map {     margin: 0;     padding: 0;     width: 100%;     height: 100%; }     </style>     <script src="http://js.arcgis.com/3.7/"></script>     <script>       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() {         map = new esri.Map("map",{   basemap:"topo",   center: [-147.0, 64.8],   zoom: 6   });            // draw all sites to the map         var sites_layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://ltergis.iab.uaf.edu/arcgis/rest/services/database_test/mapserver");                  map.addLayer(sites_layer);          //create find task with url to map service         findTask = new esri.tasks.FindTask("http://ltergis.iab.uaf.edu/arcgis/rest/services/database_test/mapserver");                   //create find parameters         findParams = new esri.tasks.FindParameters();         findParams.returnGeometry = true;         findParams.layerIds = [0];         findParams.searchFields = ["site_id"];   var sr = new esri.SpatialReference({wkid:102100});         findParams.outSpatialReference = sr       }        //set the search text to find parameters       function execute(searchText) {         findParams.searchText = searchText;         findTask.execute(findParams, showResults);       }     //symbology for graphics       function showResults(results) {         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]));            //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;           switch (graphic.geometry.type) {          case "point":             graphic.setSymbol(markerSymbol);            break;               }     //add graphics to map           map.graphics.add(graphic);                //zoom to selected graphics (not working)              });        //zoom to selected graphics (not working)   var Extent = esri.graphicsExtent(graphic);       map.setExtent(Extent);    }        dojo.addOnLoad(init);      </script>   </head>   <body>    <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 sites:       <input type="text" id="searchText" value="fsl" />       <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>

JasonZou · ‎11-10-2013

I have made some small changes, and it should work now. One of the issue is that one record has invalid (x: 0, y: -7.081154551613622e-10), which should be ignored.

<!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" />     <!--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>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">     <style>       html, body {     height: 100%;     width: 100%;     margin: 0;     padding: 0; } #map {     margin: 0;     padding: 0;     width: 100%;     height: 100%; }     </style>     <script src="http://js.arcgis.com/3.7/"></script>     <script>       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() {         map = new esri.Map("map",{           basemap:"topo",           center: [-147.0, 64.8],           zoom: 6         });              // draw all sites to the map         var sites_layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://ltergis.iab.uaf.edu/arcgis/rest/services/database_test/mapserver");                  map.addLayer(sites_layer);          //create find task with url to map service         findTask = new esri.tasks.FindTask("http://ltergis.iab.uaf.edu/arcgis/rest/services/database_test/mapserver");                   //create find parameters         findParams = new esri.tasks.FindParameters();         findParams.returnGeometry = true;         findParams.layerIds = [0];         findParams.searchFields = ["site_id"];         var sr = new esri.SpatialReference({wkid:102100});         findParams.outSpatialReference = sr;       }        //set the search text to find parameters       function execute(searchText) {         findParams.searchText = searchText;         findTask.execute(findParams, showResults);       }        //symbology for graphics       function showResults(results) {         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]));                //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;            if (graphic.geometry.x === 0 || graphic.geometry.y === 0) {             console.warn(graphic.geometry.toJson());             return;           }            switch (graphic.geometry.type) {             case "point":               graphic.setSymbol(markerSymbol);               break;                  }                  //add graphics to map           map.graphics.add(graphic);         });               //zoom to selected graphics (not working)         if (map.graphics.graphics.length > 1) {           var graExtent = esri.graphicsExtent(map.graphics.graphics);            map.setExtent(graExtent);          }         else if (map.graphics.graphics.length === 1) {           map.centerAndZoom(map.graphics.graphics[0], 12);           }       }        dojo.addOnLoad(init);      </script>   </head>   <body>    <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 sites:       <input type="text" id="searchText" value="fsl" />       <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>

View solution in original post

JasonZou · ‎11-10-2013

I have made some small changes, and it should work now. One of the issue is that one record has invalid (x: 0, y: -7.081154551613622e-10), which should be ignored.

<!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" />     <!--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>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">     <style>       html, body {     height: 100%;     width: 100%;     margin: 0;     padding: 0; } #map {     margin: 0;     padding: 0;     width: 100%;     height: 100%; }     </style>     <script src="http://js.arcgis.com/3.7/"></script>     <script>       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() {         map = new esri.Map("map",{           basemap:"topo",           center: [-147.0, 64.8],           zoom: 6         });              // draw all sites to the map         var sites_layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://ltergis.iab.uaf.edu/arcgis/rest/services/database_test/mapserver");                  map.addLayer(sites_layer);          //create find task with url to map service         findTask = new esri.tasks.FindTask("http://ltergis.iab.uaf.edu/arcgis/rest/services/database_test/mapserver");                   //create find parameters         findParams = new esri.tasks.FindParameters();         findParams.returnGeometry = true;         findParams.layerIds = [0];         findParams.searchFields = ["site_id"];         var sr = new esri.SpatialReference({wkid:102100});         findParams.outSpatialReference = sr;       }        //set the search text to find parameters       function execute(searchText) {         findParams.searchText = searchText;         findTask.execute(findParams, showResults);       }        //symbology for graphics       function showResults(results) {         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]));                //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;            if (graphic.geometry.x === 0 || graphic.geometry.y === 0) {             console.warn(graphic.geometry.toJson());             return;           }            switch (graphic.geometry.type) {             case "point":               graphic.setSymbol(markerSymbol);               break;                  }                  //add graphics to map           map.graphics.add(graphic);         });               //zoom to selected graphics (not working)         if (map.graphics.graphics.length > 1) {           var graExtent = esri.graphicsExtent(map.graphics.graphics);            map.setExtent(graExtent);          }         else if (map.graphics.graphics.length === 1) {           map.centerAndZoom(map.graphics.graphics[0], 12);           }       }        dojo.addOnLoad(init);      </script>   </head>   <body>    <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 sites:       <input type="text" id="searchText" value="fsl" />       <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>

jamiehollingsworth · ‎11-20-2013

thanks much.

jamiehollingsworth · ‎11-20-2013

again thanks for the help

but after a bit of testing the centerandzoom is not zooming in to the selected feature but the center of the map extent. thoughts? the projection of the map service is the same as the basemap.

j

StevenGraf1 · ‎04-15-2014

I'm using pretty much the exact same code and it works great until I search for a string of numbers with a dash (ex: 121548-89). The attached image shows what is happening. It zooms way out and makes the viewable window width narrow and doesn't show the search results. The console error is such: Error: Problem parsing d=""

I can't find much information on this.

Any thoughts?

Thanks!