ArcGIS API JavaScript error to add layer

Question

I'm developing a custom widget for WebApp Builder. The widget calls a Geoprocessing service and the result must be added to map, but when I call a function this.map.addLayer() I receive the error message:

this.map.addLayer is not a function

This is the snippet of my code:

submitGpLr: function (tab1) {
 let params = {
 json: tab1
 };
 // lancia il geoprocessing, i callback sono sotto
 this.gpLr.submitJob(params, lang.hitch(this, this.gpLrJobComplete), this.gpLrJobStatus, this.gpLrJobFailed);
 },
 gpLrJobComplete: function (jobinfo) {
 this.gpLr.getResultData(jobinfo.jobId, "Output_Layer", function (results) {
 console.log(results);
 let jsonResult = results.value;
 // function addResultToMap
 let SR = jsonResult.spatialReference;
 let GT = "esriGeometryPolyline";
 let layerDefinition = {
 "geometryType": GT,
 "spatialReference": SR,
 "fields": jsonResult.fields
 };
 let featureCollection = {
 layerDefinition: layerDefinition,
 featureSet: {
 "geometryType": GT,
 "spatialReference": SR,
 "features": jsonResult.features
 }
 };
 let resultLayer = new FeatureLayer(featureCollection, {
 showLabels: true,
 spatialReference: SR
 });
 let sls = new esri.symbol.SimpleLineSymbol(
 esri.symbol.SimpleLineSymbol.STYLE_SOLID,
 new esri.Color([255, 0, 0]), 3.5
 );
 this.map.addLayer(resultLayer);
 });
 },
 gpLrJobFailed: function (err) {
 console.log("errore generico");
 console.log(err);
 },
 gpLrJobStatus: function () {
 }

and this is the snippet of global define:

define([
 'dojo/_base/declare',
 'dojo/_base/array',
 'dijit/_WidgetsInTemplateMixin',
 'jimu/BaseWidget',
 'jimu/dijit/Message',
 'esri/domUtils',
 'esri/dijit/Popup',
 'esri/arcgis/utils',
 'esri/layers/ArcGISDynamicMapServiceLayer',
 'esri/layers/FeatureLayer',
 'dojo/on',
 'dojo/topic',
 'dojo/query',
 'dojo/_base/html',
 'dojo/dom-class',
 'dojo/dom-construct',
 'dojo/dom',
 'dojo/_base/lang',
 'dojo/promise/all',
 'jimu/WidgetManager',
 'jimu/PanelManager',
 'jimu/MapManager',
 'dojo/i18n!esri/nls/jsapi',
 'jimu/FeatureActionManager',
 'jimu/dijit/FeatureActionPopupMenu',
 'jimu/utils',
 'dojo/_base/array',
 'dojo/query',
 'dijit/layout/ContentPane',
 'dijit/layout/TabContainer',
 'dojox/grid/DataGrid',
 'dojo/data/ItemFileWriteStore',
 './layerUtil',
 'jimu/LayerInfos/LayerInfos',
 'dojox/form/CheckedMultiSelect',
 'dojo/store/Memory',
 'esri/tasks/RelationshipQuery',
 'esri/request',
 'esri/tasks/QueryTask',
 'esri/tasks/query',
 'esri/tasks/Geoprocessor',
 'jimu/dijit/LoadingIndicator',
 'dgrid/Grid',
 'dstore/RequestMemory',
 'dstore/Trackable',
 'dgrid/OnDemandGrid',
 'dgrid/extensions/ColumnHider',
 'dgrid/extensions/ColumnReorder',
 'dgrid/extensions/ColumnResizer'
],
function (
 declare,
 array,
 _WidgetsInTemplateMixin,
 BaseWidget,
 Message,
 domUtils,
 Popup,
 utils,
 ArcGISDynamicMapServiceLayer,
 FeatureLayer,
 on,
 topic,
 query,
 html,
 domClass,
 domConstruct,
 dom,
 lang,
 all,
 WidgetManager,
 PanelManager,
 MapManager,
 esriBundle,
 FeatureActionManager,
 PopupMenu,
 jimuUtils,
 array,
 dojoQuery,
 ContentPane,
 TabContainer,
 DataGrid,
 ItemFileWriteStore,
 layerUtil,
 LayerInfos,
 CheckedMultiSelect,
 Memory,
 RelationshipQuery,
 esriRequest,
 QueryTask,
 Query,
 Geoprocessor,
 LoadingIndicator,
 Grid,
 RequestMemory,
 OnDemandGrid, ColumnHider, ColumnReorder, ColumnResizer
) {
 return declare([BaseWidget, _WidgetsInTemplateMixin], {
 position: {width: 800},
 baseClass: 'widget-popuppanel',
 name: 'PopupPanel',
 label: 'Informazioni',
 popup: null,
 zt: null,
 clearSel: null,
 popupMenu: null,
 featureActionManager: null,
 inPanel: null,
 popupContent: null,
 selChgEvt: null,
 clearFeatsEvt: null,
 setFeatsEvt: null,
 prevBtnEvt: null,
 nextBtnEvt: null,
 clearEvt: null,
 zoomToEvt: null,
 clearSelEvt: null,
 resizeEvt: null,
 domains: null,
 initialized: false,
 layerObjectArray: [],
 layerObjectForId: {},
 gp: null,
 gpLr: null,
 muifTabJson: null,
 ineUpdateTabJson: null,
 ineNewTabJson: null,
 mainCp: {},
 grids: {},
 currentGridOriginalData: {"MU": null, "IU": null, "IN": null},

How can I fix this error? I don't try the error in my code.

• KHibma: Is this in scope? Set a breakpoint and check. If not you may need to Lang.hitch it in
• dev_: Yes it is...i have check

Answer 1

If the scope in the callback function (lang.hitch) is not the problem try to access the map object using:

var map = this.wabWidget.map; inside your function.

I once had this problem.

gpLrJobComplete: function (jobinfo) {
 var map = this.wabWidget.map;
 //and then add layers
 map.addLayer(resultLayer);
 },

If you are instantiating your widget into another widget

myWidget: function(){
 this.myWidgetId= new myWidgetId({
 wabWidget: this 
 }).placeAt(this.mydomNode);
 },

good luck!

Answer 2

You need to add a lang.hitch to the line

this.gpLr.getResultData(jobinfo.jobId, "Output_Layer", function (results) {

so it's like this

this.gpLr.getResultData(jobinfo.jobId, "Output_Layer", lang.hitch(this, function (results) {