stoqs/static/OpenLayers-2.11/examples/arcgiscache_jsonp.html

<!DOCTYPE html>
<html>
  <head>
    <title>OpenLayers ArcGIS Cache Example (Autoconfigure with JSONP)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">

    <script src="../lib/OpenLayers.js"></script>
    <script src="../lib/OpenLayers/Layer/ArcGISCache.js" type="text/javascript"></script>
    
    <!-- This is to simplify making the JSONP request for this example -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript">
        var map,
            layerURL = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
        
        function init() {
            var jsonp_url = layerURL + '?f=json&pretty=true&callback=?';
            $.getJSON(jsonp_url, function(data) {                
                initMap(data);
            });
        }

        function initMap(layerInfo){
            /*
             * The initialize function in this layer has the ability to automatically configure
             * itself if given the JSON capabilities object from the ArcGIS map server.
             * This hugely simplifies setting up a new layer, and switching basemaps when using this technique.
             *
             * see the 'initialize' function in ArcGISCache.js, or 
             * see the other two ArcGISCache.js examples for direct manual configuration options
             *
             */
            var baseLayer = new OpenLayers.Layer.ArcGISCache("AGSCache", layerURL, {
                layerInfo: layerInfo
            });
            
            /*
             * Make sure our baselayer and our map are synced up
             */
            map = new OpenLayers.Map('map', { 
                maxExtent: baseLayer.maxExtent,
                units: baseLayer.units,
                resolutions: baseLayer.resolutions,
                numZoomLevels: baseLayer.numZoomLevels,
                tileSize: baseLayer.tileSize,
                displayProjection: baseLayer.displayProjection,
                StartBounds: baseLayer.initialExtent                
            });
            map.addLayers([baseLayer]);
            
            
            //overlay test layer
            //http://openlayers.org/dev/examples/web-mercator.html
            var wms = new OpenLayers.Layer.WMS("Highways",
                "http://sampleserver1.arcgisonline.com/arcgis/services/Specialty/ESRI_StateCityHighway_USA/MapServer/WMSServer", 
                {layers: "2", format: "image/gif", transparent: "true"}, 
                { isBaseLayer: false, wrapDateLine: false } 
            );
            map.addLayers([wms]);

            
            
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition() );            
            //map.zoomToExtent(new OpenLayers.Bounds(-8341644, 4711236, -8339198, 4712459));
            map.zoomToExtent(new OpenLayers.Bounds(-8725663.6225564, 4683718.6735907, -8099491.4868444, 4996804.7414467));
        }
    </script>
  </head>
  <body onload="init()">
      <h1 id="title">OpenLayers ArcGIS Cache Example (Autoconfigure with JSONP)</h1>

    <div id="tags">
        arcgis, arcgiscache, cache, tms, jsonp
    </div>

    <p id="shortdesc">
        Demonstrates the basic initialization of the ArcGIS Cache layer by using the server capabilities object.
    </p>

    <div id="map" class="smallmap"></div>

    <div id="docs">
        <p>This example demonstrates using the ArcGISCache layer for 
        accessing ESRI's ArcGIS Server (AGS) Map Cache tiles normally through 
        a live AGS MapServer.  Toggle the visibility of the overlay to
        demonstrate how the two layers are lined up correctly.</p>
        
        <h2>Notes on this Layer</h2>
        <p>
        This method automatically configures the layer using the capabilities object 
        generated by the server itself.  This page shows how to construct the url for the server capabilities object,
        retrieve it using JSONP (and jQuery), and pass it in during construction.  Note that in this case, 
        the layer is constructed before the map.  This approach greatly simplifies the
        configuration of your map, and works best when all your tiles / overlays are similarly laid out.
        If you are using a live AGS map server for your layer, it can be helpful to check your
        server configuration using this technique before trying one of the other examples for this layer.  
        </p>
        
        <h2> Other Examples </h2>
        <p>This is one of three examples for this layer.  You can also configure this
        layer to use <a href="arcgiscache_direct.html">prebuilt tiles in a file store (not a live server).</a>  
        As well a retrieve <a href="arcgiscache_ags.html">tiles from a live server.</a> 
        </p>
    </div>
  </body>
</html>