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
Solved! Go to 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));
}
}
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));
}
}