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.

Is this in scope? Set a breakpoint and check. If not you may need to Lang.hitch it in — KHibma
– KHibma, Commented Sep 8, 2019 at 1:49

Mehretab · Accepted Answer · 2019-09-11 09:53:57Z

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!

kenbuja · Accepted Answer · 2019-09-11 13:23:31Z

0

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) {

answered Sep 11, 2019 at 13:23

kenbuja

5,9252 gold badges20 silver badges31 bronze badges

Add a comment |

Stack Exchange Network

ArcGIS API JavaScript error to add layer

2 Answers 2

Your Answer

Hot Network Questions

ArcGIS API JavaScript error to add layer

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions