setExtent zooms in too far

Question

I have some code that will allow a user to geocode two addresses. It will display the points of the addresses on the map. I want to then set the extent of the map to the two points. To accomplish this I get the x and y coordinates of both points, create a polyline, get and set the extent of the polyline as the new extent of the map. The problem is that the new extent is zoomed in a bit to far and you have to zoom out one level to see the points. To get around this i thought I would be able to get the zoom level after the setExtent using the extent-change listener and add one to it to zoom the map out one level. Problem is if I put the setZoom within the extent-change listener function, the code will get into a loop. If I put the setZoom outside this function it is undefined. Specifically the lines starting at 252 are in question. I am not sure what else I can check or where else I can put the setZoom so that it does not get called until zoom is populated. /** * Created by Student on 11/20/2014. */ var mapMain; var fromXCoord; var toXCoord; var pLine; var fPoint; var tPoint; var fromZone; var toZone; var fZone; var tZone; var numPass; // @formatter:off require([         "esri/map",           "esri/SpatialReference",           "esri/geometry/webMercatorUtils",         "esri/geometry/Extent",           "esri/InfoTemplate",         "esri/layers/FeatureLayer",           "esri/layers/LabelClass",         "esri/dijit/Scalebar",           "esri/symbols/SimpleFillSymbol",           "esri/symbols/SimpleLineSymbol",           "esri/symbols/SimpleMarkerSymbol",           "esri/symbols/TextSymbol",           "esri/Color",           "esri/renderers/SimpleRenderer",           "esri/renderers/UniqueValueRenderer",           "esri/dijit/Search",           "esri/graphic",           "esri/geometry/Polyline",           "esri/geometry/Point",           "esri/tasks/query",           "esri/tasks/QueryTask",                    "dojo/ready",         "dojo/parser",         "dojo/on",           "dojo/domReady!",           "dojo/promise/all",                    "dijit/layout/BorderContainer",         "dijit/layout/ContentPane",           "dijit/TitlePane",           "dijit/registry"           ],     function(         Map,SpatialReference,webMercatorUtils,Extent,InfoTemplate,FeatureLayer,LabelClass,Scalebar,SimpleFillSymbol,SimpleLineSymbol,SimpleMarkerSymbol,TextSymbol,Color,SimpleRenderer,UniqueValueRenderer,           Search,Graphic,Polyline,Point,Query,QueryTask,         ready, parser, on, all,         BorderContainer, ContentPane, TitlePane, registry         ) { // @formatter:on         // Wait until DOM is ready *and* all outstanding require() calls have been resolved         ready(function() {                        // Parse DOM nodes decorated with the data-dojo-type attribute             parser.parse();                                                     /*                 * Step: Specify the initial extent                 * Note: Exact coordinates may vary slightly from snippet/solution                 */                var extentInitial = new Extent({                  "xmin" : -74.0249340000041,                  "ymin" : 42.5025420000134,                  "xmax" : -73.5927189999818,                  "ymax" : 43.1172190002567,                  "spatialReference" : {                     "wkid" : 4326                  }                });                // Create the map             mapMain = new Map("cpCenter", {                 basemap : "osm",                     extent : extentInitial,                     showLabels : true             });                             /*              * Step: Add the taxi layer layer to the map              */                var albTaxiLayerURL = "http://services2.arcgis.com/A3lMfLhXIUtyxP6p/arcgis/rest/services/CityOfAlbanyTaxi/FeatureServer/0"                                               //Step: Specify the output fields.                var taxiOutFields = ["OBJECTID", "Zone", "Fare"];                //Template for popup when user clicks a zone.                var taxiTemplate = new InfoTemplate();                taxiTemplate.setTitle("
Zone: ${Zone}");                taxiTemplate.setContent("Fare: $${Fare}
");                //Construct the taxi layer                var taxiLyr = new FeatureLayer(albTaxiLayerURL, {                  infoTemplate : taxiTemplate,                  outFields : taxiOutFields,                });                                var defStyle = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,                new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL,new Color([0,0,0])),new Color([215,252,216,0.75])                );                                //This section crate the thematic to color code each zone                var renderer = new UniqueValueRenderer(defStyle, "Zone");                     //add symbol for each possible value                     renderer.addValue("A", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL,new Color([0,0,0])),new Color([49,70,140, .25])));                     renderer.addValue("B", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL,new Color([0,0,0])),new Color([159,188,245, .25])));                     renderer.addValue("C", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL,new Color([0,0,0])),new Color([135,59,92, .25])));                     renderer.addValue("D", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL,new Color([0,0,0])),new Color([68,135,108, .25])));                     renderer.addValue("E", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL,new Color([0,0,0])),new Color([245,95,235, .25])));                     renderer.addValue("F", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL,new Color([0,0,0])),new Color([227,117,84, .25])));                     renderer.addValue("G", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL,new Color([0,0,0])),new Color([232,245,115, .25])));                     renderer.addValue("X", new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,                                                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([0,0,0]),.5),new Color([232,245,115, 0])));                taxiLyr.setRenderer(renderer);                                          // create a text symbol to define the style of labels                var labelColor = new Color("#666");                var zoneLabel = new TextSymbol().setColor(labelColor);                zoneLabel.font.setSize("14pt");                zoneLabel.font.setFamily("arial");                var json = {                     "labelExpressionInfo": {"value": "{Zone}"}                };                //create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)                var labelClass = new LabelClass(json);                labelClass.symbol = zoneLabel; // symbol also can be set in LabelClass' json                taxiLyr.setLabelingInfo([ labelClass ]);                mapMain.addLayer(taxiLyr);                mapMain.centerAndZoom(new Point(-73.769879, 42.662037, new SpatialReference({ wkid: 4326 })), 12);                             /*              * Step: Add the scalebar widget to the map              */             var scalebar = new Scalebar({                 map: mapMain,                 // "dual" displays both miles and kilmometers                 // "english" is the default, which displays miles                 // use "metric" for kilometers                 scalebarUnit: "dual"             });                //from address geocoder                var fromSearch = new Search({                enableLabel: true,                enableInfoWindow: false,                   autoNavigate: false,                map: mapMain             }, "");                fromSearch.startup();                //to address geocoder                var toSearch = new Search({                enableLabel: true,                enableInfoWindow: false,                   autoNavigate: false,                map: mapMain             }, "");                toSearch.startup();                                dijit.registry.byId("goButton").on("click", doSearchValue);                                function doSearchValue(e) {                     var fromAddress = document.getElementById("fromAddr").value                     //alert(fromAddress);                        //highlight symbol                          fromGeocodeSymbol = new SimpleMarkerSymbol(                            SimpleMarkerSymbol.STYLE_CIRCLE,                            20,                            new SimpleLineSymbol(                               SimpleLineSymbol.STYLE_SOLID,                               new Color([85,82,82, 0.5]),                               10                            ), new Color([76,230,0, 0.9]));                        fromSearch.sources[0].highlightSymbol = fromGeocodeSymbol; //set the symbol for the highlighted symbol                        fromSearch.search(fromAddress);                     var toAddress = document.getElementById("toAddr").value                     //alert(toAddress);                        //highlight symbol                          var toGeocodeSymbol = new SimpleMarkerSymbol(                            SimpleMarkerSymbol.STYLE_CIRCLE,                            20,                            new SimpleLineSymbol(                               SimpleLineSymbol.STYLE_SOLID,                               new Color([85,82,82, 0.5]),                               10                            ), new Color([245,29,29, 0.9]));                        toSearch.sources[0].highlightSymbol = toGeocodeSymbol; //set the symbol for the highlighted symbol                        //If multiple results are found, it will default and select the first.                        toSearch.search(toAddress);                                            //get coordinates of toAddress to pass to use to create polyline for zooming to extent.                                           fromSearch.on('select-result', function(result){                          fromWebCoords = webMercatorUtils.webMercatorToGeographic(result.result.feature.geometry);                          getCoordsAndZoom(fromWebCoords, "from");                          });                     toSearch.on('select-result', function(result){                          toWebCoords = webMercatorUtils.webMercatorToGeographic(result.result.feature.geometry);                          getCoordsAndZoom(toWebCoords, "to");                          });                                               function getCoordsAndZoom(geoResults, which){                                                    if(which === "from"){                               fromXCoord = geoResults.x;                               fromYCoord = geoResults.y;                               fPoint = new Point(fromXCoord, fromYCoord, new SpatialReference({ wkid: 4326 }));                               //console.log("In checkResults from " + fromXCoord);                                                                                       }else{                               toXCoord = geoResults.x;                               toYCoord = geoResults.y;                               tPoint = new Point(toXCoord, toYCoord, new SpatialReference({ wkid: 4326 }));                          }                                                    if(fromXCoord && fromYCoord && toXCoord && toYCoord){                               var zoom;                               //Create polyline that will be used to zoom to the extent of both points that were geocoded                               var pLine = new Polyline(new SpatialReference({wkid:4326}));                               pLine.addPath([[fromXCoord, fromYCoord],[toXCoord, toYCoord]]);                               mapMain.setExtent(pLine.getExtent());                               mapMain.on('extent-change', function(){                                    zoom = mapMain.getZoom() + 1;                               });                                                              if (zoom){                                    mapMain.setZoom(zoom);                                    }                                                        }                                                                   };             }         });     }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Accepted Answer

Ken, You should just expand the extent of the polyline before you set the maps extent: if(fromXCoord && fromYCoord && toXCoord && toYCoord){ var zoom; //Create polyline that will be used to zoom to the extent of both points that were geocoded var pLine = new Polyline(new SpatialReference({wkid:4326})); pLine.addPath([[fromXCoord, fromYCoord],[toXCoord, toYCoord]]); mapMain.setExtent(pLine.getExtent().expand(1.2), true); // the second parameter ensure that the extent fit into the zoom level //expand(1.2) means take the extent and expand it by 20% //No need for the foloowing lines //mapMain.on('extent-change', function(){ // zoom = mapMain.getZoom() + 1; //}); //if (zoom){ // mapMain.setZoom(zoom); //} }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍