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/Electri...");
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/Electri...");
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/Electri...");
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/Electri...");
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
