Does anyone know why I can't zoom in past level 12 in the following example? When I try to go farther I get bounced back to zoom level 1 or 2. I know there is a different way to do this, but this is representing a problem I have that can't use the web tiled service layer class. <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
<style>
#map { left: 0px; margin: 0; padding: 0; height: 90%; width: 100% }
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script>
dojo.require("esri.map");
dojo.require("esri.graphic");
var basemapLayer;
function init() {
initBasemapLayer();
var initExtent = new esri.geometry.Extent(-18188034.49364148,-6066042.56470995,9304835.839963382,8531595.349075975,this.spatialReference);
map = new esri.Map("map",{ extent: initExtent });
basemapLayer = new my.OSMBasemapMapServiceLayer();
map.addLayer(basemapLayer);
dojo.connect(map, 'onLoad', function() {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
});
}
function initBasemapLayer(){
dojo.declare("my.OSMBasemapMapServiceLayer", esri.layers.TiledMapServiceLayer, {
constructor: function() {
this.spatialReference = new esri.SpatialReference({ wkid:102100 });
this.fullExtent = new esri.geometry.Extent(-29957803.3206129,-19971868.8804086,20037507.0671618,19971868.8804086,this.spatialReference);
this.initialExtent = new esri.geometry.Extent(-20037507.0671618,-19971868.8804086,20037507.0671618,19971868.8804086,this.spatialReference);
this.tileInfo = new esri.layers.TileInfo({
"rows" : 256,
"cols" : 256,
"dpi" : 96,
"format" : "PNG32",
// "compressionQuality" : 90,
"origin" : {
"x" : -20037508.342787,
"y" : 20037508.342787
},
"spatialReference" : {
"wkid" : 102100
},
"lods" : [
// {"level" : 0, "resolution" : 156543.033928, "scale" : 591657527.591555},
{"level" : 1, "resolution" : 78271.51555, "scale" : 295828763.795777},
{"level" : 2, "resolution" : 39135.7584820001, "scale" : 39135.7584820001},
{"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.loaded = true;
this.onLoad(this);
},
getTileUrl: function(level, row, col) {
return "http://tile.openstreetmap.org/" + level + "/" + col + "/" + row + ".png";
}
});
}
</script>
</head>
<body class="claro" onLoad="init()">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> </div>
</body>
</html>
