Why does OpenLayers render two AGSCache layers differently?

Question

I am using OpenLayers to try to display aerial maps for two cities (McHenry, IL and Cupertino, CA).

By following the tutorial for OpenLayers I have gotten my McHenry example to render correctly, as shown in this jsfiddle: http://jsfiddle.net/je45Y/

I should be able to use the exact same code and change only the URL and the zoomToExtent() arguments at the end (such that they match the Initial Extent reported on the ESRI info page). However, when I do this, all the map tile requests generate 404 errors as shown in this jsfiddle: http://jsfiddle.net/9y90mvLo/

Eventually, if I zoom in enough, the tiles will display. This is pretty confusing to me. Presumably, there are different values for zoomToExtent() that I can provide to make this work properly right from the start, but I have no idea how I'd find out what these values are.

Is their ESRI server misconfigured somehow or does OpenLayers not work properly with this newer version of ESRI Server?

It's confusing that the same code works for the first server but not the second.

Answer 1

It looks like this is a problem with the tile cache used by the Cupertino, CA service. Looking at the service via the web interface, if you click on the Start tile for any zoom level < 13, you get a 404. Also, if you preview the layer using the ArcGIS JavaScript API, the layer disappears at the smaller scales. You could contact them and let them know their service's settings need to be adjusted to match the actually existing tiles.

In short, that code should work for both, and does to the extent that tiles are available.