Zoom to Results Layer

[MaksimMazor1]

I built a web app where the user inputs a Zip Code and the delivery routes associated with the Zip Code are displayed. What can I do to zoom the map to the route? I've tried graphics extent and zoom to extent, i'm assuming incorrectly.

dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.dijit.Scalebar"); dojo.require("dijit.form.Button"); dojo.require("esri.map"); dojo.require("esri.geometry"); dojo.require("esri.tasks.gp"); dojo.require("esri.graphic"); dojo.require("dojo.dom"); dojo.require("dojo.on"); dojo.require("dojo.query");  var myMap; var resultsLayer;  function init() {     myMap = new esri.Map("mapDiv", {         basemap: "streets",         center: [-89.9, 35.1],         zoom: 10     });      dojo.connect(myMap, 'onLoad', function () {         var scalebar = new esri.dijit.Scalebar({             map: myMap,             scalebarUnit: "english"         });     });      require(['dojo/on', 'dojo/query'],         function (on, query) {             on(query('#myList'), 'change', function (e) {                 gpURL = e.target.value;                 console.log('Environment changed: ' + '"' + gpURL + '"');             });         });      if (!Array.prototype.indexOf) {         Array.prototype.indexOf = function (obj, start) {             for (var i = (start || 0), j = this.length; i < j; i++) {                 if (this === obj) {                     return i;                 }             }             return -1;         };     }      resultsLayer = new esri.layers.GraphicsLayer();     myMap.addLayer(resultsLayer) }  dojo.addOnLoad(init);  function selectZIP(Zip_code) {      gp = new esri.tasks.Geoprocessor(gpURL);     gp.setOutputSpatialReference(myMap.spatialReference);      var params = {         "ZIP": Zip_code,         "Rte_Box": "C",     };      gp.execute(params, displayResults);      function displayResults(results, messages) {         var featureset = results[0].value;           var simplePolySymbol = new esri.symbol.SimpleFillSymbol();         simplePolySymbol.setOutline(new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 96, 170, .75]), 1));          dojo.forEach(featureset.features, function (feature) {             feature.setSymbol(simplePolySymbol);              resultsLayer.add(feature);         });          myMap.addLayer(resultsLayer)         myMap.Search.handleStats(results, messages)       }          myMap.Search = {         gpGetStats: new esri.tasks.Geoprocessor(gpURL),         getRouteStats: function () {             console.log(dojo.byId('resultsLayer').value)             var params = {                 "ZIP_CRID": dojo.byId('resultsLayer').value             };             resultsLayer.Search.gpGetStats.execute(params, resultsLayer.Search.handleStats);         },             handleStats: function (results, messages) {             console.log(results);              var content = '';              content += '<table>';             content += '<tr><td> ZIP CRID </td><td> Bus </td><td> Res </td><td> Tot </td><td> &lt;200 </td><td> DS Key </td></tr>';              dojo.forEach(results[0].value.features, function (crid, i) {                 console.log(crid.attributes.ZIP_CRID + ', ');                 content += '<tr><td>' + crid.attributes.ZIP_CRID;                 content += '</td><td> ' + crid.attributes.BUS_CNT;                 content += '</td><td> ' + crid.attributes.RES_CNT;                 content += '</td><td> ' + crid.attributes.TOT_CNT;                 content += '</td><td> ' + crid.attributes.LT_200_IND;                 content += '</td><td> ' + crid.attributes.DS_KEY + '</td></tr>';             });             content += '</table>';             dojo.byId('details').innerHTML = content;         },     } }   dojo.ready(function () {     var clearMe = new dijit.form.Button({         label: "Clear Map",         onclick: function (init) {             dojo.byId('details').innerHTML = '';             resultsLayer.clear();         }     }, "clearMe"); });

[JohnGravois]

have you already tried calling getExtent() on the result polyline geometry and passing to map.setExtent()?

var extent = results[0].value.features[0].geometry.getExtent();
map.setExtent(extent);

[MaksimMazor1]

Excellent! That is exactly what I needed, thanks!

[MaksimMazor1]

Spoke too soon. While the functionality that I am looking for is there, it appears to zoom in on the first feature in a feature set of around 50. How do I get it to zoom to where all the lines fit within the screen.

[JohnGravois]

correct, the approach i outlined before just interrogates the first result in the array.  in order to find the extent of all the features in the collection, you might consider looping through the results to extract an array of geometry objects and then making a call to a geometry service to union them.

check out this "buffer" sample to get a general idea of how to make calls to the geometry service.

[KenBuja]

Would it be faster to loop through all the extents and use the Union method on the extent than to use a geometry service?

[JohnGravois]

good call.  🙂
i knew there was a clientside call to union somewhere, but i just couldn't remember where...

[MaksimMazor1]

I've gotten this far, this is my first time working with javascript and creating a web app. Im assuming this loops through the extents.

for (var i=0, il=featureset.features.length; i<il; i++) { 
 var extent = featureset.features.geometry.getExtent();
  myMap.setExtent(extent); 
 }

Where do I call the union(), not too sure what to include in the parenthesis.

[MaksimMazor1 · Accepted solution]

Got this to work exactly like I needed! Thanks for steering me down the right path!

var extent = esri.graphicsExtent(featureset.features); myMap.setExtent(extent);