Community

WMTS for NASA

2437
3
Jump to solution
10-04-2012 09:38 AM
FredSpataro
by
Occasional Contributor III
‎10-04-2012 09:38 AM
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!
0 Kudos
1 Solution

Accepted Solutions
derekswingley1
by
Frequent Contributor
‎10-04-2012 10:55 AM
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/

View solution in original post

0 Kudos
3 Replies
JeffPace
by MVP Alum
MVP Alum
‎10-04-2012 10:29 AM
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)
0 Kudos
derekswingley1
by
Frequent Contributor
‎10-04-2012 10:55 AM
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/
0 Kudos
FredSpataro
by
Occasional Contributor III
‎10-04-2012 04:07 PM
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!
0 Kudos