I'm creating my first custom widget using the find task. I can retrieve and display the attributes of the returned records but I'm having issues adding graphics to the map. I've created a graphicsLayer called resultsLayer and added it to the map but I keep getting the following error: TypeError: Cannot read property '_graphicsLayer' of undefined. . Any help is appreciated.
showFindResults: function(results){
console.log("showFindResults");
var markerSymbol = symbolJsonUtils.fromJson(this.config.symbols.simplemarkersymbol);
var lineSymbol = symbolJsonUtils.fromJson(this.config.symbols.simplelinesymbol);
var polygonSymbol = symbolJsonUtils.fromJson(this.config.symbols.simplefillsymbol);
var resultItems = [];
var result, attribs;
array.forEach(results, function (result){
var graphic = result.feature;
attribs = result.feature.attributes;
resultItems.push("Compkey: " + "<b>" + attribs.COMPKEY + "</b><br>");
resultItems.push("Unitid: " + "<b>" + attribs.UNITID + "</b><br>");
resultItems.push("Layer Name: " + "<b>" + result.layerName + "</b><br>");
resultItems.push("<br>");
switch (graphic.geometry.type)
{
case "point":
graphic.setSymbol(markerSymbol);
break;
case "polyline":
graphic.setSymbol(lineSymbol);
break;
case "polygon":
graphic.setSymbol(polygonSymbol);
break;
}
this.resultsLayer.add(graphic);
//this.map.graphics.add(graphic);
});
Solved! Go to Solution.
James,
The problem is a simple scope issue as your array function place its function block in a different scope and it can not find this.resultsLayer.
the fix is to use lang.hitch.
array.forEach(results, lang.hitch(this, function (result){
The error message sounds like you not add the GraphicsLayer | API Reference | ArcGIS API for JavaScript into the Application. Or at least that application doesn't recognize this class "esri/layers/GraphicsLayer"
Would you make sure your widget js file, the dojoLoader has this class and the order is also correct?
For example:
define([ 'dojo/_base/declare', 'dojo/_base/html', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', 'dijit/layout/TabContainer', "dijit/layout/ContentPane", 'jimu/utils', 'jimu/dijit/Message', "dojo/Deferred", "dojo/promise/all", "esri/layers/GraphicsLayer", ], function( declare, html, _WidgetsInTemplateMixin, BaseWidget, TabContainer, ContentPane, utils, Message, Deferred, all, GraphicsLayer,
Thanks for your reply. That was one of the first things I checked...Have a look below:
define(['dojo/_base/declare',
'jimu/BaseWidget',
'dijit/_WidgetsInTemplateMixin',
'dijit/form/TextBox',
'dijit/ProgressBar',
'dojo/on',
'dojo/_base/array',
'dojo/_base/lang',
'dojo/_base/html',
'esri/layers/GraphicsLayer',
'esri/graphic',
'esri/graphicsUtils',
'esri/tasks/query',
'esri/tasks/QueryTask',
'esri/tasks/FindParameters',
'esri/tasks/FindTask',
'esri/tasks/FindResult',
"esri/symbols/jsonUtils",
'esri/symbols/SimpleMarkerSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/SimpleFillSymbol',
'esri/Color'],
function(declare, BaseWidget, _WidgetsInTemplateMixin, TextBox, ProgressBar, on, array, lang, html, GraphicsLayer,
Graphic, graphicsUtils, Query, QueryTask, FindParameters, FindTask, FindResult, symbolJsonUtils,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color)
James,
The problem is a simple scope issue as your array function place its function block in a different scope and it can not find this.resultsLayer.
the fix is to use lang.hitch.
array.forEach(results, lang.hitch(this, function (result){
Thanks Robert, that was it!