Hide Table of Contents
Latest Samples
Image Layers
Creating a custom tiled layer type

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 tile cache or other map tile servers on the Web. Although this sample uses an ArcGIS Server 10 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

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Portland Tile Server</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      dojo.require("esri.map");
    
      function init() {
        initLayer();
        var map = new esri.Map("map");
        map.addLayer(new my.PortlandTiledMapServiceLayer()); 
      } 
      function initLayer(){
        dojo.declare("my.PortlandTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, {
          constructor: function() {
            this.spatialReference = new esri.SpatialReference({ wkid:4326 });
            this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-123.59, 44.29, -121.55, 46.36, this.spatialReference));

            this.tileInfo = new esri.layers.TileInfo({
              "rows" : 512,
              "cols" : 512,
              "dpi" : 96,
              "format" : "PNG32",
              "compressionQuality" : 0,
              "origin" : {
                "x" : -180,
                "y" : 90
              },
              "spatialReference" : {
              "wkid" : 4326
            },
              "lods" : [
                {"level" : 0, "resolution" : 0.351562499999999, "scale" : 147748799.285417},
                {"level" : 1, "resolution" : 0.17578125, "scale" : 73874399.6427087},
                {"level" : 2, "resolution" : 0.0878906250000001, "scale" : 36937199.8213544},
                {"level" : 3, "resolution" : 0.0439453125, "scale" : 18468599.9106772},
                {"level" : 4, "resolution" : 0.02197265625, "scale" : 9234299.95533859},
                {"level" : 5, "resolution" : 0.010986328125, "scale" : 4617149.97766929},
                {"level" : 6, "resolution" : 0.0054931640625, "scale" : 2308574.98883465},
                {"level" : 7, "resolution" : 0.00274658203124999, "scale" : 1154287.49441732},
                {"level" : 8, "resolution" : 0.001373291015625, "scale" : 577143.747208662},
                {"level" : 9, "resolution" : 0.0006866455078125, "scale" : 288571.873604331},
                {"level" : 10, "resolution" : 0.000343322753906249, "scale" : 144285.936802165},
                {"level" : 11, "resolution" : 0.000171661376953125, "scale" : 72142.9684010827},
                {"level" : 12, "resolution" : 8.58306884765626E-05, "scale" : 36071.4842005414},
                {"level" : 13, "resolution" : 4.29153442382813E-05, "scale" : 18035.7421002707},
                {"level" : 14, "resolution" : 2.14576721191406E-05, "scale" : 9017.87105013534},
                {"level" : 15, "resolution" : 1.07288360595703E-05, "scale" : 4508.93552506767}
              ]
            });

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

          getTileUrl: function(level, row, col) {
            return "http://sampleserver1.arcgisonline.com/arcgiscache/Portland_Portland_ESRI_LandBase_AGO/Portland/_alllayers/" +
              "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";
        }
      });
    } 

    dojo.ready(init);
    </script>
  </head>
  <body>
    <div id="map" class="claro" style="width:768px; height:512px; border:1px solid #000;"></div>
  </body>
</html>