View live sample

Description

This sample shows how you can create a custom layer that accesses map tiles from a Web server. You would most commonly use this pattern to retrieve tiles from an ArcGIS Server 9.2 tile cache or other map tile servers on the Web. Although this sample uses an ArcGIS Server 9.3 service, this is for demonstration purposes only. You would most likely use ArcGISTileMapServiceLayer when accessing a service from 9.3 and beyond.

First, the code declares a custom layer my.PortlandTiledMapServiceLayer which extends esri.layers.TiledMapServiceLayer.

dojo.declare("my.PortlandTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, {
  ...
});

Next a constructor for the layer is defined. In addition to the spatial reference and extents, it defines the tileInfo object. esri.layers.TileInfo contains information about the cache tile dimensions and scales. For ArcGIS Server services, this represents information found in the cache configuration file (conf.xml) in the service's cache directory. You can also retrieve this information through the Services Directory. For non-ArcGIS Server tiled Web maps, you would need to obtain the tile dimensions, scales, and so on from the server administrator or the organization that published the tiles.

constructor: function() {
  this.spatialReference = new esri.SpatialReference(...);
  this.initialExtent = (this.fullExtent = new esri.geometry.Extent(...));
  
  ...
  
  this.tileInfo = new esri.layers.TileInfo(...);

  ...
  this.onLoad(this);
}

Finally the getTileUrl method is implemented to generate a tile URL from the level, row and column arguments. In this example, the row and column numbers need to be converted to hexadecimal and padded with '0' to get the correct URL. The URL syntax for your custom layers will vary depending on the structure of the tile cache you are accessing.

getTileUrl: function(level, row, col) {
  return "..." +
    "L" + dojo.string.pad(level, 2, '0') + "/" +
    "R" + dojo.string.pad(row.toString(16), 8, '0') + "/" +
    "C" + dojo.string.pad(col.toString(16), 8, '0') + "." +
    "png";
}

This function adds the layer to the map.

function init() {
  var map = new esri.Map("map");
  map.addLayer(new my.PortlandTiledMapServiceLayer());
}

Code