Zoom to Results on Map

Question

I made a web app that displays delivery routes associated with a user-input zip code. My question is, how can I get the map to zoom to the results? Here is my code. Im thinking of some sort of zoom-to-extent, is that along the correct path?

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[i] === 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");
});

Answer 1

I think you are almost there. The Javascript API has a namespace method, esri.graphicsExtent, you can use that to get the extent of an array of graphics. Put this code right below your line of code that contains: myMap.addLayer(resultsLayer)

var myFeatureExtent = esri.graphicsExtent(resultsLayer);
map.setExtent(myFeatureExtent);

https://developers.arcgis.com/en/javascript/jsapi/namespace_esri.html#graphicsextent

Answer 2

I got this to work for me!

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