Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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");
});
share|improve this question

2 Answers 2

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

share|improve this answer
    
Will this zoom in to the route displayed on the map? –  Maksim Jun 27 '13 at 12:35
    
I think so, but if you made a jsfiddle with your javascript and html code we could be a lot more helpful. –  CLJ Jun 27 '13 at 12:49
    
jsfiddle.net/z73yh –  Maksim Jun 27 '13 at 12:54
up vote 0 down vote accepted

I got this to work for me!

var extent = esri.graphicsExtent(featureset.features);
    myMap.setExtent(extent);
share|improve this answer
1  
Can you explain why it worked and what happened, and if it did work out, you could perhaps mark the question as answered –  dassouki Jun 27 '13 at 18:49
    
I cannot accept my own answer until tomorrow. –  Maksim Jun 27 '13 at 19:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.