Zoom in..bounced back - why?

ChrisLawton — Sun, 07 Oct 2012 01:15:21 GMT

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>

Re: Zoom in..bounced back - why?

derekswingley1 — Mon, 08 Oct 2012 15:31:20 GMT

Incorrect scale for level 2, it should be 147914381.897889.

Alternatively, use the WebTiledLayer class to avoid having to manually set up a TileInfo object.

topic Zoom in..bounced back - why? in ArcGIS JavaScript Maps SDK Questions

Zoom in..bounced back - why?

Re: Zoom in..bounced back - why?