Select to view content in your preferred language

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

1464
10
Jump to solution
05-20-2023 09:04 AM
chunguangWayneZhang
New Contributor III

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
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

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

 

View solution in original post

0 Kudos
10 Replies
KenBuja
MVP Esteemed Contributor

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

0 Kudos
chunguangWayneZhang
New Contributor III
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 () {          
              }));
0 Kudos
KenBuja
MVP Esteemed Contributor

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

 

0 Kudos
chunguangWayneZhang
New Contributor III

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

0 Kudos
KenBuja
MVP Esteemed Contributor

Can you post the entire function?

0 Kudos
chunguangWayneZhang
New Contributor III

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

0 Kudos
chunguangWayneZhang
New Contributor III
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 () {
                }));
              }
             }
0 Kudos
chunguangWayneZhang
New Contributor III
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);
                }));
0 Kudos
KenBuja
MVP Esteemed Contributor

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

 

0 Kudos