Latest Contributions by TylerJones3

Using the Web Application Builder, I am trying to make a Measurement widget that will snap to one particular (line) feature layer. The snapping at first appears to be working on the map: Hovering the mouse near a feature will create the default blue + symbol on the feature. However, no actual snap occurs when the mouse is clicked. The same happens when trying to complete the measurement. The start and end points don't actually snap at all, they are set where the mouse pointer is, not where the blue + is. I found that if I do not specify layerInfos in the code below (line 25), the snapping works correctly. The problem is that the snapping manager will not use my line feature layer and instead defaults to a different layer in the map. What is wrong in the code below that is causing the actual snap part of the process to fail? Lines 01 to 14 is a for loop that is finding my line layer (Distribution). Lines 17 to 25 are getting the snapManager set up with the right properties and layer to snap to. var url = ""; for(var j = 0; j < this.map.layerIds.length; j++) {     var layer = this.map.getLayer(this.map.layerIds );     var items = layer.layerInfos;         for (h = 0; h < items.length; h++) {                     if (items .name === "Distribution"){               if (url === ""){                     url = layer.url + "/" + items .id;               }              break;             }         } }      var snaplayer =  new FeatureLayer(url); var snapManager = this.map.enableSnapping({     tolerance: 30,     alwaysSnap: true }); var layerInfos = [{     layer: snaplayer }]; snapManager.setLayerInfos(layerInfos); ... View more

I have two graphics layers I am using to track a user's searches in a custom widget. Users are allowed to search using partial query strings; their results are written out to a datagrid and the matching features are shown on the map using blue circles in a graphicslayer I named GLayerResults. There is a second graphics layer for when a user clicks on an item in the datagrid. The selected feature will then highlight on the map using a red square. This graphics layer is named GLayerDGSel. The first iteration works correctly; a partial search will return multiple features which highlight on the map and then clicking on one of the features in the datagrid highlights that feature with a red square. Two problems occur after this: 1)Clicking on a different feature will clear the original red square but the blue circle disappears too which should not happen and 2)Panning or zooming the map after results in all prior red squares reappearing on the map at once even though they were cleared. How do I keep these features permanently cleared? Code below (the graphics layer clear happens on line 148). define([       'dojo/_base/declare',       'dijit/_WidgetsInTemplateMixin',       'jimu/BaseWidget',       'dojo/parser',       'dojo/_base/lang',       'dojo/_base/query',       'dojo/_base/html',       'dojo/_base/array',       'dojo/_base/fx',       'dojo/promise/all',       'dojo/Deferred',       'esri/map',       'esri/layers/GraphicsLayer',       'esri/graphic',       'esri/graphicsUtils',       'dojo/on',       'dojo/dom',       'dijit/registry',       'dojo/_base/connect',       'dojo/_base/array',       'dojo/data/ItemFileReadStore',       'esri/tasks/query',       'esri/tasks/QueryTask',       'esri/layers/FeatureLayer',       'jimu/MapManager',       'esri/geometry/Extent',       'esri/Color',       'esri/symbols/SimpleMarkerSymbol',       'esri/symbols/SimpleLineSymbol',       'esri/InfoTemplate',       'dojox/grid/DataGrid',       'dijit/layout/BorderContainer',       'dijit/layout/ContentPane'       ], function(declare, _WidgetsInTemplateMixin, BaseWidget, parser, lang, query, html, array, fx, all, Deferred, Map, GraphicsLayer, Graphic, graphicsUtils, on, dom, registry, connect, arrayUtils, ItemFileReadStore, Query, QueryTask, FeatureLayer, MapManager, Extent, Color, SimpleMarkerSymbol, SimpleLineSymbol, InfoTemplate){ //a   parser.parse();   //To create a widget, you need to derive from BaseWidget.   return declare([BaseWidget, _WidgetsInTemplateMixin], { //b     // Custom widget code goes here         baseClass: 'jimu-widget-nessearch',     name: 'NESSearch',     GLayerResults: null,     GLayerDGSel: null,     testLayer: null,     selGraphic: null,         //methods to communication with app container:     postMixInProperties: function(){//1       this.inherited(arguments);       },//1         startup: function(){ //c       console.log('startup');       testLayer = new GraphicsLayer({id:'test'});       testLayer.url = "test_sel";       GLayerDGSel = new GraphicsLayer({id:'dg_sel'});       GLayerDGSel.url = "dg_sel_url";       this.map.addLayer(GLayerDGSel);             GLayerResults = new GraphicsLayer({id:'dg_res'});       GLayerResults.url = "dg_res_url";       this.map.addLayer(GLayerResults);             }, //c         _onPointBtnClicked: function(){ //d               var query = new Query();       query.outSpatialReference = this.map.spatialReference; //The basemap's spatial reference does not match the other layers. Set the query to match.       query.returnGeometry = true;                 this.map.graphics.clear();       GLayerResults.clear();       var queryTask, infoTemplate, store;       switch (dom.byId("SelectType").selectedIndex) { //e         case 0: //Pole           queryTask = new esri.tasks.QueryTask("http://utility.arcgis.com/usrsvcs/servers/3de80160798b44879737f6d2b050994d/rest/services/NES/Electric/MapServer/0");           query.outFields = ["POLE_NO", "PNO", "NODE_ID"];           query.where = "UPPER(POLE_NO) LIKE UPPER('%" + dom.byId("SearchValue").value + "%')";           infoTemplate = new esri.InfoTemplate("${POLE_NO}", "Pole Number : ${POLE_NO}<br/> PNO : ${PNO}<br/> NODE_ID : ${NODE_ID}");                break;         case 1: //XFMR           queryTask = new esri.tasks.QueryTask("http://utility.arcgis.com/usrsvcs/servers/3de80160798b44879737f6d2b050994d/rest/services/NES/Electric/MapServer/7");           query.outFields = ["XFMR_NO"];           query.where = "UPPER(XFMR_NO) LIKE UPPER('%" + dom.byId("SearchValue").value + "%')";           infoTemplate = new esri.InfoTemplate("${POLE_NO}", "Pole Number : ${POLE_NO}<br/> PNO : ${PNO}<br/> NODE_ID : ${NODE_ID}");           break;         case 2: //SWNO           queryTask = new esri.tasks.QueryTask("http://utility.arcgis.com/usrsvcs/servers/3de80160798b44879737f6d2b050994d/rest/services/NES/Electric/MapServer/6");           query.outFields = ["SWNO", "POLE_NO"];           query.where = "UPPER(SWNO) LIKE UPPER('%" + dom.byId("SearchValue").value + "%')";                     queryTask2 = new esri.tasks.QueryTask("http://utility.arcgis.com/usrsvcs/servers/3de80160798b44879737f6d2b050994d/rest/services/NES/Electric/MapServer/4");           query2.outFields = ["SWNO", "POLE_NO", "NODE_ID"];           query2.where = "UPPER(SWNO) LIKE UPPER('%" + dom.byId("SearchValue").value + "%')";           infoTemplate = new esri.InfoTemplate("${POLE_NO}", "Pole Number : ${POLE_NO}<br/> SWNO : ${SWNO}<br/> NODE_ID : ${NODE_ID}");           break;                 } //e       var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 204]), 1.5), new Color([0, 0, 255, 0.5]));            queryTask.execute(query, lang.hitch(this, showResults)) //Use lang.hitch, otherwise the wrong "this" will be obtained.       //queryTask2.execute(query2, lang.hitch(this, showResults))       function showResults(featureSet){//3                //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.         //Performance enhancer - assign featureSet array to a single variable.                 //New Datagrid code***********************************************         //create array of attributes         var items = arrayUtils.map(featureSet.features, function(feature){//4           return feature.attributes;         });//4         //Create data object to be used in store         var data = {//5           identifier: "POLE_NO", //This field needs to have unique values           label: "PoleNumber", //Name field for display. Not pertinent to a grid but may be used elsewhere.           items: items         };//5         //Create data store and bind to grid.         store = new ItemFileReadStore({//6           data: data         });//6                                    function onRowClickHandler(evt){//9           var clickedFeature = evt.grid.getItem(evt.rowIndex).POLE_NO;                    var selectedFeature = arrayUtils.filter(GLayerResults.graphics, function(graphic){             return ((graphic.attributes) && graphic.attributes.POLE_NO === clickedFeature);           });           if (selectedFeature.length) {             var spGraphic = selectedFeature[0];                        var resmarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 20, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SQUARE, new Color([255, 0, 0]), 1.5), new Color([255, 0, 0, 0.5]));                   GLayerDGSel.clear(); //does not work; item draws back in when panning.                         if (spGraphic.geometry.type === 'point') {                             spGraphic.setSymbol(resmarkerSymbol);               GLayerDGSel.add(spGraphic);             }           }         };//9                         this.ResultsGrid.setStore(store);         this.ResultsGrid.on("rowclick", lang.hitch(this, onRowClickHandler));                        var resultFeatures = featureSet.features;         if (resultFeatures.length > 0) {//7           for (var i = 0, il = resultFeatures.length; i < il; i++) {//8             //Get the current feature from the featureSet.             //Feature is a graphic             var graphic = resultFeatures;             graphic.setSymbol(markerSymbol);                         //Set the infoTemplate.             graphic.setInfoTemplate(infoTemplate);                                 //Add graphic to the map graphics layer.             //this.map.graphics.add(graphic);             GLayerResults.add(graphic);                         var myFeatureExtent = esri.graphicsExtent(resultFeatures);             this.map.setExtent(myFeatureExtent.expand(2.5));                       }//8                       }         else {           //alert("No features were found using the provided search string.");         }//7       }//3       return;           } //d   }); //b }); //a ... View more

I am attempting to write the results of a map search to a datagrid in a widget for ESRI's Web App Builder. I'm following an example from ESRI that comes from here: Show find task results in a DataGrid | ArcGIS API for JavaScript The problem I am having is that I cannot obtain the datagrid object. On line 124 I receive this error message: "resultsgrid.setStore is not a function" It is apparent from the debug code that I am not actually obtaining the "real" datagrid object, but I cannot discern how to get it. HTML: <div>      <div data-dojo-attach-point="SearchDiv" style="width:100%; height: 200px; background-color: #d9dde0";>        <select class="select-type" id="SelectType" data-dojo-attach-point="selecttype">           <option value="PoleNumber">Pole</option>           <option value="TransformerNumber">Transformer</option>           <option value="SWNO">SWNO</option>        </select>       <input type="text" class="tb-searchvalue" id="SearchValue" maxlength="10" data-dojo-attach-point="tbsearchvalue">       <button type="button" class="btn-search" data-dojo-attach-point="btnSearch" data-dojo-attach-event="onclick:_onPointBtnClicked">Search</button>          </div>     <div data-dojo-type="dijit/layout/BorderContainer" id="ResultsContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">      <table data-dojo-type="dojox/grid/DataGrid" data-dojo-attach-point="TestGrid" class="results-datagrid" data-dojo-id="gridresults" id="grid" data-dojo-props="rowsPerPage:'10', rowSelector:'20px'" style="width:100%; height: 200px; background-color: #8080c0;">       <thead>         <tr>           <th field="POLE_NO">PoleNumber</th>           <th field="PNO">PNO</th>         </tr>       </thead>     </table>     </div>   </div>      </div> JS: define([     'dojo/parser',     'dojo/_base/declare',     'dojo/_base/lang',     'dojo/_base/query',     'dojo/_base/html',     'dojo/_base/array',     'dojo/_base/fx',     'dojo/promise/all',     'dojo/Deferred',     'esri/map',     'esri/graphic',     'esri/graphicsUtils',     'dojo/on',     'jimu/BaseWidget',     'dojo/dom',     'dijit/registry',     'dojo/_base/connect',     'dojo/_base/array',     'dojo/data/ItemFileReadStore',     'esri/tasks/query',     'esri/tasks/QueryTask',     'esri/layers/FeatureLayer',     'jimu/MapManager',         'esri/geometry/Extent',     'esri/Color',     'esri/symbols/SimpleMarkerSymbol',     'esri/symbols/SimpleLineSymbol',     'esri/symbols/SimpleFillSymbol'          ], function(parser, declare, lang, query, html, array, fx, all, Deferred, Map, Graphic, graphicsUtils, on,  BaseWidget, dom, registry, connect, arrayUtils, ItemFileReadStore, Query, QueryTask,  FeatureLayer, MapManager,  Extent, Color, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) { //a     parser.parse();   //To create a widget, you need to derive from BaseWidget.   return declare([BaseWidget], { //b     // Custom widget code goes here        baseClass: 'jimu-widget-nessearch',     name: 'Search',     //this property is set by the framework when widget is loaded.      //name: 'CustomWidget',    //methods to communication with app container:            postMixInProperties: function(){         this.inherited(arguments);         this.operationalLayers = [];         var strClearResults = this.nls.clearResults; //        var tip = esriLang.substitute({clearResults:strClearResults},this.nls.operationalTip); //        this.nls.operationalTip = tip; //        if(this.config){ //          this._updateConfig(); //        }       },    startup: function() { //c     //       this.mapIdNode.innerHTML = 'map id:' + this.map.id;       console.log('startup');    }, //c      _onPointBtnClicked: function(){ //d            var query = new Query();     query.outSpatialReference = this.map.spatialReference; //The basemap's spatial reference does not match the other layers. Set the query to match.     query.returnGeometry = true;             this.map.graphics.clear();      switch (dom.byId("SelectType").selectedIndex) { //e       case 0:  //First          queryTask = new esri.tasks.QueryTask(<Layer 0);               query.outFields = ["POLE_NO", "PNO", "NODE_ID"];         query.where = "UPPER(POLE_NO) LIKE UPPER('%" + dom.byId("SearchValue").value + "%')";         infoTemplate = new esri.InfoTemplate("${POLE_NO}", "Pole Number : ${POLE_NO}<br/> PNO : ${PNO}<br/> NODE_ID : ${NODE_ID}");             break;                } //e     var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 204]), 1.5),        new Color([0, 0, 255, 0.5]));                              queryTask.execute(query, lang.hitch(this, showResults))           function showResults(featureSet) {              //remove all graphics on the maps graphics layer                 //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.         //Performance enhancer - assign featureSet array to a single variable.                    //New Datagrid code***********************************************         //create array of attributes           var items = arrayUtils.map(featureSet, function (result) {            return result.feature.attributes;           });           //Create data object to be used in store           var data = {             identifier : "POLE_NO", //This field needs to have unique values             label : "PoleNumber", //Name field for display. Not pertinent to a grid but may be used elsewhere.             items : items           };           //Create data store and bind to grid.           store = new ItemFileReadStore({             data : data           });                               var resultsgrid = registry.byId("grid");           //var resultsgrid = dom.byId("grid");           resultsgrid.setStore(store);           resultsgrid.on("rowclick", onRowClickHandler);             var myFeatureExtent = esri.graphicsExtent(resultFeatures);             this.map.setExtent(myFeatureExtent.expand(2.5));         //****************************************************************                  var resultFeatures = featureSet.features;         if (resultFeatures.length > 0) {                             for (var i = 0, il = resultFeatures.length; i < il; i++) {             //Get the current feature from the featureSet.             //Feature is a graphic             var graphic = resultFeatures;             graphic.setSymbol(markerSymbol);                         //Set the infoTemplate.             graphic.setInfoTemplate(infoTemplate);                         //Add graphic to the map graphics layer.             this.map.graphics.add(graphic);                         var myFeatureExtent = esri.graphicsExtent(resultFeatures);             this.map.setExtent(myFeatureExtent.expand(2.5));                       }         }else{         //alert("No features were found using the provided search string.");         }       }         return;       } //d         }); //b }); //a ... View more