Latest Contributions by KenGalluccio

I have some code that will geocode a point and display it on the map.  I would like to label the point with the address. I create a label graphic using the coordinates of the point and the address, add graphic to the graphics layer, but it does not display on the map. Not sure what I am missing.   Here is the section of code:                fromlocator.on("location-to-address-complete", function(evt) {                     //mapMain.graphics.remove(fGraphic);                     var attr;                     if (evt.address.address) {                     var fromAddress = evt.address.address;                     alert(fromAddress.Address + ", " + fromAddress.City + ", " + fromAddress.Region, ", " + fromAddress.Postal);                          if (fromAddress){                               document.getElementById("fromAddr").value = fromAddress.Address + ", " + fromAddress.City + ", " + fromAddress.Region, ", " + fromAddress.Postal;                               fPoint = new Point(evt.address.location, new SpatialReference({ wkid: 4326 }));                               attr = {                                    "Address": fromAddress                               };                                                              //Create point graphic from geocoded point, add to graphiclayer, add layer to map.                               fGraphic = new Graphic(fPoint, fromGeocodeSymbol, attr);                               graphicsLayer = new GraphicsLayer();                               graphicsLayer.add(fGraphic);                               mapMain.addLayer(graphicsLayer);                                                              // create a text symbol to define the style of labels                               var textColor = new Color("#666");                               var textLabel = new TextSymbol(fromAddress)                               textLabel.setColor(textColor);                               textLabel.font.setSize("14pt");                               textLabel.font.setFamily("arial");                               textLabelRenderer = new SimpleRenderer(textLabel);                                                                             //create label to add to graphic layer                               var testlabel = new Graphic(fPoint, textLabel)                                                              //add label to graphics layer                               mapMain.graphics.add(testlabel);                                                              zoomToAddresses();                                                   getZone(fPoint, "from");                                     }                     }                });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

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("</br><tr><td><b>Zone: ${Zone}</b></tr></td>");                taxiTemplate.setContent("<tr><b>Fare: $</b><td>${Fare}</td></tr></br>");                //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);                                    }                                                        }                                                                   };             }         });     }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

I am a beginner to ESRI javascript. I am attempting to write a script that will allow the user to enter a origin and destination address, display the points, and zoom to the extent of the two points. Using the search function I have been able to geocode both points and display them on the map. I would like to get the coordinates of each point and use them to set the extent of the map. Problem I am having is that I cannot access the coordinates of the points outside fromSearch.on('select-result', function(result). I set a global variable for the coordinates. I can assign and get the coordinates within fromSearch.on('select-result', function(result), but if I try to access this variable outside this function I get Undefined. I cannot figure out what I am missing. 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,   });   /*   * Step: Add the ada layer layer to the map   */   var adaLayer = new FeatureLayer("http://services2.arcgis.com/A3lMfLhXIUtyxP6p/arcgis/rest/services/ADA_Aug14/FeatureServer/0",{     opacity : .5   });   mapMain.addLayer(adaLayer);   var symbol = new SimpleFillSymbol().setColor(new Color([255,0,0,0.5]));   var renderer = new SimpleRenderer(symbol);   adaLayer.setRenderer(renderer);   /*   * 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("fromButton").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);     //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);       fromXCoord = fromWebCoords.x       console.log("inside local from function " + fromXCoord);     });     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.     toSearch.on('select-result', function(result){       toWebCoords = webMercatorUtils.webMercatorToGeographic(result.result.feature.geometry);       toXCoord = toWebCoords.x       console.log("inside local from function " + toXCoord);     });     console.log("Outside local function " + fromXCoord);     console.log("Outside local function " + toXCoord);   } });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more