WebTileLayer function doesn't exist.

[EdwardHinkle]

I've been using ArcGIS JS 2.6, I updated the javascript src file to be pointing at 2.8 and added a line to add a WebTileLayer:

(line 67) var wtl = new esri.layers.WebTileLayer("http://tiles.trulia.com/tiles/crime_heatmap/${0}/${1}/${2}.png");
(line 68) map.addLayer(wtl);

When I load my map, it gives me the following error:

Uncaught TypeError: undefined is not a function
init    mapping.js:67
dojo.loaded    serverapi.arcgisonline.com:14
dojo._callLoaded    serverapi.arcgisonline.com:14
dojo._xdNotifyLoaded     serverapi.arcgisonline.com:14
dojo._xdWatchInFlight     serverapi.arcgisonline.com:14
(anonymous function)

is anyone else having issues with the WebTileLayer not working?

I have tried it with a base map loaded prior to this map and with no basemap loaded prior to this. They both do the same error.

[derekswingley1]

WebTileLayer isn't a part of the core API (yet) so you need to include the class declaration somewhere. The code is available in the web tile layer sample:  http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/layers_web_tiled.html

Here's the relevant code:

// define the WebTileLayer class
dojo.declare("esri.layers.WebTileLayer", esri.layers.TiledMapServiceLayer, {
  constructor: function (urlTemplate, options) {
    var ext = new esri.geometry.Extent({
      "xmin": -22041259,
      "ymin": -33265069,
      "xmax": 22041259,
      "ymax": 33265069,
      "spatialReference": {
        "wkid": 102100
      }
    });
    var lods = [{
      "level": 0,
      "resolution": 156543.033928,
      "scale": 591657527.591555
    }, {
      "level": 1,
      "resolution": 78271.5169639999,
      "scale": 295828763.795777
    }, {
      "level": 2,
      "resolution": 39135.7584820001,
      "scale": 147914381.897889
    }, {
      "level": 3,
      "resolution": 19567.8792409999,
      "scale": 73957190.948944
    }, {
      "level": 4,
      "resolution": 9783.93962049996,
      "scale": 36978595.474472
    }, {
      "level": 5,
      "resolution": 4891.96981024998,
      "scale": 18489297.737236
    }, {
      "level": 6,
      "resolution": 2445.98490512499,
      "scale": 9244648.868618
    }, {
      "level": 7,
      "resolution": 1222.99245256249,
      "scale": 4622324.434309
    }, {
      "level": 8,
      "resolution": 611.49622628138,
      "scale": 2311162.217155
    }, {
      "level": 9,
      "resolution": 305.748113140558,
      "scale": 1155581.108577
    }, {
      "level": 10,
      "resolution": 152.874056570411,
      "scale": 577790.554289
    }, {
      "level": 11,
      "resolution": 76.4370282850732,
      "scale": 288895.277144
    }, {
      "level": 12,
      "resolution": 38.2185141425366,
      "scale": 144447.638572
    }, {
      "level": 13,
      "resolution": 19.1092570712683,
      "scale": 72223.819286
    }, {
      "level": 14,
      "resolution": 9.55462853563415,
      "scale": 36111.909643
    }, {
      "level": 15,
      "resolution": 4.77731426794937,
      "scale": 18055.954822
    }, {
      "level": 16,
      "resolution": 2.38865713397468,
      "scale": 9027.977411
    }, {
      "level": 17,
      "resolution": 1.19432856685505,
      "scale": 4513.988705
    }, {
      "level": 18,
      "resolution": 0.597164283559817,
      "scale": 2256.994353
    }, {
      "level": 19,
      "resolution": 0.298582141647617,
      "scale": 1128.497176
    }];
    this.spatialReference = new esri.SpatialReference({
      wkid: 102100
    });
    this.initialExtent = this.fullExtent = ext;

    this.tileInfo = new esri.layers.TileInfo({
      "rows": 256,
      // can also be height
      "cols": 256,
      // can also be width
      "origin": {
        "x": -20037508.342787,
        "y": 20037508.342787
      },
      "spatialReference": {
        "wkid": 102100
      },
      "lods": lods
    });

    this.copyright = options.attribution || "";
    this.urlTemplate = urlTemplate;
    this.tileServers = options.tileServers || [];

    this.loaded = true;
    this.onLoad(this);
  },

  getTileUrl: function (level, row, col) {
    var tileServer = this.tileServers[parseInt(Math.random() * this.tileServers.length)];
    // console.log("tile server is: ", tileServer);
    var tileUrl;
    if (tileServer) {
      tileUrl = dojo.string.substitute(this.urlTemplate, [tileServer, level, col, row]);
    } else {
      tileUrl = dojo.string.substitute(this.urlTemplate, [level, col, row]);
    }
    // console.log("tile url: ", tileUrl);
    return tileUrl;
  }
});

[EdwardHinkle]

Thank you swingley, that makes sense. I'll put that in and see if it gets things working.


Anyone who oversees the documentation, this page should be fixed: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/layers_web_til...

The page lists:

Description
The sample below creates a new layer class called "WebTileLayer". The goal of this layer type is to simplify the process of adding a non-Esri tiled map service to an ArcGIS API for JavaScript application. The WebTileLayer works with tile sets that are in Web Mercator and follow the tiling scheme used by Esri, Google, Bing and others.
Only one parameter is required to create a WebTileLayer: urlTemplate. A url template is URL with place holders to specify map level, column and row for tiles. Like other esri.layer classes, the WebTileLayer also takes an optional "options" parameter. The one option specific to the WebTileLayer is tileServers. If specified, the WebTileLayer will use values from tileServers with the urlTemplate to make tile requests to multiple servers.
Creating a WebTileLayer is as simple as:
      var wtl = new esri.layers.WebTileLayer("http://tiles.trulia.com/tiles/crime_heatmap/${0}/${1}/${2}.png")
      map.addLayer(wtl);


Reading the paragraphs above, it appears like it's fully integrated. The "Is as simple as", is bad terminology if you have to include more custom code 🙂

[EdwardHinkle]

Works great!! Thanks 🙂

[derekswingley1]

Reading the paragraphs above, it appears like it's fully integrated.

I was a little worried about it being interpreted that way when I wrote it. I'll update the docs to be more clear.

[EdwardHinkle · Accepted solution]

Just in case anyone visits this thread in the future, please note that the WebTileLayer is now part of the Core API. Everything on this page can be ignored as now irrelevant. All current information can now be found at: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/layers_webtile...

[derekswingley1]

Just in case anyone visits this thread in the future, please note that the WebTileLayer is now part of the Core API. Everything on this page can be ignored as now irrelevant. All current information can now be found at: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/layers_webtile...

Thanks for following up. One small thing to note is that we originally published a sample that defined "WebTileLayer". When we put it in the API, we went with "WebTiledLayer".