esriRequest WebTiledLayer Cannot read property 'indexOf' of null

[windmilling]

I am so grateful for this Community; the searching here has been a tremendous help to this person learning as he slowly progresses along on a project. Currently I am learning about esriRequest in developer WebAppBuilderForArcGIS/client/stemapp/widgets/samplewidgets in the startup: function(){ so js.arcgis.com/3.34. With the commented code, the cosole.log produces the url I expect with the getContent(); line. I know my radar lines have no ties to the esriRequest lines, but I can paste the url from the console.log into the new WebTiledLayer and add the layer with this.map.addLayer(radar); (in other words, I know the request works and the add layer works). I know my old commented chunk is incomplete, so I did more searching and found Subject Json into ArcGIS Javascript webapp 5/23-24/2015. I tried to apply the Graphics from that question to the WebTiles in my situation (code below). My first try, I had var wtl = new WebTiledLayer(); and I got an error with respect to substring. I changed the line to var wtl = new WebTiledLayer(""); and now the error is Cannot read property 'indexOf' of null. The term for this thing I am messing up is "instantiation"? I imagine I am missing a number of these and/or I am also messing up other things? indexOf is associated with ?? map? WebTiledLayer? an array? Earlier I had trouble with the corsEnabledServers.push line as well, but with searching found that the previous line was needed before the push. PS. Getting this to work is a learning step for something else. In other words, the short term goal is change map with add layer with widget startup, but it is not the long term goal.

    startup: function() {
      this.inherited(arguments);
      var corsEnabledServers = esriConfig.defaults.io.corsEnabledServers;
      corsEnabledServers.push("tiles.clearapis.com");

      var wtl = new WebTiledLayer("");
      this.map.addLayer(wtl);
      
      var locsRequest = esriRequest({
        url: "https://tiles.clearapis.com/v1.0/layer_index?app_id=XX&app_key=XX",
        handleAs: "json"
      });

      var radar;

      locsRequest.then(
        function(response) {
          var tileRadar = response.display_intervals[0].layers.contigus.radar.tile_url;
          var urlUSRadar = `${tileRadar}/{level}/{col}/{row}.png?app_id=XX&app_key=XX`;
          radar = new WebTiledLayer(urlUSRadar);
            wtl.add(radar);
        }, 
        function(error) {console.log("Error: ", error.message);
        });
    
      // function getContent(){
      //   var req = esriRequest({
      //       url: "https://tiles.clearapis.com/v1.0/layer_index?app_id=XX&app_key=XX",
      //       handleAs : "json",
      //   });
      //   req.then(Succeeded);
      // }
      // function Succeeded(result){
      //   let tileRadar = result.display_intervals[0].layers.contigus.radar.tile_url;
      //   const urlUSRadar = `${tileRadar}/{level}/{col}/{row}.png?app_id=XX&app_key=XX`;
        
      //   console.log(urlUSRadar);
      // }
      
      // getContent();

      // var radar = new WebTiledLayer("http://ag.us.clearapis.com/v1.0/gmaps/radar/1608470400/47415230/{level}/{col}/{row}.png?app_id=XX&app_key=XX");
      // this.map.addLayer(radar);
    }

edit It turns out I was not on the right track with neither the original reply nor the question, so I moved the following from the original reply to here at the end of the initial post....... I noticed an inconsistency with what I did and the case I used as a template. The correct graphic = new Graphic from the post-solution I was working off of is not an equivalent to my incorrect radar = new WebTiledLayer. I am thinking this is only part of my problem? endedit

[windmilling · Accepted solution]

Short term goal accomplished. The issue was "this" and the scope. I used lang.hitch as suggested in Accessing Map from Widget code. Thanks Robert - the help was not for my question post but out there nonetheless and very much appreciated.

    startup: function() {
      this.inherited(arguments);
      var corsEnabledServers = esriConfig.defaults.io.corsEnabledServers;
      corsEnabledServers.push("tiles.clearapis.com");
      
      var requestHandle = esriRequest({
            url: "https://tiles.clearapis.com/v1.0/layer_index?app_id=XX&app_key=XX",
            handleAs : "json",
      });

      requestHandle.then(lang.hitch(this, requestSucceeded), requestFailed);
      
      function requestSucceeded(result, io){
        let tileRadar = result.display_intervals[0].layers.contigus.radar.tile_url;
        const urlUSRadar = `${tileRadar}{level}/{col}/{row}.png?app_id=XX&app_key=XX`;

        var radar = new WebTiledLayer(urlUSRadar);
        this.map.addLayer(radar);         
      }

      function requestFailed(error, io) {
        alert(dojoJson.toJson(error, true));
      }

    }