topic Re: Zoom to Results Layer in ArcGIS JavaScript Maps SDK Questions

Zoom to Results Layer

MaksimMazor1 — Thu, 27 Jun 2013 14:21:31 GMT

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"); });

Re: Zoom to Results Layer

JohnGravois — Sat, 11 Dec 2021 08:50:11 GMT

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);

Re: Zoom to Results Layer

MaksimMazor1 — Thu, 27 Jun 2013 16:20:38 GMT

Excellent! That is exactly what I needed, thanks!

Re: Zoom to Results Layer

MaksimMazor1 — Thu, 27 Jun 2013 17:06:05 GMT

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.

Re: Zoom to Results Layer

JohnGravois — Thu, 27 Jun 2013 17:13:42 GMT

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.

Re: Zoom to Results Layer

KenBuja — Thu, 27 Jun 2013 17:57:23 GMT

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

Re: Zoom to Results Layer

JohnGravois — Thu, 27 Jun 2013 18:03:56 GMT

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

Re: Zoom to Results Layer

MaksimMazor1 — Sat, 11 Dec 2021 08:50:14 GMT

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.

Re: Zoom to Results Layer

MaksimMazor1 — Thu, 27 Jun 2013 18:54:25 GMT

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);