0

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

3
  • 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
0

I got this to work for me!

var extent = esri.graphicsExtent(featureset.features);
    myMap.setExtent(extent);
1
  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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