Request for WMTS example accessing a ArcGIS 10.1 WMTS service

CoreyAlix · ‎07-13-2012

I believe the ArcGIS Javascript WMTS examples is missing an example of accessing ArcGIS 10.1 WMTS tiles and I would benefit from such an example.

SiqiLi · ‎07-13-2012

Here is the example with 10.1 sample WorldTimeZones service.

<!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,IE=9" />     <!--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>       Add WMTS Layer     </title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       .esriScalebar{         padding: 20px 20px;       }       #map{         padding:0;       }       #citationInfo{         position:absolute;         color:black;         font-weight:bold;         font-size:12pt;         left:10px;         bottom:10px;         z-Index:999;       }     </style>     <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>     <script type="text/javascript">       dojo.require("esri.map");       dojo.require("esri.layers.wmts");       dojo.require("esri.dijit.Scalebar");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");             function init() {           esri.config.defaults.io.proxyUrl = "http://<server name>/proxy.ashx";        var initExtent = new esri.geometry.Extent({"xmin":-20037508.343,"ymin":-8861125.013,"xmax":20037508.343,"ymax":8861125.013,"spatialReference":{"wkid":3587}});        var map = new esri.Map("map", {           wrapAround180: true,     extent: initExtent          });         var layerInfo = new esri.layers.WMTSLayerInfo({           identifier: "WorldTimeZones",           tileMatrixSet: "nativeTileMatrixSet",           format: "png"         });         var options = {           serviceMode: "RESTful",           layerInfo: layerInfo         };         var wmtsLayer = new esri.layers.WMTSLayer("http://servicesbeta4.esri.com/arcgis/rest/services/WorldTimeZones/MapServer/WMTS",options);         map.addLayer(wmtsLayer);       }       dojo.addOnLoad(init);     </script>   </head>     <body class="claro">     <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">       <div id="map" dojotype="dijit.layout.ContentPane" region="center" >       </div>     </div>   </body>  </html>

FYI: Please remember to change the proxy url to yours.

View solution in original post

derekswingley1 · ‎07-13-2012

Have you tried modifying one of the WMTS samples from the SDK to use your ArcGIS Server service? I do not know of a public AGS 10.1 WMTS service.

SiqiLi · ‎07-13-2012

Here is the example with 10.1 sample WorldTimeZones service.

<!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,IE=9" />     <!--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>       Add WMTS Layer     </title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }       .esriScalebar{         padding: 20px 20px;       }       #map{         padding:0;       }       #citationInfo{         position:absolute;         color:black;         font-weight:bold;         font-size:12pt;         left:10px;         bottom:10px;         z-Index:999;       }     </style>     <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>     <script type="text/javascript">       dojo.require("esri.map");       dojo.require("esri.layers.wmts");       dojo.require("esri.dijit.Scalebar");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");             function init() {           esri.config.defaults.io.proxyUrl = "http://<server name>/proxy.ashx";        var initExtent = new esri.geometry.Extent({"xmin":-20037508.343,"ymin":-8861125.013,"xmax":20037508.343,"ymax":8861125.013,"spatialReference":{"wkid":3587}});        var map = new esri.Map("map", {           wrapAround180: true,     extent: initExtent          });         var layerInfo = new esri.layers.WMTSLayerInfo({           identifier: "WorldTimeZones",           tileMatrixSet: "nativeTileMatrixSet",           format: "png"         });         var options = {           serviceMode: "RESTful",           layerInfo: layerInfo         };         var wmtsLayer = new esri.layers.WMTSLayer("http://servicesbeta4.esri.com/arcgis/rest/services/WorldTimeZones/MapServer/WMTS",options);         map.addLayer(wmtsLayer);       }       dojo.addOnLoad(init);     </script>   </head>     <body class="claro">     <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">       <div id="map" dojotype="dijit.layout.ContentPane" region="center" >       </div>     </div>   </body>  </html>

FYI: Please remember to change the proxy url to yours.

derekswingley1 · ‎07-13-2012

Here is the example with 10.1 sample WorldTimeZones service.

Thanks for posting that. My only note would be to use sampleserver6 as opposed to servicesbeta4 as sampleserver6 is a 10.1 final AGS instance while servicesbeta4 is a 10.1 beta 2 instance: http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/WMTS

CoreyAlix · ‎07-25-2012

Thank you for that example. If you extend the example by adding the following layer to the map you'll find that there is misalignment:

esri.layers.ArcGISTiledMapServiceLayer("http://servicesbeta4.esri.com/arcgis/rest/services/WorldTimeZones/MapServer", {
    opacity: 0.5
});

I believe this is because the WMTS resolutions are calculated based on 0.28mm/pixel instead of 96 DPI even though the services abstract states, "the tile matrix set that has scale values calculated based on the dpi defined by ArcGIS Server tiled map service. The current tile dpi is 96":

layer.tileInfo.dpi 96
wmtsLayer.tileInfo.dpi 90.71428571428571

Is there a solution to this problem?

I've posted the code here (doesn't run because of the proxy requirement):

http://jsfiddle.net/F2p76/1/