Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
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">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Portland Tile Server</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<script src="https://js.arcgis.com/3.29/"></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 "https://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>