Cannot get WMTS Layer to work

3399
1
02-11-2016 08:59 AM
ChrisBardash
New Contributor II

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

Tags (2)
0 Kudos
1 Reply
AdrianWelsh
MVP Honored Contributor

I am really unfamiliar with a lot of things related to web programming but I wanted to mention what has worked for me. I noticed that some of my maps, when coded in HTML and Javascript, would not open from a locally saved file for me but would open when I put it on a hosted server page thing. Does that make sense?

I was unfamiliar with the Esri sandbox at the time but I would presume that my code would have opened in the sandbox just as well as it opened from being hosted on my company's server. So, maybe you could try that if you have that option? It likely will have to be set to full on public for it to work as well (I found that out with my stuff that the private or the "me only" stuff could not be viewed when I was developing it).

0 Kudos