[OpenLayers-Commits] r10943 - in sandbox/august/trunk/playground: outofbox wmts

commits-20090109 at openlayers.org commits-20090109 at openlayers.org
Fri Dec 3 01:53:55 EST 2010


Author: augusttown
Date: 2010-12-02 22:53:55 -0800 (Thu, 02 Dec 2010)
New Revision: 10943

Added:
   sandbox/august/trunk/playground/outofbox/wmts-capabilities.html
   sandbox/august/trunk/playground/outofbox/wmts-capabilities.js
   sandbox/august/trunk/playground/outofbox/wmts.html
   sandbox/august/trunk/playground/outofbox/wmts.js
   sandbox/august/trunk/playground/wmts/jsapi-wmts-customized-tilingschema.html
   sandbox/august/trunk/playground/wmts/jsapi-wmts-epsg3857.html
   sandbox/august/trunk/playground/wmts/jsapi-wmts-wgs84.html
   sandbox/august/trunk/playground/wmts/wmts-geowebcache-customized-tilingschema.html
   sandbox/august/trunk/playground/wmts/wmts-geowebcache-customized-tilingschema.js
   sandbox/august/trunk/playground/wmts/wmts-geowebcache-epsg3857.html
   sandbox/august/trunk/playground/wmts/wmts-geowebcache-epsg3857.js
   sandbox/august/trunk/playground/wmts/wmts-geowebcache-wgs84.html
   sandbox/august/trunk/playground/wmts/wmts-geowebcache-wgs84.js
   sandbox/august/trunk/playground/wmts/wmts2tileinfo.css
   sandbox/august/trunk/playground/wmts/wmts2tileinfo.html
   sandbox/august/trunk/playground/wmts/wmts2tileinfo.js
Removed:
   sandbox/august/trunk/playground/wmts/wmts.html
   sandbox/august/trunk/playground/wmts/wmts.js
Log:
Add new WMTS related samples and also delete deprecated ones.

Added: sandbox/august/trunk/playground/outofbox/wmts-capabilities.html
===================================================================
--- sandbox/august/trunk/playground/outofbox/wmts-capabilities.html	                        (rev 0)
+++ sandbox/august/trunk/playground/outofbox/wmts-capabilities.html	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers WMTS Capabilities Example</title>
+        <link rel="stylesheet" href="../../theme/default/style.css" type="text/css"/>
+        <link rel="stylesheet" href="../style.css" type="text/css" />
+        <script src="../../lib/Firebug/firebug.js"></script>
+        <script src="../../lib/OpenLayers.js"></script>
+        <script src="wmts-capabilities.js"></script>
+        <style>
+            .olControlAttribution {
+                bottom: 5px;
+            }
+        </style>
+    </head>
+    <body onload="init();">
+        <h1 id="title">Web Map Tile Service (WMTS) Capabilities Parsing</h1>
+        
+        <p id="shortdesc">
+            The WMTS Capabilities format allows for parsing of capabilities
+            documents from OGC Web Map Tile Service (WMTS) version 1.0.0 
+            implementations.
+        </p>
+        
+        <div id="map" class="smallmap"></div>
+        
+        <div id="docs">
+            <p>
+                This example creates an OpenLayers.Layer.WMTS layer to based
+                on the results of parsing a capabilities doc with the
+                OpenLayers.Format.WMTSCapabilities parser.
+            </p><p>
+                See the <a href="wmts-capabilities.js" target="_blank">
+                wmts-capabilities.js source</a> to see how this is done.
+            </p>
+        </div>
+    </body>
+</html>

Added: sandbox/august/trunk/playground/outofbox/wmts-capabilities.js
===================================================================
--- sandbox/august/trunk/playground/outofbox/wmts-capabilities.js	                        (rev 0)
+++ sandbox/august/trunk/playground/outofbox/wmts-capabilities.js	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,88 @@
+OpenLayers.ProxyHost = "/proxy/?url=";
+
+var map, format;
+
+function init() {
+    
+    format = new OpenLayers.Format.WMTSCapabilities();
+    OpenLayers.Request.GET({
+        url: "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts",
+        params: {
+            SERVICE: "WMTS",
+            VERSION: "1.0.0",
+            REQUEST: "GetCapabilities"
+        },
+        success: function(request) {
+            var doc = request.responseXML;
+            if (!doc || !doc.documentElement) {
+                doc = request.responseText;
+            }
+            var capabilities = format.read(doc);
+            var layer = createLayer(capabilities, {
+                layer: "medford:buildings",
+                matrixSet: "EPSG:900913",
+                format: "image/png",
+                opacity: 0.7,
+                isBaseLayer: false
+            });
+            map.addLayer(layer);
+        }, 
+        failure: function() {
+            alert("Trouble getting capabilities doc");
+            OpenLayers.Console.error.apply(OpenLayers.Console, arguments);
+        }
+    })
+    
+    map = new OpenLayers.Map({
+        div: "map",
+        projection: "EPSG:900913",
+        units: "m",
+        maxExtent: new OpenLayers.Bounds(
+            -20037508.34, -20037508.34, 20037508.34, 20037508.34
+        ),
+        maxResolution: 156543.0339
+    });    
+    
+    var osm = new OpenLayers.Layer.OSM();
+
+    map.addLayer(osm);
+    map.addControl(new OpenLayers.Control.LayerSwitcher());
+    map.setCenter(new OpenLayers.LonLat(-13677832, 5213272), 13);
+    
+}
+
+function createLayer(capabilities, config) {
+
+    var contents = capabilities.contents;
+    var matrixSet = contents.tileMatrixSets[config.matrixSet];
+
+    // find the layer definition with the given identifier
+    var layers = contents.layers;
+    var layer;
+    for (var i=0, ii=layers.length; i<ii; ++i) {
+        if (layers[i].identifier === config.layer) {
+            layer = layers[i];
+            break;
+        }
+    }
+
+    // get the default style for the layer
+    var style;
+    for (var i=0, ii=layer.styles.length; i<ii; ++i) {
+        style = layer.styles[i];
+        if (style.isDefault === "true") { // TODO: change this to boolean
+            break;
+        }
+    }
+
+    // create the layer
+    return new OpenLayers.Layer.WMTS(
+        OpenLayers.Util.applyDefaults(config, {
+            url: capabilities.operationsMetadata.GetTile.dcp.http.get,
+            name: layer.title,
+            style: style,
+            matrixIds: matrixSet.matrixIds
+        })
+    );
+    
+}

Added: sandbox/august/trunk/playground/outofbox/wmts.html
===================================================================
--- sandbox/august/trunk/playground/outofbox/wmts.html	                        (rev 0)
+++ sandbox/august/trunk/playground/outofbox/wmts.html	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers WMTS Example</title>
+        <link rel="stylesheet" href="../../theme/default/style.css" type="text/css"/>
+        <link rel="stylesheet" href="../style.css" type="text/css" />
+        <script src="../../lib/Firebug/firebug.js"></script>
+        <script src="../../lib/OpenLayers.js"></script>
+        <script src="wmts.js"></script>
+        <style>
+            .olControlAttribution {
+                bottom: 5px;
+            }
+        </style>
+    </head>
+    <body onload="init();">
+        <h1 id="title">Web Map Tile Service (WMTS) Layer</h1>
+        
+        <p id="shortdesc">
+            The WMTS layer allows viewing of tiles from a server implementing
+            the OGC Web Map Tile Service (WMTS) standard version 1.0.0.
+        </p>
+        
+        <div id="map" class="bigmap"></div>
+        
+        <div id="docs">
+            <p>
+                This example uses an OpenLayers.Layer.WMTS layer to display
+                cached tiles over an OSM layer in spherical mercator coordinates.
+            </p><p>
+                See the <a href="wmts.js" target="_blank">
+                wmts.js source</a> to see how this is done.
+            </p>
+        </div>
+    </body>
+</html>

Added: sandbox/august/trunk/playground/outofbox/wmts.js
===================================================================
--- sandbox/august/trunk/playground/outofbox/wmts.js	                        (rev 0)
+++ sandbox/august/trunk/playground/outofbox/wmts.js	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,40 @@
+var map;
+
+function init() {
+    
+    map = new OpenLayers.Map({
+        div: "map",
+        projection: "EPSG:900913",
+        units: "m",
+        maxExtent: new OpenLayers.Bounds(
+            -20037508.34, -20037508.34, 20037508.34, 20037508.34
+        ),
+        maxResolution: 156543.0339
+    });    
+    
+    var osm = new OpenLayers.Layer.OSM();
+
+    // If tile matrix identifiers differ from zoom levels (0, 1, 2, ...)
+    // then they must be explicitly provided.
+    var matrixIds = new Array(26);
+    for (var i=0; i<26; ++i) {
+        matrixIds[i] = "EPSG:900913:" + i;
+    }
+
+    var wmts = new OpenLayers.Layer.WMTS({
+        name: "Medford Buildings",
+        url: "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts/",        
+        layer: "medford:buildings",        
+        matrixSet: "EPSG:900913",
+        matrixIds: matrixIds,
+        format: "image/png",
+        style: "_null",        
+        opacity: 0.7,
+        isBaseLayer: false
+    });                
+
+    map.addLayers([osm, wmts]);
+    map.addControl(new OpenLayers.Control.LayerSwitcher());
+    map.setCenter(new OpenLayers.LonLat(-13677832, 5213272), 13);
+    
+}

Added: sandbox/august/trunk/playground/wmts/jsapi-wmts-customized-tilingschema.html
===================================================================
--- sandbox/august/trunk/playground/wmts/jsapi-wmts-customized-tilingschema.html	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/jsapi-wmts-customized-tilingschema.html	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,112 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=7" />
+		<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
+		<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
+		<title>Portland Tile Server</title>
+		<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
+		<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
+		<script type="text/javascript">
+		
+      		dojo.require("esri.map");
+    
+		    function init() {
+		        initLayer();
+		        var map = new esri.Map("map");
+		        map.addLayer(new ogc.WMTSLayer());
+
+		        var lon = 7647130.2520;
+		    	var lat = 669087.0178;
+		    	var zoom = 1;
+				var crs = new esri.SpatialReference({wkid:2913});		            
+		        map.centerAndZoom(
+					new esri.geometry.Point(lon, lat, crs),
+					zoom
+				);		         
+		    }
+		     
+		    function initLayer(){			    
+		        dojo.declare("ogc.WMTSLayer", esri.layers.TiledMapServiceLayer, { // create WMTSLayer by extending esri.layers.TiledMapServiceLayer
+		          	constructor: function() {
+			            this.spatialReference = new esri.SpatialReference({wkid:2913});
+			            this.initialExtent = new esri.geometry.Extent(7241196.8729, 128656.7859, 9265592.9584, 981999.6828, this.spatialReference);
+					    this.fullExtent = new esri.geometry.Extent(7241196.8729, 128656.7859, 9265592.9584, 981999.6828, this.spatialReference);			
+			            this.tileInfo = new esri.layers.TileInfo({
+			            	"rows": 256,
+			              	"cols": 256,
+			              	"dpi" : 96,
+			              	"format": "PNG",
+			              	"compressionQuality": 0,
+			              	"origin" : {
+			                	"x" : 7241196.8729,
+			                	"y" : 981999.6828
+			              	},
+			              	"spatialReference": {
+			              		"wkid" : 2913
+			            	},
+			              	"lods" : [						        							
+								{"level" : 0, "resolution"  : 2048000/(96*12), 	"scale" : 2048000.0},
+				                {"level" : 1, "resolution"  : 1024000/(96*12), 	"scale" : 1024000.0},
+				                {"level" : 2, "resolution"  : 512000/(96*12), 	"scale" : 512000.0},
+				                {"level" : 3, "resolution"  : 256000/(96*12), 	"scale" : 256000.0},
+				                {"level" : 4, "resolution"  : 128000/(96*12), 	"scale" : 128000.0},
+				                {"level" : 5, "resolution"  : 64000/(96*12), 	"scale" : 64000.0},
+				                {"level" : 6, "resolution"  : 32000/(96*12), 	"scale" : 32000.0},
+				                {"level" : 7, "resolution"  : 16000/(96*12), 	"scale" : 16000.0},
+				                {"level" : 8, "resolution"  : 8000/(96*12), 	"scale" : 8000.0},
+				                {"level" : 9, "resolution"  : 4000/(96*12), 	"scale" : 4000.0},
+				                {"level" : 10,"resolution" : 2000/(96*12), 	"scale" : 2000.0},				                
+				                /*			                
+						        {"level" : 0, "scale" : 2048000.0},
+				                {"level" : 1, "scale" : 1024000.0},
+				                {"level" : 2, "scale" : 512000.0},
+				                {"level" : 3, "scale" : 256000.0},
+				                {"level" : 4, "scale" : 128000.0},
+				                {"level" : 5, "scale" : 64000.0},
+				                {"level" : 6, "scale" : 32000.0},
+				                {"level" : 7, "scale" : 16000.0},
+				                {"level" : 8, "scale" : 8000.0},
+				                {"level" : 9, "scale" : 4000.0},
+				                {"level" : 10,"scale" : 2000.0},
+				                */
+				                /*
+				                {"level" : 0, "resolution"  : 2048000/(96*12)},
+				                {"level" : 1, "resolution"  : 1024000/(96*12)},
+				                {"level" : 2, "resolution"  : 512000/(96*12)},
+				                {"level" : 3, "resolution"  : 256000/(96*12)},
+				                {"level" : 4, "resolution"  : 128000/(96*12)},
+				                {"level" : 5, "resolution"  : 64000/(96*12)},
+				                {"level" : 6, "resolution"  : 32000/(96*12)},
+				                {"level" : 7, "resolution"  : 16000/(96*12)},
+				                {"level" : 8, "resolution"  : 8000/(96*12)},
+				                {"level" : 9, "resolution"  : 4000/(96*12)},
+				                {"level" : 10,"resolution" : 2000/(96*12)}
+				                */
+			              	]
+			            });			
+			            this.loaded = true;
+			            this.onLoad(this);
+		          	},
+		
+		          	getTileUrl: function(level, row, col) {
+		            	return "http://sazabiii:8080/geowebcache.10012010.snapshot/service/wmts" 
+		            		+ "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile" 
+		                	+ "&LAYER=sazabiii.portland"
+		                	+ "&STYLE="
+		                	+ "&FORMAT=image/png"
+		                	+ "&TILEMATRIXSET=sazabiii.portland.epsg2913"
+		                	+ "&TILEMATRIX=sazabiii.portland.epsg2913." + level
+		                	+ "&TILEROW=" + row
+		                	+ "&TILECOL=" + col;		               
+		        	}
+				});
+			} 		
+			dojo.addOnLoad(init);
+    	</script>
+	</head>
+	<body>
+		<div id="map" class="claro" style="width:512px;height:512px;border:1px solid #000;"></div>
+	</body>
+</html>

Added: sandbox/august/trunk/playground/wmts/jsapi-wmts-epsg3857.html
===================================================================
--- sandbox/august/trunk/playground/wmts/jsapi-wmts-epsg3857.html	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/jsapi-wmts-epsg3857.html	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,268 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=7" />
+		<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
+		<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
+		<title>Portland Tile Server</title>
+		<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
+		<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
+		<script type="text/javascript">
+      		dojo.require("esri.map");
+    
+		    function init() {
+		        initLayer();
+		        var map = new esri.Map("map");
+		        map.addLayer(new ogc.WMTSLayer()); 
+		    }
+		     
+		    function initLayer(){			    
+		        dojo.declare("ogc.WMTSLayer", esri.layers.TiledMapServiceLayer, { // create WMTSLayer by extending esri.layers.TiledMapServiceLayer
+		          	constructor: function() {
+			            this.spatialReference = new esri.SpatialReference({wkid:3857});
+			            this.initialExtent = new esri.geometry.Extent(-20037508.342789, -20037508.342789, 20037508.342789, 20037508.342789, this.spatialReference);
+					    this.fullExtent = new esri.geometry.Extent(-20037508.342789, -20037508.342789, 20037508.342789, 20037508.342789, this.spatialReference);			
+						/*
+			            this.tileInfo = new esri.layers.TileInfo({
+			            	"rows": 256,
+			              	"cols": 256,
+			              	"dpi" : 96,
+			              	"format": "PNG",
+			              	"compressionQuality": 0,
+			              	"origin" : {
+			                	"x" : -20037508.342789,
+			                	"y" : 20037508.342789
+			              	},
+			              	"spatialReference": {
+			              		"wkid" : 3857
+			            	},
+			              	"lods" : [								
+								{"level" : 0,  "resolution" : 156543.0339, 			"scale"	: 5.590822639508929E8},
+				                {"level" : 1,  "resolution" : 78271.51695, 			"scale"	: 2.7954113197544646E8},
+				                {"level" : 2,  "resolution" : 39135.758475,	 		"scale"	: 1.3977056598772323E8},
+				                {"level" : 3,  "resolution" : 19567.8792375, 		"scale"	: 6.988528299386162E7},
+				                {"level" : 4,  "resolution" : 9783.93961875, 		"scale"	: 3.494264149693081E7},
+				                {"level" : 5,  "resolution" : 4891.969809375, 		"scale"	: 1.7471320748465404E7},
+				                {"level" : 6,  "resolution" : 2445.9849046875, 		"scale"	: 8735660.374232702},
+				                {"level" : 7,  "resolution" : 1222.99245234375, 	"scale"	: 4367830.187116351},
+				                {"level" : 8,  "resolution" : 611.496226171875, 	"scale"	: 2183915.0935581755},
+				                {"level" : 9,  "resolution" : 305.7481130859375, 	"scale"	: 1091957.5467790877},
+				                {"level" : 10, "resolution" : 152.8740565429688, 	"scale"	: 545978.7733895439},
+				                {"level" : 11, "resolution" : 76.43702827148438, 	"scale" : 272989.38669477194},
+				                {"level" : 12, "resolution" : 38.21851413574219, 	"scale" : 136494.69334738597},
+				                {"level" : 13, "resolution" : 19.10925706787109, 	"scale" : 68247.34667369298},
+				                {"level" : 14, "resolution" : 9.554628533935547, 	"scale" : 34123.67333684649},
+				                {"level" : 15, "resolution" : 4.777314266967773, 	"scale" : 17061.836668423246},
+				                {"level" : 16, "resolution" : 2.388657133483887, 	"scale" : 8530.918334211623}
+			              	]
+			            });		
+			            */
+			         	// use tileinfo object generated by wmts2tileinfo
+						this.tileInfo = new esri.layers.TileInfo({
+						    "dpi": "90.71428571427429",
+						    "format": "image/png",
+						    "compressionQuality": 0,
+						    "spatialReference": {
+						        "wkid": "3857"
+						    },
+						    "rows": 256,
+						    "cols": 256,
+						    "origin": {
+						        "x": -20037508.34,
+						        "y": 20037508.34
+						    },
+						    "lods": [
+						        {
+						            "level": 0,
+						            "scale": 559082263.9508929,
+						            "resolution": 156543.0339062697
+						        },
+						        {
+						            "level": 1,
+						            "scale": 279541131.97544646,
+						            "resolution": 78271.51695313485
+						        },
+						        {
+						            "level": 2,
+						            "scale": 139770565.98772323,
+						            "resolution": 39135.758476567426
+						        },
+						        {
+						            "level": 3,
+						            "scale": 69885282.99386162,
+						            "resolution": 19567.879238283713
+						        },
+						        {
+						            "level": 4,
+						            "scale": 34942641.49693081,
+						            "resolution": 9783.939619141856
+						        },
+						        {
+						            "level": 5,
+						            "scale": 17471320.748465404,
+						            "resolution": 4891.969809570928
+						        },
+						        {
+						            "level": 6,
+						            "scale": 8735660.374232702,
+						            "resolution": 2445.984904785464
+						        },
+						        {
+						            "level": 7,
+						            "scale": 4367830.187116351,
+						            "resolution": 1222.992452392732
+						        },
+						        {
+						            "level": 8,
+						            "scale": 2183915.0935581755,
+						            "resolution": 611.496226196366
+						        },
+						        {
+						            "level": 9,
+						            "scale": 1091957.5467790877,
+						            "resolution": 305.748113098183
+						        },
+						        {
+						            "level": 10,
+						            "scale": 545978.7733895439,
+						            "resolution": 152.8740565490915
+						        },
+						        {
+						            "level": 11,
+						            "scale": 272989.38669477194,
+						            "resolution": 76.43702827454575
+						        },
+						        {
+						            "level": 12,
+						            "scale": 136494.69334738597,
+						            "resolution": 38.21851413727288
+						        },
+						        {
+						            "level": 13,
+						            "scale": 68247.34667369298,
+						            "resolution": 19.10925706863644
+						        },
+						        {
+						            "level": 14,
+						            "scale": 34123.67333684649,
+						            "resolution": 9.55462853431822
+						        },
+						        {
+						            "level": 15,
+						            "scale": 17061.836668423246,
+						            "resolution": 4.77731426715911
+						        },
+						        {
+						            "level": 16,
+						            "scale": 8530.918334211623,
+						            "resolution": 2.388657133579555
+						        },
+						        {
+						            "level": 17,
+						            "scale": 4265.4591671058115,
+						            "resolution": 1.1943285667897774
+						        },
+						        {
+						            "level": 18,
+						            "scale": 2132.7295835529058,
+						            "resolution": 0.5971642833948887
+						        },
+						        {
+						            "level": 19,
+						            "scale": 1066.3647917764529,
+						            "resolution": 0.29858214169744435
+						        },
+						        {
+						            "level": 20,
+						            "scale": 533.1823958882264,
+						            "resolution": 0.14929107084872217
+						        },
+						        {
+						            "level": 21,
+						            "scale": 266.5911979441132,
+						            "resolution": 0.07464553542436109
+						        },
+						        {
+						            "level": 22,
+						            "scale": 133.2955989720566,
+						            "resolution": 0.03732276771218054
+						        },
+						        {
+						            "level": 23,
+						            "scale": 66.6477994860283,
+						            "resolution": 0.01866138385609027
+						        },
+						        {
+						            "level": 24,
+						            "scale": 33.32389974301415,
+						            "resolution": 0.009330691928045136
+						        },
+						        {
+						            "level": 25,
+						            "scale": 16.661949871507076,
+						            "resolution": 0.004665345964022568
+						        },
+						        {
+						            "level": 26,
+						            "scale": 8.330974935753538,
+						            "resolution": 0.002332672982011284
+						        },
+						        {
+						            "level": 27,
+						            "scale": 4.165487467876769,
+						            "resolution": 0.001166336491005642
+						        },
+						        {
+						            "level": 28,
+						            "scale": 2.0827437339383845,
+						            "resolution": 0.000583168245502821
+						        },
+						        {
+						            "level": 29,
+						            "scale": 1.0413718669691923,
+						            "resolution": 0.0002915841227514105
+						        },
+						        {
+						            "level": 30,
+						            "scale": 0.5206859334845961,
+						            "resolution": 0.00014579206137570525
+						        }
+						    ]
+						});
+			            this.loaded = true;
+			            this.onLoad(this);
+		          	},
+					/*					
+		          	getTileUrl: function(level, row, col) {
+		            	return "http://sazabiii:8080/geowebcache.10012010.snapshot/service/wmts" 
+		            		+ "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile" 
+		                	+ "&LAYER=sazabiii.bluemarble"
+		                	+ "&STYLE="
+		                	+ "&FORMAT=image/png"
+		                	+ "&TILEMATRIXSET=arcgisonline.epsg3857"
+		                	+ "&TILEMATRIX=arcgisonline.epsg3857." + level
+		                	+ "&TILEROW=" + row
+		                	+ "&TILECOL=" + col;		               
+		        	}
+		        	*/
+		        	getTileUrl: function(level, row, col) {
+		        	    return "http://sazabiii:8080/geowebcache.10012010.snapshot/service/wmts"
+		        	    + "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile"
+		        	    + "&LAYER=sazabiii.bluemarble"
+		        	    + "&STYLE="
+		        	    + "&FORMAT=image/png"
+		        	    + "&TILEMATRIXSET=arcgisonline.epsg3857"
+		        	    + "&TILEMATRIX=arcgisonline.epsg3857."+ level 
+		        	    + "&TILEROW="+ row
+		        	    + "&TILECOL="+ col;
+		        	}
+				});
+			} 		
+			dojo.addOnLoad(init);
+    	</script>
+	</head>
+	<body>
+		<div id="map" class="claro" style="width:1024px;height:512px;border:1px solid #000;"></div>
+	</body>
+</html>

Added: sandbox/august/trunk/playground/wmts/jsapi-wmts-wgs84.html
===================================================================
--- sandbox/august/trunk/playground/wmts/jsapi-wmts-wgs84.html	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/jsapi-wmts-wgs84.html	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,145 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=7" />
+		<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
+		<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
+		<title>Portland Tile Server</title>
+		<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
+		<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
+		<script type="text/javascript">
+      		dojo.require("esri.map");
+    
+		    function init() {
+		        initLayer();
+		        var map = new esri.Map("map");
+		        map.addLayer(new ogc.WMTSLayer()); 
+		    }
+		     
+		    function initLayer(){			    
+		        dojo.declare("ogc.WMTSLayer", esri.layers.TiledMapServiceLayer, { // create WMTSLayer by extending esri.layers.TiledMapServiceLayer
+		          	constructor: function() {
+			            this.spatialReference = new esri.SpatialReference({wkid:4326});
+			            this.initialExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference);
+					    this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference);			
+						
+			            this.tileInfo = new esri.layers.TileInfo({
+			            	"rows": 256,
+			              	"cols": 256,
+			              	"dpi" : 96,
+			              	"format": "PNG",
+			              	"compressionQuality": 0,
+			              	"origin" : {
+			                	"x" : -180.0,
+			                	"y" : 90.0
+			              	},
+			              	"spatialReference": {
+			              		"wkid" : 4326
+			            	},
+			              	"lods" : [								
+								{"level" : 0, "resolution"  : 0.703125, "scale" 			: 295497598.570834},
+				                {"level" : 1, "resolution"  : 0.351562499999999, "scale" 	: 147748799.285417},
+				                {"level" : 2, "resolution"  : 0.17578125, "scale" 			: 73874399.6427087},
+				                {"level" : 3, "resolution"  : 0.0878906250000001, "scale" 	: 36937199.8213544},
+				                {"level" : 4, "resolution"  : 0.0439453125, "scale" 		: 18468599.9106772},
+				                {"level" : 5, "resolution"  : 0.02197265625, "scale" 		: 9234299.95533859},
+				                {"level" : 6, "resolution"  : 0.010986328125, "scale" 		: 4617149.97766929},
+				                {"level" : 7, "resolution"  : 0.0054931640625, "scale" 		: 2308574.98883465},
+				                {"level" : 8, "resolution"  : 0.00274658203124999, "scale" 	: 1154287.49441732},
+				                {"level" : 9, "resolution"  : 0.001373291015625, "scale" 	: 577143.747208662},
+				                {"level" : 10, "resolution" : 0.0006866455078125, "scale" 	: 288571.873604331},
+				                {"level" : 11, "resolution" : 0.000343322753906249, "scale" : 144285.936802165},
+				                {"level" : 12, "resolution" : 0.000171661376953125, "scale" : 72142.9684010827},
+				                {"level" : 13, "resolution" : 8.58306884765626E-05, "scale" : 36071.4842005414},
+				                {"level" : 14, "resolution" : 4.29153442382813E-05, "scale" : 18035.7421002707},
+				                {"level" : 15, "resolution" : 2.14576721191406E-05, "scale" : 9017.87105013534},
+				                {"level" : 16, "resolution" : 1.07288360595703E-05, "scale" : 4508.93552506767}
+			              	]
+			            });	
+			       
+						// use the tileinfo object generated by wmts2tileinfo
+						/*
+			            this.tileInfo = new esri.layers.TileInfo(
+			            		{
+			            		    "dpi": "90.71428571427429",
+			            		    "format": "PNG",
+			            		    "compressionQuality": 0,
+			            		    "spatialReference": {
+			            		        "wkid": "4326"
+			            		    },
+			            		    "rows": 256,
+			            		    "cols": 256,
+			            		    "origin": {
+			            		        "x": -180,
+			            		        "y": 90
+			            		    },
+			            		    "lods": [
+			            		        {
+			            		            "level": 0,
+			            		            "scale": 279542134.48660713,
+			            		            "resolution": 0.7031250070181514
+			            		        },
+			            		        {
+			            		            "level": 1,
+			            		            "scale": 139771067.24330357,
+			            		            "resolution": 0.3515625035090757
+			            		        },
+			            		        {
+			            		            "level": 2,
+			            		            "scale": 69885533.62165178,
+			            		            "resolution": 0.17578125175453785
+			            		        },
+			            		        {
+			            		            "level": 3,
+			            		            "scale": 34942766.81082589,
+			            		            "resolution": 0.08789062587726892
+			            		        },
+			            		        {
+			            		            "level": 4,
+			            		            "scale": 17471383.405412946,
+			            		            "resolution": 0.04394531293863446
+			            		        },
+			            		        {
+			            		            "level": 5,
+			            		            "scale": 8735691.702706473,
+			            		            "resolution": 0.02197265646931723
+			            		        },
+			            		        {
+			            		            "level": 6,
+			            		            "scale": 4367845.8513532365,
+			            		            "resolution": 0.010986328234658616
+			            		        },
+			            		        {
+			            		            "level": 7,
+			            		            "scale": 2183922.9256766182,
+			            		            "resolution": 0.005493164117329308
+			            		        }
+			            		    ]
+			            		}
+						);	
+						*/
+			            this.loaded = true;
+			            this.onLoad(this);
+		          	},
+		
+		          	getTileUrl: function(level, row, col) {
+		            	return "http://sazabiii:8080/geowebcache.10012010.snapshot/service/wmts" 
+		            		+ "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile" 
+		                	+ "&LAYER=sazabiii.bluemarble"
+		                	+ "&STYLE="
+		                	+ "&FORMAT=image/png"
+		                	+ "&TILEMATRIXSET=arcgisonline.epsg4326"
+		                	+ "&TILEMATRIX=arcgisonline.epsg4326:" + level
+		                	+ "&TILEROW=" + row
+		                	+ "&TILECOL=" + col;		               
+		        	}
+				});
+			} 		
+			dojo.addOnLoad(init);
+    	</script>
+	</head>
+	<body>
+		<div id="map" class="claro" style="width:1024px;height:512px;border:1px solid #000;"></div>
+	</body>
+</html>

Added: sandbox/august/trunk/playground/wmts/wmts-geowebcache-customized-tilingschema.html
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts-geowebcache-customized-tilingschema.html	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/wmts-geowebcache-customized-tilingschema.html	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,15 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>OpenLayers (GeoWebCache) WMTS Example</title>
+		<link rel="stylesheet" href="../../theme/default/style.css" type="text/css"/>
+		<link rel="stylesheet" href="../style.css" type="text/css" />
+		<script type="text/javascript" src="../../lib/Firebug/firebug.js"></script>
+		<script type="text/javascript" src="../../lib/OpenLayers.js"></script>
+
+		<script type="text/javascript" src="wmts-geowebcache-customized-tilingschema.js"></script>
+	</head>
+	<body onload="init();">
+		<div id="map" class="mediummap"></div>  
+	</body>
+</html>

Added: sandbox/august/trunk/playground/wmts/wmts-geowebcache-customized-tilingschema.js
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts-geowebcache-customized-tilingschema.js	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/wmts-geowebcache-customized-tilingschema.js	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,223 @@
+
+var map = null;
+
+function init() {	        
+	
+	OpenLayers.ProxyHost= function(url) {
+		return "/openlayers-trunk/ApacheProxyServlet?url=" + url;
+    };
+
+    // Portland    
+    //var lon = -122.838493; 
+	//var lat = 45.432976;
+	//var zoom = 9;
+	
+	// Portland in EPSG:2913
+	var lon = 7647130.2520;
+	var lat = 669087.0178;
+	var zoom = 1;
+        
+	var options = {
+		//panMethod: null, // set 'panMethod' to null to disable animated panning
+		controls: [       		
+		    new OpenLayers.Control.LayerSwitcher(),
+		    new OpenLayers.Control.PanZoomBar(),
+       		new OpenLayers.Control.Navigation(),       		
+       		new OpenLayers.Control.MousePosition()
+       	],
+       	projection: "EPSG:2913",
+        units: "ft",               
+        maxResolution: 2048000/(96*12),               
+        numZoomLevels: 11,	// default allowed zoom levels is 16 so change it to 20
+        maxExtent: new OpenLayers.Bounds(7241196.8729, 128656.7859, 9265592.9584, 981999.6828)        
+	};	
+	map = new OpenLayers.Map('map', options);			
+	
+	
+	
+	var url = "http://sazabiii:8080/geowebcache.10012010.snapshot/service/wmts";
+	//var url = "http://sazabi:8080/geowebcache-1.2.2/service/wmts";
+	//var url = "http://v2.suite.opengeo.org/geoserver/gwc/service/wmts/";
+	
+	OpenLayers.loadURL(
+		url,                	
+       	{ 
+			request: "GetCapabilities",
+			service: "WMTS",
+			version: "1.0.0" 
+		},
+        this,
+       	function(request) {	// parse WMTS capabilities XML and create WMTS layer						
+			
+			// add the WMS layer as base layer, WMTS and AgsTiled are overlay on top to see if match 
+			// GeoWebCacge WMTS layer actually points to the same WMS at back-end
+			var agsWmsLayer = new OpenLayers.Layer.WMS(
+		        "arcgisserver wms",
+		        "http://sazabiii/arcgis/services/playground/portland2913/MapServer/WMSServer?",
+		        {
+		            layers: '1,2,3,5,6,7,8,10,11,12,13,15,16,17,18,19,20,21,22,24,25,26,27,28,29', 
+		            styles: "",
+		            format: "image/png",
+		            transparency: false
+		        },
+		        {
+		            singleTile: false,
+		            isBaseLayer: true,
+		            buffer: 0,
+		            tileSize: new OpenLayers.Size(256, 256)
+		            //tileOrigin: new OpenLayers.LonLat(7241196.8729, 981999.6828)
+		        }
+		    );
+			//agsWmsLayer.setOpacity(0.72);
+			//agsWmsLayer.setVisibility(false);
+			map.addLayer(agsWmsLayer);
+			
+			// parse WMTS capabilities and add a WMTS layer in the same map
+			var format = new OpenLayers.Format.WMTSCapabilities();
+			var capabilities = format.read(request.responseXML || request.responseText);
+			
+			var tileMatrixSet = "sazabiii.portland.epsg2913";
+			// collect identifiers of tileMatrix from a tileMatrixSet
+			var matrixIds = [];			
+			var numOfTileMatrixSet = capabilities.contents.tileMatrixSets[tileMatrixSet].matrixIds.length;
+		    for (var i=0; i<numOfTileMatrixSet; ++i) {		    
+		        matrixIds[i] = capabilities.contents.tileMatrixSets[tileMatrixSet].matrixIds[i].identifier;
+		    }
+		    
+			var gwcWmtsLayer = new OpenLayers.Layer.WMTS({
+				// general Grid layer options 
+				name: 			"geowebcache wmts", 
+				url:			url,									
+				isBaseLayer: 	false,
+				singleTile: 	false,
+				// WMTS layer options
+				layer: 			"sazabiii.portland",				
+				style: 			"_null",				
+				matrixSet: 		tileMatrixSet,				
+				format: 		"image/png",																							 					
+				requestEncoding: "KVP",				
+				matrixIds: matrixIds,
+				tileSize: new OpenLayers.Size(256, 256),
+				// optional
+				tileFullExtent: new OpenLayers.Bounds(7241196.8729, 128656.7859, 9265592.9584, 981999.6828),				
+				// optional				
+				tileOrigin: new OpenLayers.LonLat(7241196.8729, 981999.6828)
+			});  
+			gwcWmtsLayer.setOpacity(0.72);			
+			gwcWmtsLayer.setVisibility(false);
+			map.addLayer(gwcWmtsLayer);	
+			map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+			
+			// add the AgsTiled layer from the same ArcGIS Server map service on which the base WMS layer is from
+			var agsTiledlayer = new OpenLayers.Layer.AgsTiled( 
+				"ags tiled", 
+				"http://sazabiii/ArcGIS/rest/services/playground/portland2913tiled/MapServer/tile/", 
+				{					
+					tileSize: new OpenLayers.Size(256, 256),
+					tileFormat:'png',
+					tileOrigin: new OpenLayers.LonLat(7241196.8729, 981999.6828),
+					tileFullExtent: new OpenLayers.Bounds(7241196.8729, 128656.7859, 9265592.9584, 981999.6828), 	
+					isBaseLayer: false,
+					buffer: 0,
+					singleTile: false					 					
+				}
+			);	
+			agsTiledlayer.setOpacity(0.72);			
+			agsTiledlayer.setVisibility(false);
+			map.addLayer(agsTiledlayer);
+		}	
+    );    	
+}
+
+
+// the same map and layers but in EPSG:2838 which is basically EPSG:2913 in meter instead of feet 
+/*
+var map = null;
+
+function init() {	        
+	
+	OpenLayers.ProxyHost= function(url) {
+		return "/openlayers-trunk/ApacheProxyServlet?url=" + url;
+    };
+
+    // Portland    
+    //var lon = -122.838493; 
+	//var lat = 45.432976;
+	//var zoom = 9;	
+	// Portland in EPSG:2913
+	//var lon = 7647130.2520;
+	//var lat = 669087.0178;
+	//var zoom = 0;
+	
+	// Portland in EPSG:2838
+	var lon = 7647130.2520*0.3048;
+	var lat = 669087.0178*0.3048;
+	var zoom = 3;
+	
+        
+	var options = {
+		//panMethod: null, // set 'panMethod' to null to disable animated panning
+		controls: [       		
+		    new OpenLayers.Control.LayerSwitcher(),
+		    new OpenLayers.Control.PanZoomBar(),
+       		new OpenLayers.Control.Navigation(),       		
+       		new OpenLayers.Control.MousePosition()
+       	],
+       	projection: "EPSG:2838",
+        units: "m",               
+        maxResolution: (0.3048*2048000)/(96*12),               
+        numZoomLevels: 11,	// default allowed zoom levels is 16 so change it to 20
+        maxExtent: new OpenLayers.Bounds(2207116.806860, 39214.588342, 2824152.733720, 299313.503317)        
+   	};	
+	map = new OpenLayers.Map('map', options);			
+	
+	var url = "http://sazabiii:8080/geowebcache.10012010.snapshot/service/wmts";
+	
+	OpenLayers.loadURL(
+		url,                	
+       	{ 
+			request: "GetCapabilities",
+			service: "WMTS",
+			version: "1.0.0" 
+		},
+        this,
+       	function(request) {	// parse WMTS capabilities XML and create WMTS layer						
+						
+			var format = new OpenLayers.Format.WMTSCapabilities();
+			var capabilities = format.read(request.responseXML || request.responseText);
+			
+			var tileMatrixSet = "sazabiii.portland.epsg2838";
+			// collect identifiers of tileMatrix from a tileMatrixSet
+			var matrixIds = [];			
+			var numOfTileMatrixSet = capabilities.contents.tileMatrixSets[tileMatrixSet].matrixIds.length;
+		    for (var i=0; i<numOfTileMatrixSet; ++i) {		    
+		        matrixIds[i] = capabilities.contents.tileMatrixSets[tileMatrixSet].matrixIds[i].identifier;
+		    }
+		    
+			var gwcWmtsLayer = new OpenLayers.Layer.WMTS({
+				// general Grid layer options 
+				name: 			"geowebcache wmts", 
+				url:			url,									
+				isBaseLayer: 	true,
+				singleTile: 	false,
+				// WMTS layer options
+				layer: 			"sazabiii.portland",				
+				style: 			"_null",				
+				matrixSet: 		tileMatrixSet,				
+				format: 		"image/png",																							 					
+				requestEncoding: "KVP",				
+				matrixIds: matrixIds,
+				tileSize: new OpenLayers.Size(256, 256),
+				// optional
+				tileFullExtent: new OpenLayers.Bounds(2207116.806860, 39214.588342, 2824152.733720, 299313.503317),				
+				// optional				
+				tileOrigin: new OpenLayers.LonLat(2207116.806860, 299313.503317)
+			});  
+			//gwcWmtsLayer.setOpacity(0.8);			
+			map.addLayer(gwcWmtsLayer);	
+			map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+		}
+    );    	
+}
+*/
+

Added: sandbox/august/trunk/playground/wmts/wmts-geowebcache-epsg3857.html
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts-geowebcache-epsg3857.html	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/wmts-geowebcache-epsg3857.html	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,15 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>OpenLayers (GeoWebCache) WMTS Example</title>
+		<link rel="stylesheet" href="../../theme/default/style.css" type="text/css"/>
+		<link rel="stylesheet" href="../style.css" type="text/css" />
+		<script type="text/javascript" src="../../lib/Firebug/firebug.js"></script>
+		<script type="text/javascript" src="../../lib/OpenLayers.js"></script>
+
+		<script type="text/javascript" src="wmts-geowebcache-epsg3857.js"></script>
+	</head>
+	<body onload="init();">
+		<div id="map" class="bigmap"></div>  
+	</body>
+</html>

Added: sandbox/august/trunk/playground/wmts/wmts-geowebcache-epsg3857.js
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts-geowebcache-epsg3857.js	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/wmts-geowebcache-epsg3857.js	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,146 @@
+var map = null;
+
+function init() {	        
+	
+	OpenLayers.ProxyHost= function(url) {
+		return "/openlayers-trunk/ApacheProxyServlet?url=" + url;
+    };
+
+    // San Francisco
+    //var lon = -122.391667;
+	//var lat = 37.760628;
+    //var zoom = 5;
+
+    // Portland
+    var lon = -122.838493; 
+	var lat = 45.432976;
+	var zoom = 9;
+        
+	var options = 	{
+		//panMethod: null, // set 'panMethod' to null to disable animated panning
+		controls: [       		
+		    new OpenLayers.Control.LayerSwitcher(),
+		    new OpenLayers.Control.PanZoomBar(),
+       		new OpenLayers.Control.Navigation(),       		
+       		new OpenLayers.Control.MousePosition()
+       	],
+       	projection: "EPSG:900913",
+        units: "m",
+        maxResolution: 156543.0339,
+        numZoomLevels: 20,	// default allowed zoom levels is 16 so change it to 20
+        maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)        
+   	};
+	
+	map = new OpenLayers.Map('map', options);	
+		
+	var base_layer = new OpenLayers.Layer.AgsTiled( 
+		"World Topo Map", 
+		"http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/",
+    	//"World Imagery Map",
+		//"http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/",
+    	{					
+			tileSize: new OpenLayers.Size(256,256),
+			tileFormat:'jpg',
+			tileOrigin: new OpenLayers.LonLat(-20037508.342789, 20037508.342789),
+			tileFullExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
+			isBaseLayer: true,
+			singleTile: false					 					
+		}
+	);
+	
+	// OSM base layer
+	//var base_layer = new OpenLayers.Layer.OSM();
+	
+	map.addLayer(base_layer);
+	
+	// transform lon/lat to coordinate in EPSG:900913
+	map.setCenter(
+		new OpenLayers.LonLat(lon, lat).transform(
+				new OpenLayers.Projection("EPSG:4326"),
+				map.getProjectionObject()
+		), 
+		zoom
+	);
+		
+	var url = "http://sazabiii:8080/geowebcache.10012010.snapshot/service/wmts";
+	
+	// add a WMTS by manually configure the tileMatrixSet and matrixIds
+	// in this case you don't need to load and parse capabilities file
+	var _tileMatrixSet = "arcgisonline.epsg3857";
+	var _matrixIds = [];				
+    for (var j=0; j<31; ++j) {		    
+        _matrixIds[j] = "arcgisonline.epsg3857." + j;
+    }
+    
+	var _gwcWmtsLayer = new OpenLayers.Layer.WMTS({
+		// general Grid layer options 
+		name: 			"gwc wmts w/o capa", 
+		url:			url,									
+		isBaseLayer: 	false,
+		singleTile: 	false,
+		// WMTS layer options
+		// you can choose different layers
+		//layer: 			"sazabiii.bluemarble",
+		layer: 			"sazabiii.portland",
+		style: 			"_null",				
+		matrixSet: 		_tileMatrixSet,				
+		format: 		"image/png",																							 					
+		requestEncoding: "KVP",				
+		matrixIds: _matrixIds,
+		// optional
+		tileFullExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),				
+		// optional
+		tileOrigin: new OpenLayers.LonLat(-20037508.34, 20037508.34)
+	});  
+	_gwcWmtsLayer.setOpacity(0.8);
+	_gwcWmtsLayer.setVisibility(false);
+	map.addLayer(_gwcWmtsLayer);
+	
+	OpenLayers.loadURL(
+		url,                	
+       	{ 
+			request: "GetCapabilities",
+			service: "WMTS",
+			version: "1.0.0" 
+		},
+        this,
+       	function(request) {	// parse WMTS capabilities XML and create WMTS layer						
+						
+			var format = new OpenLayers.Format.WMTSCapabilities();
+			var capabilities = format.read(request.responseXML || request.responseText);
+			// by parsing the capa, app developers know what tileMatrixSet are available 
+			//   such that people can choose one of them
+			var tileMatrixSet = "arcgisonline.epsg3857";
+			// collect identifiers of tileMatrix from a tileMatrixSet
+			var matrixIds = [];			
+			var numOfTileMatrixSet = capabilities.contents.tileMatrixSets[tileMatrixSet].matrixIds.length;
+		    for (var i=0; i<numOfTileMatrixSet; ++i) {		    
+		        matrixIds[i] = capabilities.contents.tileMatrixSets[tileMatrixSet].matrixIds[i].identifier;
+		    }
+		    
+			var gwcWmtsLayer = new OpenLayers.Layer.WMTS({
+				// general Grid layer options 
+				name: 			"gwc wmts w capa", 
+				url:			url,									
+				isBaseLayer: 	false,
+				singleTile: 	false,
+				// WMTS layer options
+				// you can choose different layers
+				//layer: 			"sazabiii.bluemarble",
+				layer: 			"sazabiii.portland",
+				style: 			"_null",				
+				matrixSet: 		tileMatrixSet,				
+				format: 		"image/png",																							 					
+				requestEncoding: "KVP",				
+				matrixIds: matrixIds,
+				// optional
+				tileFullExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),				
+				// optional
+				tileOrigin: new OpenLayers.LonLat(-20037508.34, 20037508.34)
+			});  
+			gwcWmtsLayer.setOpacity(0.8);
+			gwcWmtsLayer.setVisibility(false);
+			map.addLayer(gwcWmtsLayer);				
+		}
+    );    	
+}

Added: sandbox/august/trunk/playground/wmts/wmts-geowebcache-wgs84.html
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts-geowebcache-wgs84.html	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/wmts-geowebcache-wgs84.html	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,15 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>OpenLayers (GeoWebCache) WMTS Example</title>
+		<link rel="stylesheet" href="../../theme/default/style.css" type="text/css"/>
+		<link rel="stylesheet" href="../style.css" type="text/css" />
+		<script type="text/javascript" src="../../lib/Firebug/firebug.js"></script>
+		<script type="text/javascript" src="../../lib/OpenLayers.js"></script>
+
+		<script type="text/javascript" src="wmts-geowebcache-wgs84.js"></script>
+	</head>
+	<body onload="init();">
+		<div id="map" class="bigmap"></div>  
+	</body>
+</html>

Added: sandbox/august/trunk/playground/wmts/wmts-geowebcache-wgs84.js
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts-geowebcache-wgs84.js	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/wmts-geowebcache-wgs84.js	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,113 @@
+var map = null;
+
+function init() {	        
+	
+	OpenLayers.ProxyHost= function(url) {
+		return "/openlayers-trunk/ApacheProxyServlet?url=" + url;
+    };
+
+    // San Francisco
+    /*
+    var lon = -122.391667;
+	var lat = 37.760628;
+    var zoom = 3;
+    */
+    
+    var lon = 0.0; 
+	var lat = 0.0;
+	var zoom = 2;
+        
+	var options = {
+		controls: [    		
+		    new OpenLayers.Control.LayerSwitcher(),
+    		new OpenLayers.Control.Navigation(),   
+    		new OpenLayers.Control.PanZoom(),
+    		new OpenLayers.Control.MousePosition()
+    	],
+        projection: "EPSG:4326",		        		        					
+        //maxResolution: 1.40625,
+        maxResolution: 0.703125,
+        maxExtent: new OpenLayers.Bounds(-180.0, -90.0, 180.0, 90.0)
+	};	
+	map = new OpenLayers.Map('map', options);	
+						
+	var url = "http://sazabiii:8080/geowebcache.10012010.snapshot/service/wmts";
+	
+	// add a WMTS by manually configure the tileMatrixSet and matrixIds
+	// in this case you don't need to load and parse capabilities file
+	var _tileMatrixSet = "arcgisonline.epsg4326";
+	var _matrixIds = [];				
+    for (var j=0; j<31; ++j) {		    
+        _matrixIds[j] = "arcgisonline.epsg4326:" + j;
+    }
+    
+	var _gwcWmtsLayer = new OpenLayers.Layer.WMTS({
+		// general Grid layer options 
+		name: 			"gwc wmts w/o capa", 
+		url:			url,									
+		isBaseLayer: 	true,
+		singleTile: 	false,
+		// WMTS layer options
+		// you can choose different layers
+		layer: 			"sazabiii.bluemarble",		
+		style: 			"_null",				
+		matrixSet: 		_tileMatrixSet,				
+		format: 		"image/png",																							 					
+		requestEncoding: "KVP",				
+		matrixIds: _matrixIds,
+		// optional
+		tileFullExtent: new OpenLayers.Bounds(-180.0, -90.0, 180.0, 90.0),				
+		// optional
+		tileOrigin: new OpenLayers.LonLat(-180.0, 90.0)
+	});  
+	//_gwcWmtsLayer.setOpacity(0.72);	
+	map.addLayer(_gwcWmtsLayer);
+	map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+	
+	OpenLayers.loadURL(
+		url,                	
+       	{ 
+			request: "GetCapabilities",
+			service: "WMTS",
+			version: "1.0.0" 
+		},
+        this,
+       	function(request) {	// parse WMTS capabilities XML and create WMTS layer						
+						
+			var format = new OpenLayers.Format.WMTSCapabilities();
+			var capabilities = format.read(request.responseXML || request.responseText);
+			// by parsing the capa, app developers know what tileMatrixSet are available 
+			//   such that people can choose one of them
+			var tileMatrixSet = "arcgisonline.epsg4326";
+			// collect identifiers of tileMatrix from a tileMatrixSet
+			var matrixIds = [];			
+			var numOfTileMatrixSet = capabilities.contents.tileMatrixSets[tileMatrixSet].matrixIds.length;
+		    for (var i=0; i<numOfTileMatrixSet; ++i) {		    
+		        matrixIds[i] = capabilities.contents.tileMatrixSets[tileMatrixSet].matrixIds[i].identifier;
+		    }
+		    
+			var gwcWmtsLayer = new OpenLayers.Layer.WMTS({
+				// general Grid layer options 
+				name: 			"gwc wmts w capa", 
+				url:			url,									
+				isBaseLayer: 	false,
+				singleTile: 	false,
+				// WMTS layer options
+				// you can choose different layers
+				layer: 			"sazabiii.bluemarble",				
+				style: 			"_null",				
+				matrixSet: 		tileMatrixSet,				
+				format: 		"image/png",																							 					
+				requestEncoding: "KVP",				
+				matrixIds: matrixIds,
+				// optional
+				tileFullExtent: new OpenLayers.Bounds(-180.0, -90.0, 180.0, 90.0),				
+				// optional
+				tileOrigin: new OpenLayers.LonLat(-180.0, 90.0)
+			});  
+			gwcWmtsLayer.setOpacity(0.72);
+			gwcWmtsLayer.setVisibility(false);
+			map.addLayer(gwcWmtsLayer);				
+		}
+    );    	
+}

Deleted: sandbox/august/trunk/playground/wmts/wmts.html
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts.html	2010-12-03 06:50:18 UTC (rev 10942)
+++ sandbox/august/trunk/playground/wmts/wmts.html	2010-12-03 06:53:55 UTC (rev 10943)
@@ -1,15 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-	<head>
-		<title>OpenLayers WMTS Example</title>
-		<link rel="stylesheet" href="../../theme/default/style.css" type="text/css"/>
-		<link rel="stylesheet" href="../style.css" type="text/css" />
-		<script type="text/javascript" src="../../lib/Firebug/firebug.js"></script>
-		<script type="text/javascript" src="../../lib/OpenLayers.js"></script>
-
-		<script type="text/javascript" src="wmts.js"></script>
-	</head>
-	<body onload="init();">
-		<div id="map" class="bigmap"></div>  
-	</body>
-</html>

Deleted: sandbox/august/trunk/playground/wmts/wmts.js
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts.js	2010-12-03 06:50:18 UTC (rev 10942)
+++ sandbox/august/trunk/playground/wmts/wmts.js	2010-12-03 06:53:55 UTC (rev 10943)
@@ -1,101 +0,0 @@
-var map = null;
-
-function init() {	        
-	
-	OpenLayers.ProxyHost= "/openlayers-trunk/ApacheProxyServlet?resourceUrl=";
-	
-	var lon = -97.0;
-	var lat = 38.0;
-    var zoom = 1;
-    
-    var options = {
-		controls: [    		
-		    new OpenLayers.Control.LayerSwitcher(),
-    		new OpenLayers.Control.Navigation(),   
-    		new OpenLayers.Control.PanZoom()
-    	],
-        projection: "EPSG:4326",		        		        	
-		maxResolution: 0.3515625,		
-        //maxResolution: 1.40625,
-        maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
-	};	
-	map = new OpenLayers.Map('map', options);	
-
-	var agsTiledLayer0 = new OpenLayers.Layer.WMTS( 
-		"Blue Marble WMTS",  
-		"http://zeon/wmts/",
-		{					
-			layer: "world",
-			style: "blue_marble",
-			tilematrixset: "arcgis_online",
-			format: "image/jpeg"
-		},
-		{
-			tileSize: new OpenLayers.Size(512, 512),			
-			tileOrigin: new OpenLayers.LonLat(-180, 90),
-			tileFullExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
-			isBaseLayer: true,
-			singleTile: false,
-			requestEncoding: "REST"			
-		}
-	);  
-	map.addLayer(agsTiledLayer0);
-	
-	/*
-	var agsTiledLayer1 = new OpenLayers.Layer.WMTS( 
-		"ESRI StreetMap WMTS", 
-		"http://zeon/wmts/",
-		{					
-			layer: "world",
-			style: "esri_street",
-			tilematrixset: "arcgis_online",			
-			format: "image/jpeg"
-		},
-		{
-			tileSize: new OpenLayers.Size(512, 512),
-			tileFormatSuffix:'jpg',
-			tileOrigin: new OpenLayers.LonLat(-180, 90),
-			tileFullExtent: new OpenLayers.Bounds(-180, -90, 180, 90), 	
-			isBaseLayer: true,
-			singleTile: false,
-			requestEncoding: "REST",
-		}
-	);  
-	map.addLayer(agsTiledLayer1);
-	*/	
-	map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
-	
-	var url = "http://sazabi:8080/geowebcache-1.2.2/service/wmts/";
-	var tileMatrixSet = "arcgis-online-wgs84";
-	
-	OpenLayers.loadURL(
-		url,                	
-       	{ request: "GetCapabilities",service: "WMTS",version: "1.0.0" },
-        this,  
-       	function(request) {
-			var format = new OpenLayers.Format.WMTSCapabilities();
-			var capabilities = format.read(request.responseXML || request.responseText);    				
-			var gwcWmtsLayer0 = new OpenLayers.Layer.WMTS( 
-				"GeoWebCache USA WMTS", 
-				url,
-				{					
-					layer: "arcgis-online-wms",
-					style: "",
-					tilematrixset: tileMatrixSet,				
-					format: "image/png"
-				},
-				{																			 	
-					isBaseLayer: false,
-					singleTile: false,
-					// WMTS specific options
-					requestEncoding: "KVP",
-					tileMatrics: capabilities.contents.tileMatrixSets[tileMatrixSet].tileMatrics,
-					tileFullExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
-				}
-			);  
-			gwcWmtsLayer0.setOpacity(0.49);
-			map.addLayer(gwcWmtsLayer0);	
-			map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
-		}
-    );	
-}

Added: sandbox/august/trunk/playground/wmts/wmts2tileinfo.css
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts2tileinfo.css	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/wmts2tileinfo.css	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,9 @@
+.standardinput {
+    width: 512px;    
+    border: 1px solid #666;
+}
+.standard {
+    font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
+    font-size: 80%;
+    color: #666;    
+}

Added: sandbox/august/trunk/playground/wmts/wmts2tileinfo.html
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts2tileinfo.html	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/wmts2tileinfo.html	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,126 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>wmts2tileinfo</title>
+		<link rel="stylesheet" href="../../theme/default/style.css" type="text/css"/>
+		<link rel="stylesheet" href="wmts2tileinfo.css" type="text/css" />
+		
+		<script type="text/javascript" src="../../lib/Firebug/firebug.js"></script>
+		<script type="text/javascript" src="../../lib/OpenLayers.js"></script>
+		<!--  
+		<script type="text/javascript" src="http://august-openlayers.appspot.com/openlayers/trunk+/OpenLayers.js"></script>
+		-->
+		<script type="text/javascript" src="wmts2tileinfo.js"></script>
+	</head>
+	<body onload="init();">
+		<div id="url_input_div">
+			<table class="standard">				
+				<tr>						
+					<td valign="top"><b>WMTS URL:&nbsp;</b></td>				
+					<td valign="top"><input id="url_input" type="text" value="http://sazabiii:8080/geowebcache.10012010.snapshot/service/wmts" class="standardinput"></input></td>
+					<td valign="top">
+						&nbsp;<input type="button" value="Connect" onclick="loadWmtsUrl();"></input>						
+						<b>Step 1: Type in WMTS URL and Click "Connect";</b>
+					</td>					
+				</tr>
+				<tr>						
+					<td valign="top"><b>Layers:&nbsp;</b></td>				
+					<td valign="top">
+						<select name="layers" id="layers_select" size="5" class="standardinput" onchange="updateTilingSchemaList();"></select>
+					</td>
+					<td valign="top">&nbsp;<b>Step 2: Select a WMTS Layer;</b></td>
+				</tr>
+				<tr>						
+					<td valign="top"><b>TileMatrixSet:&nbsp;</b></td>				
+					<td valign="top">
+						<select name="tilingschema" id="tilingschema_select" size="5" class="standardinput" onchange="updateSupportedCRS();"></select>
+					</td>
+					<td valign="top">&nbsp;<b>Step 2: Select a WMTS TileMatrix (Tiling Schema);</b></td>
+				</tr>
+				<tr>						
+					<td valign="top"><b>TileMatrix:&nbsp;</b></td>				
+					<td valign="top">
+						<select name="tilematrix" id="tilematrix_select" size="5" class="standardinput" onchange="updateSupportedCRS();"></select>
+					</td>
+					<td valign="top">&nbsp;<b>Step 3: You don't need to select, but pay attention to how tile matrix are named e.g. 
+					{tileMatrixSet}:{level}, {tileMatrixSet}.{level}, etc; you may need to adjust that in getTileUrl function at the end.</b></td>
+				</tr>
+				<tr>						
+					<td valign="top"><b>Tile Full Extent:&nbsp;</b></td>				
+					<td valign="top">
+						<input id="tilefullextent_input" type="text" value="UNKNOWN" class="standardinput" disabled="true">
+					</td>
+					<td valign="top">&nbsp;</td>
+				</tr>
+				<tr>						
+					<td valign="top"><b>Supported CRS:&nbsp;</b></td>				
+					<td valign="top">
+						<input id="supportedcrs_input" type="text" value="UNKNOWN" class="standardinput" disabled="true"></input>
+					</td>
+					<td valign="top">&nbsp;</td>
+				</tr>
+				<tr>						
+					<td valign="top"><b>DPI:&nbsp;</b></td>				
+					<td valign="top">
+						<select name="dpi" id="dpi_select" size="1" class="standardinput">
+							<option value="90.71428571427429" selected="true">0.28mm (90.714 DPI)</option>
+							<option value="96">96</option>														
+						</select>
+					</td>
+					<td valign="top">&nbsp;<b>Step 4: Select 0.28mm (90.714 DPI) for most WMTS UNLESS you're sure it's 96 DPI</b></td>
+				</tr>
+				<tr>						
+					<td valign="top"><b>Format:&nbsp;</b></td>				
+					<td valign="top">
+						<select name="format" id="format_select" size="1" class="standardinput">
+							<option value="image/png" selected="true">PNG</option>
+							<option value="image/jpg">JPG</option>
+						</select>
+					</td>
+					<td valign="top">&nbsp;<b>Step 5: Select tile format</b></td>
+				</tr>
+				<tr>						
+					<td valign="top"><b>Unit:&nbsp;</b></td>				
+					<td valign="top">
+						<select name="unit" id="unit_select" size="1" class="standardinput">
+							<option value="Meter" selected="true">Meter</option>							
+							<option value="Feet">Feet</option>
+							<option value="Degree">Degree</option>
+						</select>
+					</td>
+					<td valign="top">&nbsp;<b>Step 6: Select Map unit;</b></td>
+				</tr>
+				<tr>						
+					<td valign="top"><b>Axis Order:&nbsp;</b></td>				
+					<td valign="top">
+						<select name="unit" id="axisorder_select" size="1" class="standardinput">
+							<option value="lonlat" selected="true">Lon/Lat</option>							
+							<option value="latlon">Lat/Lon</option>							
+						</select>
+					</td>
+					<td valign="top">&nbsp;<b>Step 7: Adjust lon/lat or lat/lon order of tile origin</b></td>
+				</tr>
+				<tr>						
+					<td valign="top"><b>TileInfo Object:&nbsp;</b></td>				
+					<td valign="top">
+						<textarea id="tileinfo_textarea" rows="25" cols="20" class="standardinput">
+						</textarea>
+					</td>
+					<td valign="top">&nbsp;
+						<input type="button" value="wmts2tileinfo" onclick="wmts2tileinfo();"></input>
+						<input type="button" value="cleanup" onclick="cleanup();"></input>
+						<b>Step 10: Click "wmts2tileinfo" to generate ArcGIS JavaScript API code</b>
+					</td>
+				</tr>
+				<tr>						
+					<td valign="top"><b>getTileUrl Function:&nbsp;</b></td>				
+					<td valign="top">
+						<textarea id="gettileurl_textarea" rows="10" cols="20" class="standardinput">
+						</textarea>
+					</td>
+					<td valign="top">&nbsp;<b>You may need to adjust "...&TILEMATRIX=..." in getTileUrl() according to step 3</b></td>
+				</tr>
+			</table>			
+		</div> 
+	</body>
+</html>

Added: sandbox/august/trunk/playground/wmts/wmts2tileinfo.js
===================================================================
--- sandbox/august/trunk/playground/wmts/wmts2tileinfo.js	                        (rev 0)
+++ sandbox/august/trunk/playground/wmts/wmts2tileinfo.js	2010-12-03 06:53:55 UTC (rev 10943)
@@ -0,0 +1,216 @@
+var _capabilities;
+var _tileMatrixSets;
+var _layers;
+var _generatedCode = "";
+
+var _pixelPerUnit = {
+	'Meter': (1/(12))*0.3048,
+	'Feet': 1/(12),
+	'Degree': (1/(12*111319.8888888889))*0.3048
+};
+
+function init() {
+	cleanup();
+}
+
+function loadWmtsUrl() {
+	OpenLayers.ProxyHost= function(url) {
+		return "/openlayers-trunk/ApacheProxyServlet?url=" + url;
+    };
+    
+    // WMTS end point url
+	//var url = "http://sazabiii:8080/geowebcache.10012010.snapshot/service/wmts";
+	var url = document.getElementById("url_input").value;
+    
+	OpenLayers.loadURL(
+		url,                	
+       	{ 
+			request: "GetCapabilities",
+			service: "WMTS",
+			version: "1.0.0" 
+		},
+        this,
+       	function(request) {	// parse WMTS capabilities XML and create WMTS layer												
+			var format = new OpenLayers.Format.WMTSCapabilities();
+			
+			_capabilities = format.read(request.responseXML || request.responseText);
+			_tileMatrixSets = _capabilities.contents.tileMatrixSets;
+			
+			_layers = _capabilities.contents.layers;
+			var layers_select = document.getElementById("layers_select");
+			for(var i=0; i<_layers.length; i++) {
+				var layer = _layers[i];
+				var layerOpt = document.createElement("option");
+				layerOpt.setAttribute("value", layer.identifier);
+				var text = document.createTextNode(layer.identifier);
+				layerOpt.appendChild(text);
+				layers_select.appendChild(layerOpt);							
+			}
+			layers_select.onchange = function() {
+				var tilingschema_select = document.getElementById("tilingschema_select");
+				var oldListLength = tilingschema_select.options.length
+				for(var k=0; k<oldListLength; k++) {
+					tilingschema_select.remove(0);
+				}
+				var selectedLayerId = getSelectedOptionValue("layers_select");
+				for(var i=0; i<_layers.length; i++) {
+					var layer = _layers[i];
+					if(layer.identifier == selectedLayerId) {
+						for(var j=0; j<layer.tileMatrixSetLinks.length; j++) {
+							var tileMatrixSet = layer.tileMatrixSetLinks[j];
+							var tilingSchemaOpt = document.createElement("option");
+							tilingSchemaOpt.setAttribute("value", tileMatrixSet.tileMatrixSet);
+							var text = document.createTextNode(tileMatrixSet.tileMatrixSet);
+							tilingSchemaOpt.appendChild(text);
+							tilingschema_select.appendChild(tilingSchemaOpt);
+						}
+					}
+				}				
+			}								
+		}
+    ); 
+}
+
+function wmts2tileinfo() {
+	
+	var tilingschema_select = document.getElementById("tilingschema_select");
+	if(tilingschema_select.options.length <= 0) {
+		alert("...invalid tiling schema...");
+		return;
+	}
+	
+	var selectedIdx = -1;
+	for(var i=0; i<tilingschema_select.options.length; i++) {
+		if(tilingschema_select.options[i].selected == true) {
+			selectedIdx = i;
+		}
+	}
+	if(selectedIdx < 0) {
+		alert("...select tiling schema...");
+		return;
+	} else {
+		var tileMatrixSetId = tilingschema_select.options[selectedIdx].value;
+		if(_capabilities) {
+			
+			var EsriTileInfoObj = {};
+			EsriTileInfoObj.dpi = getSelectedOptionValue("dpi_select");	// WMTS capabilities does provide DPI
+			OpenLayers.Console.debug("...dpi: " + EsriTileInfoObj.dpi);
+			EsriTileInfoObj.format = getSelectedOptionValue("format_select");	// WMTS capabilities does provide DPI
+			OpenLayers.Console.debug("...format: " + EsriTileInfoObj.format);
+			EsriTileInfoObj.compressionQuality = 0;
+						
+			var tileMatrixSet = _capabilities.contents.tileMatrixSets[tileMatrixSetId];
+			
+			// supportedCRS has syntax like 'urn:ogc:def:crs:EPSG::4326'
+			var supportedCRSTokens = tileMatrixSet.supportedCRS.split(":");
+			var supportedCRS = supportedCRSTokens[supportedCRSTokens.length-1];
+			EsriTileInfoObj.spatialReference = {};
+			EsriTileInfoObj.spatialReference.wkid = supportedCRS;
+			
+			// take the tile origin and tile width/height of the first tileMatrix
+			var tileWidth = tileMatrixSet.matrixIds[0].tileWidth;
+			OpenLayers.Console.debug("...tile width: " + tileWidth);
+			var tileHeight = tileMatrixSet.matrixIds[0].tileHeight;
+			OpenLayers.Console.debug("...tile height: " + tileHeight);	
+			EsriTileInfoObj.rows = tileWidth;
+			EsriTileInfoObj.cols = tileHeight;
+			
+			var axisorder = getSelectedOptionValue("axisorder_select");			
+			if(axisorder == "latlon") {
+				var x = tileMatrixSet.matrixIds[0].topLeftCorner.lat;
+				var y = tileMatrixSet.matrixIds[0].topLeftCorner.lon;
+			} else {
+				var x = tileMatrixSet.matrixIds[0].topLeftCorner.lon;
+				var y = tileMatrixSet.matrixIds[0].topLeftCorner.lat;
+			}			
+			EsriTileInfoObj.origin = {};			
+			EsriTileInfoObj.origin.x = x;
+			EsriTileInfoObj.origin.y = y;
+			
+			EsriTileInfoObj.lods = [];
+			var unit = getSelectedOptionValue("unit_select");
+			for(var i=0; i<tileMatrixSet.matrixIds.length; i++) {
+				var lod = {};
+				lod.level = i;
+				lod.scale = tileMatrixSet.matrixIds[i].scaleDenominator;
+				lod.resolution = (lod.scale*_pixelPerUnit[unit])/EsriTileInfoObj.dpi;	
+				OpenLayers.Console.debug(lod.resolution + "			" + lod.scale);
+				EsriTileInfoObj.lods.push(lod);
+			}
+			
+			var encoder = new OpenLayers.Format.JSON();
+			var json = encoder.write(EsriTileInfoObj, true);
+			OpenLayers.Console.debug(json);
+			document.getElementById("tileinfo_textarea").value = 
+				"this.tileInfo = new esri.layers.TileInfo("
+				+ json
+				+ ");";
+			
+			document.getElementById("gettileurl_textarea").value = 
+				"function(level, row, col) {" + "\n"
+				+ "    " + "return "
+				+ "\"" + document.getElementById("url_input").value + "\"" + "\n"
+				+ "    " + "+ " + "\"?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile\"" + "\n" 
+				+ "    " + "+ " + "\"&LAYER=" + getSelectedOptionValue("layers_select") + "\"" + "\n"
+				+ "    " + "+ " + "\"&STYLE=" + "\"" + "\n"
+				+ "    " + "+ " + "\"&FORMAT=" + getSelectedOptionValue("format_select") + "\"" + "\n"
+				+ "    " + "+ " + "\"&TILEMATRIXSET=" + getSelectedOptionValue("tilingschema_select") + "\"" + "\n"
+				+ "    " + "+ " + "\"&TILEMATRIX=" + getSelectedOptionValue("tilingschema_select") + ":\"" + "+ level " + "\n"
+				+ "    " + "+ " + "\"&TILEROW=" + "\"" + "+ row" + "\n"
+				+ "    " + "+ " + "\"&TILECOL=" + "\"" + "+ col;" + "\n"
+				+ "}";
+		}		
+	}		
+}
+
+function updateSupportedCRS() {	
+	var tileMatrixSetId = getSelectedOptionValue("tilingschema_select");
+	if(_capabilities) {
+		var tileMatrixSet = _capabilities.contents.tileMatrixSets[tileMatrixSetId];		
+		// supportedCRS has syntax like 'urn:ogc:def:crs:EPSG::4326'
+		document.getElementById("supportedcrs_input").value = tileMatrixSet.supportedCRS;
+		if(tileMatrixSet.BoundingBox) {
+			// TODO:
+			//document.getElementById("tilefullextent_input").value
+		}	
+		var oldListLength = document.getElementById("tilematrix_select").options.length
+		for(var k=0; k<oldListLength; k++) {
+			document.getElementById("tilematrix_select").remove(0);
+		}
+		for(var i=0; i<tileMatrixSet.matrixIds.length; i++) {
+			var tileMatrix = tileMatrixSet.matrixIds[i];
+			
+			var tileMatrixOpt = document.createElement("option");
+			tileMatrixOpt.setAttribute("value", tileMatrix.identifier);
+			var text = document.createTextNode(tileMatrix.identifier);
+			tileMatrixOpt.appendChild(text);
+			document.getElementById("tilematrix_select").appendChild(tileMatrixOpt);
+		}		
+	}
+}
+
+function cleanup() {
+	if(document.getElementById("layers_select").selectedIndex>=0) {
+		document.getElementById("layers_select").options[document.getElementById("layers_select").selectedIndex].selected = false;
+	}
+	if(document.getElementById("tilingschema_select").selectedIndex>=0) {
+		document.getElementById("tilingschema_select").options[document.getElementById("tilingschema_select").selectedIndex].selected = false;
+	}	
+	document.getElementById("tilefullextent_input").value = "UNKNOWN";
+	document.getElementById("supportedcrs_input").value = "UNKNOWN";
+	document.getElementById("tileinfo_textarea").value = "";
+	document.getElementById("gettileurl_textarea").value = "";
+	document.getElementById("dpi_select").options[0].selected = true;
+	document.getElementById("format_select").options[0].selected = true;
+	document.getElementById("unit_select").options[0].selected = true;
+	document.getElementById("axisorder_select").options[0].selected = true;
+}
+
+function getSelectedOptionValue(id) {
+	var element = document.getElementById(id);
+	if(element.selectedIndex >= 0) {
+		return element.options[element.selectedIndex].value;
+	} else {
+		return "";
+	}		
+}
\ No newline at end of file



More information about the Commits mailing list