topic WMTS for NASA in ArcGIS JavaScript Maps SDK Questions

WMTS for NASA

FredSpataro — Thu, 04 Oct 2012 16:38:52 GMT

Hi All:

I'm trying to get a WMTS layer working for these new real time modis services from nasa. After some initial fumbling with the sample, I have layer coming into the map but all I get are black tiles. If I use the OpenLayers JavaScript API I get the expected layer images. I used fiddler watch urls from both versions and the requests appear to be basically the same (different parameter ordering but that shouldn't matter) and the binary response also appears to be the same.

Here's the test page:
ArcGIS JAPI: http://geo.gcs-holdings.net/nasawmts/default.aspx
OpenLayers: http://geo.gcs-holdings.net/nasawmts/openlayer/default.html

Here's the map init function:

  function init() {               esri.config.defaults.io.proxyUrl = "proxy.ashx";               var map = new esri.Map("map", {                 wrapAround180: false             });               var layerInfo = new esri.layers.WMTSLayerInfo({                 identifier: "MODIS_Terra_CorrectedReflectance_TrueColor",                 tileMatrixSet: "EPSG4326_250m",                 format: "jpeg",                 style: ""             });               var options = {                 serviceMode: "KVP",                 layerInfo: layerInfo             };                  var wmtsLayer = new esri.layers.WMTSLayer("http://map1.vis.earthdata.nasa.gov/wmts-geo/wmts.cgi", options);               map.addLayer(wmtsLayer);           }

Thanks for any suggestions!

Re: WMTS for NASA

JeffPace — Fri, 10 Dec 2021 21:16:04 GMT

Hi All:

I'm trying to get a WMTS layer working for these new real time modis services from nasa. After some initial fumbling with the sample, I have layer coming into the map but all I get are black tiles. If I use the OpenLayers JavaScript API I get the expected layer images. I used fiddler watch urls from both versions and the requests appear to be basically the same (different parameter ordering but that shouldn't matter) and the binary response also appears to be the same.

Here's the test page:
ArcGIS JAPI: http://geo.gcs-holdings.net/nasawmts/default.aspx
OpenLayers: http://geo.gcs-holdings.net/nasawmts/openlayer/default.html

Here's the map init function:
  function init() {


            esri.config.defaults.io.proxyUrl = "proxy.ashx";


            var map = new esri.Map("map", {
                wrapAround180: false
            });


            var layerInfo = new esri.layers.WMTSLayerInfo({
                identifier: "MODIS_Terra_CorrectedReflectance_TrueColor",
                tileMatrixSet: "EPSG4326_250m",
                format: "jpeg",
                style: ""
            });


            var options = {
                serviceMode: "KVP",
                layerInfo: layerInfo
            };
    
            var wmtsLayer = new esri.layers.WMTSLayer("http://map1.vis.earthdata.nasa.gov/wmts-geo/wmts.cgi", options);


            map.addLayer(wmtsLayer);


        }
Thanks for any suggestions!

your esri request is sending
FORMAT=image/jpeg

your open layer request is sending
FORMAT=image%2Fjpeg

if you fix your ESRI request it works
(it may be because the valid tile format is "jpg" not "jpeg", at least for WMS)

Re: WMTS for NASA

derekswingley1 — Thu, 04 Oct 2012 17:55:03 GMT

I would suggest using the WebTiledLayer. Here's a working example:

<!doctype html> <html lang="en">   <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title></title>     <link rel="stylesheet" href="http://servicesbeta.esri.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/nihilo/nihilo.css">     <link rel="stylesheet" href="http://servicesbeta.esri.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />     <style type="text/css">       html, body {          height: 100%; width: 100%;         margin: 0; padding: 0;       }        body{         background-color: #fff; overflow:hidden;          font-family: sans-serif;       }        #header {         padding: 4px 15px 4px 0;         background-color: #F2F2EC;          color: #575757;          font-size: 16pt;          text-align: right;          font-weight: bold;         height:55px;       }        .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }       #ds-h div { width: 100%; }       #ds .o1 { filter: alpha(opacity=10); opacity: .1; }       #ds .o2 { filter: alpha(opacity=8); opacity: .08; }       #ds .o3 { filter: alpha(opacity=6); opacity: .06; }       #ds .o4 { filter: alpha(opacity=4); opacity: .04; }       #ds .o5 { filter: alpha(opacity=2); opacity: .02; }       #ds .h1 { height: 1px; }       #ds .h2 { height: 2px; }       #ds .h3 { height: 3px; }       #ds .h4 { height: 4px; }       #ds .h5 { height: 5px; }              </style>     <script>var dojoConfig = { parseOnLoad: true }; </script>     <script src="http://servicesbeta.esri.com/jsapi/arcgis/3.2/"></script>     <script>       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.layers.WebTiledLayer");              var map;       function init() {         var ext = esri.geometry.Extent;         var bounds = new ext({"xmin":-6993870,"ymin":6864998,"xmax":19246655,"ymax":15161779,"spatialReference":{"wkid":102100}});         map = new esri.Map("map", {           extent: bounds,           wrapAround180: false         });         dojo.connect(map, "onLoad", function(map) {           dojo.connect(dijit.byId("map"), "resize", map, map.resize);         });          var wtl = esri.layers.WebTiledLayer;         // optional, but useful when a tiled layer only has a few levels         var tileInfo = tileInfo = new esri.layers.TileInfo({           "rows" : 256,           "cols" : 256,           "dpi" : 96,           "format" : "JPEG",           "compressionQuality" : 0,           "origin" : { "x" : -20037508.340000, "y" : 20037508.340000 },           "spatialReference" : { "wkid" : 102100 },           "lods" : [             {"level" : 0, "resolution" : 156543.033928, "scale" : 591657528},             {"level" : 1, "resolution" : 78271.51695000000472646207, "scale" : 295828764},             {"level" : 2, "resolution" : 39135.75847500000236323103, "scale" : 147914382},             {"level" : 3, "resolution" : 19567.87923750000118161552, "scale" : 73957191},             {"level" : 4, "resolution" : 9783.93961875000059080776, "scale" : 36978595},             {"level" : 5, "resolution" : 4891.96980937500029540388, "scale" : 18489298},             {"level" : 6, "resolution" : 2445.98490468750014770194, "scale" : 9244649},             {"level" : 7, "resolution" : 1222.99245234375007385097, "scale" : 4622324},             {"level" : 8, "resolution" : 611.49622617187503692548, "scale" : 2311162}            ]         });         var modis = new wtl("http://map1.vis.earthdata.nasa.gov/wmts-geo/wmts.cgi?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=MODIS_Terra_CorrectedReflectance_TrueColor&STYLE=&TILEMATRIXSET=EPSG4326_250m&TILEMATRIX=${level}&TILEROW=${row}&TILECOL=${col}&FORMAT=image%2Fjpeg", {           "copyright": "NASA",           "id": "NASA",           "tileInfo": tileInfo         });         map.addLayer(modis);       }       //show map on load        dojo.ready(init);     </script>   </head>   <body class="nihilo">     <div id="mainWindow"           data-dojo-type="dijit.layout.BorderContainer"           data-dojo-props="design:'headline',gutters:false"          style="width: 100%; height: 100%; margin: 0;">       <div id="header"             data-dojo-type="dijit.layout.ContentPane"            data-dojo-props="region:'top'">         NASA Modis       </div>       <div id="map" class="shadow"             data-dojo-type="dijit.layout.ContentPane"            data-dojo-props="region:'center'">          <!-- drop shadow divs -->         <div id="ds">           <div id="ds-h">             <div class="ds h1 o1"></div>             <div class="ds h2 o2"></div>             <div class="ds h3 o3"></div>             <div class="ds h4 o4"></div>             <div class="ds h5 o5"></div>           </div>         </div> <!-- end drop shadow divs -->                    </div>     </div>   </body> </html>

On jsfiddle: http://jsfiddle.net/ZfGm2/

Re: WMTS for NASA

FredSpataro — Thu, 04 Oct 2012 23:07:36 GMT

Thanks to both Derek and Jeff for the quick responses today.

It appears the NASA server is pretty particular about the url and parameters:

1. The format parameter must be encoded: "image/jpeg" no good... "image%2Fjpeg" works
Unfortuntaly, the "image/" is implemented in the esri wmts class so not much I can do there at this time I guess

2. It also appears that order of the parameters is being strictly considered by the NASA server. The esri wmts class sets the version parameter before the request parameter. This will cause blank tiles as well. Again this is in the wmts layer class but seems a little bit of an odd implmentation by the NASA server.

I sent an email off to the contacts on the NASA site, I'll update this thread if I get any response back about these two items

In the end using the base WebTileLayer works as Derek suggested. I did a little javascript investigation to get the tileInfo object from the wmts layer that called to the GetCapabilities request. Using this object I get a very similar map to the OpenLayer API version.

Again thank for the help... this esri forums are the best!