AnsweredAssumed Answered

Cannot get WMTS Layer to work

Question asked by cbbardash@gmail.com on Feb 11, 2016
Latest reply on Feb 11, 2016 by MidnightYell2003

I have a WMTS Layer that I'd like to add to my application.  I worked through the documentation in the Esri JavaScript API help page, but was unsuccessful.  Next I thought I would start with an Esri example and work from there. However, when I copy their example into my text editor and try to run it (in Chrome and Firefox), it does not work either, despite the fact that it works in the Esri sandbox.  A colleague of mine also tried the Esri example and failed.  Below is the console error I get from running the unedited Esri example linked above.

WMTSLayer_Error.JPG

 

Below is my code for adding my WMTS layer, along with a screenshot showing similar errors in the console.  I don't even know where to start troubleshooting my script because I cannot even get Esri's example to work, and I feel like I don't understand enough about WMTS to know how to script it properly.  You can see that I did try a couple options to deal with the proxy server errors, but neither worked.  I should mention that I have been able to successfully add a WMS version of this service in my map, just not the WMTS.  Any help would be much appreciated.  Thanks!

 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Map with WMS</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">

    <style>

      html, body, #map {

        height: 100%;

        width: 100%;

        margin: 0;

        padding: 0;

      }

      body {

        background-color: #FFF;

        overflow: hidden;

        font-family: "Trebuchet MS";

      }

    </style>

    <script src="https://js.arcgis.com/3.15/"></script>    

    <script>

      var map;

      require([

        "esri/map",

        "esri/layers/WMTSLayer",

        "esri/layers/WMTSLayerInfo",

        "esri/geometry/Extent",

        "esri/layers/TileInfo",

        "esri/config",

        "dojo/domReady!"],

        function(

          Map,

          WMTSLayer,

          WMTSLayerInfo,

          Extent,

          TileInfo,

          esriConfig

          ){

          esriConfig.defaults.io.proxyUrl = "/proxy/";

          // esriConfig.defaults.io.corsEnabledServers = ["https://txgi.tnris.org"];

         

          var map = new Map("map");

 

          var WMTSLayerInfo = new WMTSLayerInfo({

            format: "image/png",

            identifier: "texas",

            title: "Texas"

          });

 

          // var resourceInfo = {

          //   version: "1.0.0"

          // };

 

          var options = {

            layerInfo: WMTSLayerInfo,

            serviceMode: "KVP"

          };

 

          var wmtsLayer = new WMTSLayer("https://txgi.tnris.org/login/path/pegasus-horizon-castro-comrade/wmts?", options);

 

          var wmtsLayer = new WMTSLayer("http://v2.suite.opengeo.org/geoserver/gwc/service/wmts");

         

          map.addLayer(wmtsLayer);

      });

    </script>

  </head>  

  <body>

      <div id="map">

      </div>

  </body>

</html>

 

My_WMTSLayer_Error.JPG

Outcomes