geocode then query?

evanpicard · ‎03-30-2012

I'd like to run a geocode on a single address, and then query a polygon feature (and eventually buffer depending on the results of the query - im sure i'll have more questions about that shortly!).
I Started with the geocoding sample, but I'm having a lot of trouble figuring out the
query.geometry part of it.

<!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" />     <!--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-A-Rep Avon</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">         <style>       html, body {          height: 100%; width: 100%;         margin: 0; padding: 0;       }        #map{          padding:0;         border:solid 1px #343642;         margin:5px 5px 5px 0px;       }       .roundedCorners{         -webkit-border-radius: 4px;         -moz-border-radius: 4px;         border-radius: 4px;       }       .shadow{          box-shadow: 4px 4px 8px #adadad;         -webkit-box-shadow: 4px 4px 8px #adadad;         -moz-box-shadow: 4px 4px 8px #adadad;         -o-box-shadow: 4px 4px 8px #adadad;       }           #leftPane{         width:20%;         border-top: solid 1px #343642;         border-left: solid 1px #343642;         border-bottom: solid 1px #343642;         background-color:#DCDAC5;          margin:5px 0px 5px 5px;         color: #343642;         font:100% Georgia,"Times New Roman",Times,serif;         letter-spacing: 0.05em;       }      </style>      <script type="text/javascript">       var djConfig = {         parseOnLoad: true       };     </script>          <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>     <script type="text/javascript">       dojo.require("esri.map");       dojo.require("esri.tasks.locator");       dojo.require("dojo.number");       dojo.require("dijit.form.Button");       dojo.require("dijit.form.Textarea");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.tasks.query");       dojo.require("esri.tasks.geometry");                           var map, locator;       var geom, featgeom;        function init() {                var initExtent = new esri.geometry.Extent({"xmin":-17497000,"ymin":2165000,"xmax":-4132000,"ymax":6969000,"spatialReference":{"wkid":102100}});         map = new esri.Map("map", { extent: initExtent});                  var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");         map.addLayer(basemap);          var queryTask = new esri.tasks.QueryTask("http://server/ArcGIS/rest/services/ZipCodes/ziptest/MapServer/0");                          dojo.connect(map, 'onLoad', function(map) {           //resize the map when the browser resizes           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });                  locator = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");         dojo.connect(locator, "onAddressToLocationsComplete", showResults);                  map.infoWindow.resize(200,125);          }; //End of Init        function locate() {         map.graphics.clear();         var address = {"SingleLine":dojo.byId("address").value};         locator.outSpatialReference= map.spatialReference;         var options = {           address:address,           outFields:["Loc_name"]         };         locator.addressToLocations(options);       };        function showResults(candidates) {         var candidate;         var symbol = new esri.symbol.SimpleMarkerSymbol();         var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");          symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);         symbol.setColor(new dojo.Color([153,0,51,0.75]));                   dojo.every(candidates,function(candidate){           console.log(candidate.score);           if (candidate.score > 80) {             console.log(candidate.location);             var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };                geom = candidate.location;             var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);             //add a graphic to the map at the geocoded location             map.graphics.add(graphic);             map.graphics.add(new esri.Graphic(geom));              var features= [];             features.push(graphic);              var featureSet = new esri.tasks.FeatureSet();             featureSet.features = features;              //I THINK IM STUCK HERE?!              featgeom = features.geometry;              return false; //break out of loop after one candidate with score greater  than 80 is found.           }         });         if(geom !== undefined){         map.centerAndZoom(geom,12);         queryZip(featgeom);         }         else         alert("No address found.");       };        function queryZip(featgeom){          // Query         var query = new esri.tasks.Query();         query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;         query.outSpatialReference = {"wkid":102100};          query.returnGeometry = true;                 query.geometry = featgeom;         queryTask.execute(query);         dojo.connect(queryTask, "onComplete",  doBufferFunc());                 };        function doBufferFunc(){         alert("buffer");       };        dojo.addOnLoad(init);     </script>   </head>   <body class="claro">     <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:100%; height:100%;">       <div id="leftPane" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="left">         Enter an Address.  The application will find the closest Avon Sales Representative.          <br />         <textarea type="text" id="address"/>1600 pennsylvania ave, washington DC</textArea>         <br />         <button dojotype="dijit.form.Button" onclick="locate()"> Locate</button>        </div>       <div id="map" class="roundedCorners shadow" dojotype="dijit.layout.ContentPane" region="center">       </div>     </div>   </body> </html>

Thank you all.

ChadWilcomb · ‎03-30-2012

Evans, I think I got this working how you want it. The FeatureSet result from the queryTask is successfully being passed to the doBufferFunc function now.

A couple things-

1) I moved the queryTask out of init() and into your queryZip() function. It was out of scope to the queryZip() function previously. I used a sample ESRI map service and added some outFields to the query to test it.

2) I got rid of the features[] thing you were doing. Since you only wanted the first candidate with score > 80, I just passed the candidate.location (geom) into the queryZip function.

Here's just the JS code with comments included...

    <script type="text/javascript">       dojo.require("esri.map");       dojo.require("esri.tasks.locator");       dojo.require("dojo.number");       dojo.require("dijit.form.Button");       dojo.require("dijit.form.Textarea");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.tasks.query");       dojo.require("esri.tasks.geometry");                           var map, locator;       var geom, featgeom;         function init() {                var initExtent = new esri.geometry.Extent({"xmin":-17497000,"ymin":2165000,"xmax":-4132000,"ymax":6969000,"spatialReference":{"wkid":102100}});         map = new esri.Map("map", { extent: initExtent});                  var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");         map.addLayer(basemap);     // var queryTask --> I moved this out of init() and into the query function            dojo.connect(map, 'onLoad', function(map) {           //resize the map when the browser resizes           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });                  locator = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");         dojo.connect(locator, "onAddressToLocationsComplete", showResults);                  map.infoWindow.resize(200,125);          }; //End of Init        function locate() {         map.graphics.clear();         var address = {"SingleLine":dojo.byId("address").value};         locator.outSpatialReference= map.spatialReference;         var options = {           address:address,           outFields:["Loc_name"]         };         locator.addressToLocations(options);       };        function showResults(candidates) {   console.log("showResults");   console.log(candidates);         var candidate;         var symbol = new esri.symbol.SimpleMarkerSymbol();         var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");          symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);         symbol.setColor(new dojo.Color([153,0,51,0.75]));                  dojo.every(candidates,function(candidate){           console.log(candidate.score);           if (candidate.score > 80) {             console.log(candidate.location);             var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };                geom = candidate.location;             var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);             //add a graphic to the map at the geocoded location             map.graphics.add(graphic);             map.graphics.add(new esri.Graphic(geom));   //You don't need to do all this features business, just pass the geom variable to queryZip()                 //var features= [];             //features.push(graphic);              //var featureSet = new esri.tasks.FeatureSet();             //featureSet.features = features;              //I THINK IM STUCK HERE?!              //featgeom = features.geometry;                 return false; //break out of loop after one candidate with score greater  than 80 is found.           }         });         if(geom !== undefined){         map.centerAndZoom(geom,12);         queryZip(geom);         }         else         alert("No address found.");       };        function queryZip(geom){  //I grabbed a random ESRI map service for the QueryTask         var queryTask = new esri.tasks.QueryTask("http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Tapestry/MapServer/2");          // Query         var query = new esri.tasks.Query();         query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;         query.outSpatialReference = {"wkid":102100};          query.returnGeometry = true;                 query.geometry = geom;         queryTask.execute(query, doBufferFunc);   console.log(query);         //dojo.connect(queryTask, "onComplete",  doBufferFunc());        };        function doBufferFunc(featureSet){         console.log(featureSet);       };        dojo.addOnLoad(init);     </script>

View solution in original post

ChadWilcomb · ‎03-30-2012

Evans, I think I got this working how you want it. The FeatureSet result from the queryTask is successfully being passed to the doBufferFunc function now.

A couple things-

1) I moved the queryTask out of init() and into your queryZip() function. It was out of scope to the queryZip() function previously. I used a sample ESRI map service and added some outFields to the query to test it.

2) I got rid of the features[] thing you were doing. Since you only wanted the first candidate with score > 80, I just passed the candidate.location (geom) into the queryZip function.

Here's just the JS code with comments included...

    <script type="text/javascript">       dojo.require("esri.map");       dojo.require("esri.tasks.locator");       dojo.require("dojo.number");       dojo.require("dijit.form.Button");       dojo.require("dijit.form.Textarea");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.tasks.query");       dojo.require("esri.tasks.geometry");                           var map, locator;       var geom, featgeom;         function init() {                var initExtent = new esri.geometry.Extent({"xmin":-17497000,"ymin":2165000,"xmax":-4132000,"ymax":6969000,"spatialReference":{"wkid":102100}});         map = new esri.Map("map", { extent: initExtent});                  var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");         map.addLayer(basemap);     // var queryTask --> I moved this out of init() and into the query function            dojo.connect(map, 'onLoad', function(map) {           //resize the map when the browser resizes           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });                  locator = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");         dojo.connect(locator, "onAddressToLocationsComplete", showResults);                  map.infoWindow.resize(200,125);          }; //End of Init        function locate() {         map.graphics.clear();         var address = {"SingleLine":dojo.byId("address").value};         locator.outSpatialReference= map.spatialReference;         var options = {           address:address,           outFields:["Loc_name"]         };         locator.addressToLocations(options);       };        function showResults(candidates) {   console.log("showResults");   console.log(candidates);         var candidate;         var symbol = new esri.symbol.SimpleMarkerSymbol();         var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");          symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);         symbol.setColor(new dojo.Color([153,0,51,0.75]));                  dojo.every(candidates,function(candidate){           console.log(candidate.score);           if (candidate.score > 80) {             console.log(candidate.location);             var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };                geom = candidate.location;             var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);             //add a graphic to the map at the geocoded location             map.graphics.add(graphic);             map.graphics.add(new esri.Graphic(geom));   //You don't need to do all this features business, just pass the geom variable to queryZip()                 //var features= [];             //features.push(graphic);              //var featureSet = new esri.tasks.FeatureSet();             //featureSet.features = features;              //I THINK IM STUCK HERE?!              //featgeom = features.geometry;                 return false; //break out of loop after one candidate with score greater  than 80 is found.           }         });         if(geom !== undefined){         map.centerAndZoom(geom,12);         queryZip(geom);         }         else         alert("No address found.");       };        function queryZip(geom){  //I grabbed a random ESRI map service for the QueryTask         var queryTask = new esri.tasks.QueryTask("http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Tapestry/MapServer/2");          // Query         var query = new esri.tasks.Query();         query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;         query.outSpatialReference = {"wkid":102100};          query.returnGeometry = true;                 query.geometry = geom;         queryTask.execute(query, doBufferFunc);   console.log(query);         //dojo.connect(queryTask, "onComplete",  doBufferFunc());        };        function doBufferFunc(featureSet){         console.log(featureSet);       };        dojo.addOnLoad(init);     </script>

evanpicard · ‎04-02-2012

Chadsley, you are awesome.