topic Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function in Web AppBuilder Custom Widgets Questions

Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

chunguangWayneZhang — Sat, 20 May 2023 16:04:19 GMT

This is something kind of puzzle me. Hope someone can help.

I have a queried feature set that I want to add to the map as a graphic layer.

I have a cope of codes that seems in the right scope with lang.hitch included in the function queryfeatures. but somehow I couldn't get rid of the this.map.addLayer(myGraphicLayer) with 'TypeError: this.map.addLayer is not a function error. I checked community. The error is most like caused by out of scope. But it seems it is not the issue. Thanks for you help.

-------------------------------------------------------------------------------------------------------------

layer.queryFeatures(featureQuery, lang.hitch(this, function (featureSet) { //there is a lang.hitch here

if (featureSet && featureSet.features.length > 0) {

var parcelSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

Color.fromArray([0, 255, 255]),

//new Color([0, 255, 255]),

4))

var marketgraphics = new GraphicsLayer({

graphics: featureSet.features

});

this.map.addLayer(marketgraphics); //here is the error

Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

KenBuja — Mon, 22 May 2023 15:14:21 GMT

Are you calling that inside another function? If so, you probably don't have lang.hitch when calling that higher function.

Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

chunguangWayneZhang — Mon, 22 May 2023 15:26:08 GMT

Thanks for your help. The whole function is inside layer.queryFeatures( which is the first line here and ends the last line with ). The this.map works on other functions.

layer.queryFeatures(featureQuery, lang.hitch(this, function (featureSet) {

if (featureSet && featureSet.features.length > 0) {

var parcelSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

Color.fromArray([0, 255, 255]),

//new Color([0, 255, 255]),

4))

var marketgraphics = new GraphicsLayer({

graphics: featureSet.features

});

this.map.addLayer(marketgraphics);

marketgraphics.renderer = new SimpleRenderer(parcelSymbol);

marketgraphics.graphics = featureSet.features;

marketgraphics.redraw();

jimuUtils.zoomToFeatureSet(this.map, featureSet).then(null, function (err) {

});;

}

}), lang.hitch(this, function () {

}));

Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

KenBuja — Mon, 22 May 2023 15:56:40 GMT

Are you using that snippet inside of another then statement? As an example, I have to use lang.hitch several times in this code that does authentication

esriId .getCredential(info.portalUrl, { oAuthPopupConfirmation: true }) .then( lang.hitch(this, function () { this._portal = new arcgisPortal.Portal(this._portalUrl); this._portal .signIn() .then( lang.hitch(this, function (portalUser) { this.welcomeNote.innerHTML = this.nls.welcome + portalUser.firstName + "!"; const portal = portalUser.portal; const queryParams = { num: 100, q: 'owner: ' + this._ownerName + ' AND type: "Feature Service" AND title: "' + this._baseGridLayerName + '"' }; portal.queryItems(queryParams).then( lang.hitch(this, function (result) { if (result.total > 0) { if ( array.some( result.results, lang.hitch(this, function (item) { if (item.url !== null) {

Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

chunguangWayneZhang — Mon, 22 May 2023 16:04:48 GMT

Actually, it is not called in another then statement or function. Just inside that layer.queryFeatures function. The layer.queryFeatures function is in a ELSE statement.

Thanks again

Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

KenBuja — Mon, 22 May 2023 17:04:16 GMT

Can you post the entire function?

Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

chunguangWayneZhang — Mon, 22 May 2023 19:49:10 GMT

This seems has issue with a post. Tried several times to post the whole function but doesn

Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

chunguangWayneZhang — Mon, 22 May 2023 19:55:26 GMT

Yes, here is the whole function in the if () statement. There is lang.hitch as well. Thanks

if (layerInfo) {

layerInfo.getLayerObject().then(lang.hitch(this, function (layer) {

var gs = getGraphics(layer, resultFeature.attributes[layer.objectIdField]);

var parcelSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

new Color("purple"),

4))

if (gs && gs.length > 0) {

var queryTask = new QueryTask(this.nls.marketTbl);

var query = new esri.tasks.Query();

query.returnGeometry = false;

query.outFields = [

"PIN", "COMPPARCEL1", "COMPPARCEL2", "COMPPARCEL3", "COMPPARCEL4", "COMPPARCEL5"

];

query.where = "PIN ='" + gs[0].attributes["PIN"] + "'";

console.log("PIN ='" + gs[0].attributes["PIN"] + "'")

queryTask.execute(query, showResults);

function showResults(results) {

var resultItems = [];

var whereclause = "";

var resultCount = results.features.length;

if (resultCount >= 1) {

for (var i = 0; i < resultCount; i++) {

var featureAttributes = results.features[i].attributes;

for (var attr in featureAttributes) {

resultItems.push(attr + ":" + featureAttributes[attr]);

whereclause += "PIN ='" + featureAttributes[attr] + "' OR ";

}

console.log(whereclause)

}

else {

console.log("Can not find market model parcels")

return;

}

var featureQuery = new FeatureQuery(this.parcelFC);

featureQuery.where = whereclause.slice(0, -3);

//featureQuery.where = "(UPPER(PIN) = '16074500690') OR (UPPER(PIN) = '16096000350' OR UPPER(PIN) = '16074400610') OR(UPPER(PIN) = '16074400720') OR(UPPER(PIN) = '16074400630')";

console.log(whereclause.slice(0, -3))

//featureQuery.where = whereclause.slice(0, -3);

featureQuery.outSpatialReference = this.map.spatialReference;

featureQuery.outFields = ["*"];

featureQuery.returnGeometry = true;

var parcelSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

Color.fromArray([0, 255, 255]),

//new Color([0, 255, 255]),

4))

layer.setSelectionSymbol(parcelSymbol);

layer.selectFeatures(featureQuery, FeatureLayer.SELECTION_NEW, lang.hitch(this, function (results) {

layer.setSelectionSymbol(parcelSymbol);

}));

layer.queryFeatures(featureQuery, lang.hitch(this, function (featureSet) {

if (featureSet && featureSet.features.length > 0) {

var parcelSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

Color.fromArray([0, 255, 255]),

//new Color([0, 255, 255]),

4))

var marketgraphics = new GraphicsLayer({

graphics: featureSet.features

});

this.map.addLayer(marketgraphics);

marketgraphics.renderer = new SimpleRenderer(parcelSymbol);

marketgraphics.graphics = featureSet.features;

marketgraphics.redraw();

jimuUtils.zoomToFeatureSet(this.map, featureSet, 1.8).then(null, function (err) {

});;

}

}), lang.hitch(this, function () {

}));

}

Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

chunguangWayneZhang — Mon, 22 May 2023 20:02:14 GMT

Tried to post entire function but won't allow me to post it somehow. Here is the top part and the next following part was posted before. Thanks.

if (layerInfo) {

layerInfo.getLayerObject().then(lang.hitch(this, function (layer) {

var gs = getGraphics(layer, resultFeature.attributes[layer.objectIdField]);

var parcelSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

new Color("purple"),

//new Color([0, 255, 255]),

4))

if (gs && gs.length > 0) {

var queryTask = new QueryTask(this.nls.marketTbl);

var query = new esri.tasks.Query();

query.returnGeometry = false;

query.outFields = [

"PIN", "COMPPARCEL1", "COMPPARCEL2", "COMPPARCEL3", "COMPPARCEL4", "COMPPARCEL5"

];

query.where = "PIN ='" + gs[0].attributes["PIN"] + "'";

console.log("PIN ='" + gs[0].attributes["PIN"] + "'")

queryTask.execute(query, showResults);

function showResults(results) {

var resultItems = [];

var whereclause = "";

var resultCount = results.features.length;

if (resultCount >= 1) {

for (var i = 0; i < resultCount; i++) {

var featureAttributes = results.features[i].attributes;

for (var attr in featureAttributes) {

resultItems.push(attr + ":" + featureAttributes[attr]);

whereclause += "PIN ='" + featureAttributes[attr] + "' OR ";

}

console.log(whereclause)

}

else {

console.log("Can not find market model parcels")

return;

}

var featureQuery = new FeatureQuery(this.parcelFC);

featureQuery.where = whereclause.slice(0, -3);

console.log(whereclause.slice(0, -3))

//featureQuery.where = whereclause.slice(0, -3);

featureQuery.outSpatialReference = this.map.spatialReference;

featureQuery.outFields = ["*"];

featureQuery.returnGeometry = true;

var parcelSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

Color.fromArray([0, 255, 255]),

//new Color([0, 255, 255]),

4))

layer.setSelectionSymbol(parcelSymbol);

layer.selectFeatures(featureQuery, FeatureLayer.SELECTION_NEW, lang.hitch(this, function (results) {

layer.setSelectionSymbol(parcelSymbol);

}));

Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

KenBuja — Mon, 22 May 2023 22:05:17 GMT

Since it's being called within the showResult function, you'll have to add the lang.hitch here

queryTask.execute(query, lang.hitch(this, showResults));

Re: Try to add a graphic layer but got 'TypeError: this.map.addLayer is not a function

chunguangWayneZhang — Tue, 23 May 2023 18:48:56 GMT

Hi KenBuja,

That did remove the error. So it is the top of the function that is way back up that needs a LANG.HITCH. It has two three nested functions. Thanks again