WMTS tiles images in wrong order

[PauPérez_Puigcerver]

I'm loading a WMTS layer in my html viewer (API for JavaScript 2.4), but the tiles in the layer are displayed in wrong order (see attached image).

I'm using this code to load the WMTS layer:

dojo.declare("ogc.WMTSLayer", esri.layers.TiledMapServiceLayer, { // create WMTSLayer by extending esri.layers.TiledMapServiceLayer
constructor: function() {
this.spatialReference = new esri.SpatialReference({wkid: 25830});
this.initialExtent = new esri.geometry.Extent(600000, 4150000, 850000, 4550000, this.spatialReference);
this.fullExtent = new esri.geometry.Extent(600000, 4150000, 850000, 4550000, this.spatialReference);
//
this.tileInfo = new esri.layers.TileInfo({
"dpi": "90.71428571427429",
"format": "image/png",
"compressionQuality": 0,
"spatialReference": {"wkid": "25830"},
"rows": 256,
"cols": 256,
"origin": {
"x": 600000,
"y": 4550000
},
"lods": [{
"level": "00",
"scale": 1600000,
"resolution": 448
}, {
"level": "01",
"scale": 1000000,
"resolution": 280
}, {
"level": "02",
"scale": 800000,
"resolution": 224
}, {
"level": "03",
"scale": 600000,
"resolution": 168
}, {
"level": "04",
"scale": 500000,
"resolution": 140
}, {
"level": "05",
"scale": 400000,
"resolution": 112
}, {
"level": "06",
"scale": 300000,
"resolution": 84
}, {
"level": "07",
"scale": 250000,
"resolution": 70
}, {
"level": "08",
"scale": 10000,
"resolution": 2.8
}]
});
this.loaded = true;
this.onLoad(this);
},

getTileUrl: function(level, row, col) {
return "http://cartoplora:8081/service" + "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile" + "&LAYER=orto_icv" + "&STYLE=_null" + "&FORMAT=image/png" + "&TILEMATRIXSET=grid_orto" + "&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col;
}
});

How can I do to load the tile rows in the correct order?

Thanks in advance.

Pau Pérez
PRODEVELOP S.L.
Conselleria de infraestructuras, Territorio y Medio Ambiente.
http://cartoweb.cma.gva.es

[derekswingley1]

2.4 introduced a new layer class specifically for WMTS services. Can you try using that class instead of creating your own? Here's a sample showing usage:  http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/layers_wmtslayer.html

Is your WMTS service public? Can you post a link to it?

[PauPérez_Puigcerver]

Hello swingley,

Thanks for the response.

I try using a layer class WMTS. This is the code:

var layerInfo = new esri.layers.WMTSLayerInfo({
identifier: "orto_icv",
tileMatrixSet: "grid_orto",
format: "png",
style: "_null"
});
var options = {
id: "Web_Ortofoto",
visible: true,
serviceMode: "KVP",
layerInfo: layerInfo
};
var CapaOrtofoto = new esri.layers.WMTSLayer("http://cartoplora:8081/service", options);

But the order of the images are the same, and also, the service makes requests that no exists, like this:

http://cartoplora:8081/service?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=orto_icv&STYLE=_null...

The TILECOL=0, TILECOL=1 and TILECOL=2 exists, but no TILECOL=3.

It seems that the rows are numbered in reverse order, and the number of columns in the requests is superior of existing columns.

I used MapProxy, that serves WMTS, reading a WMS layer outside our administration.
The service is not public because are in the test server, but if you can help me, I could put in a public server.

Many thanks.

Pau Pérez
Conselleria de Transportes, Territorio y Medio Ambiente
http://cartoweb.cma.gva.es

[JianHuang]

Pau,

Please make it public so that we can debug it.
The requests for non-existing tiles are expected if the tilematrixset doesn't specify the valid tile scheme with level information.

[PauPérez_Puigcerver]

Finally I find a solution for wrong order of tiles. The problem was that the origin of tiles was configured in bottom-left, and for WMTS is top-left for correct order.
The WMTS service now serves tiles in correct order.

Many thanks!

[bobcarr]

Using the WMTSLayer introduced at v2.4 to access tiles from Iowa Mesonet, tiles are appearing in the incorrect order.  The testing configuration is shown below. 

I have reversed the sign for the y-origin of the tileset in the test page.  The tileset info from the provider has the y-origin as y="-20037508.340000".  When the negative value is used for the y-origin in the map configuration, tiles are returned only for Level 0.

Zooming in on the test page shows tiles offset down and to the left.


A test page is available at:  http://geologic.dyndns.org/new_nexrad2.html

function init() {
       
          var map = new esri.Map("map");
   var startExtent = new esri.geometry.Extent({"xmin":-20037508.340000,"ymin": -20037508.340000, "xmax":20037508.340000,"ymax": 20037508.340000,"spatialReference": new esri.SpatialReference({"wkid":900913})});
          map.setExtent(startExtent);
                var tileInfo = new esri.layers.TileInfo({
                    "height" : 256,
                    "width" : 256,
                    "dpi" : "90.71428571427429",
                    "format" : "image/png",
                    "compressionQuality" : 0,
                    "origin" : {
                        "x" : -20037508.340000,
                        "y" : 20037508.340000
                    },
                    "spatialReference" : new esri.SpatialReference ({
                        "wkid" : 900913
                    }),
                    "lods" : [

                  {"level": "0", "resolution" : 156543.033928, "scale" : 559082263.9508},
                  {"level": "1", "resolution" : 78271.51695000000472646207, "scale" : 279541131.9754},
                         {"level": "2", "resolution" : 39135.75847500000236323103, "scale" : 139770565.9877},
                         {"level": "3", "resolution" : 19567.87923750000118161552, "scale" : 69885282.9939},
                         {"level": "4", "resolution" : 9783.93961875000059080776, "scale" : 34942641.4969},
                         {"level": "5", "resolution" : 4891.96980937500029540388, "scale" : 17471320.7485},
                         {"level": "6", "resolution" : 2445.98490468750014770194, "scale" : 8735660.3742},
                         {"level": "7", "resolution" : 1222.99245234375007385097, "scale" : 4367830.1871},
                         {"level": "8", "resolution" : 611.49622617187503692548, "scale" : 2183915.0936},
                         {"level": "9", "resolution" : 305.74811308593751846274, "scale" : 1091957.5468},
                         {"level": "10", "resolution" : 152.87405654296875923137, "scale" : 545978.7734},
                         {"level": "11", "resolution" : 76.43702827148437961569, "scale" : 272989.3867},
                         {"level": "12", "resolution" : 38.21851413574218980784, "scale" : 136494.6933},
                         {"level": "13", "resolution" : 19.10925706787109490392, "scale" : 68247.3467},
                         {"level": "14", "resolution" : 9.55462853393554745196, "scale" : 34123.6733},
           {"level": "15", "resolution" : 4.77731426696777372598, "scale" : 17061.8367},
           {"level": "16", "resolution" : 2.38865713348388686299, "scale" : 8530.9183},
           {"level": "17", "resolution" : 1.19432856674194343150, "scale" : 4265.4592},
           {"level": "18", "resolution" : 0.59716428337097171575, "scale" : 2132.7296},
           {"level": "19", "resolution" : 0.29858214168548585787, "scale" : 1066.3648}
                    ]
                });

         var tileExtent = new esri.geometry.Extent(-20037508.340000,-20037508.340000,20037508.340000,20037508.340000, 
             new esri.SpatialReference({wkid: 900913}));
        
                var layerInfo = new esri.layers.WMTSLayerInfo({ 
                   tileInfo: tileInfo, 
                   fullExtent: tileExtent, 
                   initialExtent: tileExtent, 
                   identifier: "nexrad-n0q-900913", 
                   tileMatrixSet: "", 
                   format: "png", 
                   style: "" 
                 }); 
      
               var resourceInfo = { 
                  version: "1.0.0", 
                  layerInfos: [layerInfo], 
                  copyright: "Mesonet" 
               };
            
               var options = { 
                   resourceInfo: resourceInfo, 
         layerInfo: layerInfo,
                       visible:true
               }; 
           
            
              var wmtsLayer = new esri.layers.WMTSLayer("http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/", options); 
           
             map.addLayer(wmtsLayer);            
      
      }

      dojo.addOnLoad(init);

Tileset information is available from Iowa Mesonet at:
(http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/)

Additional information about the Iowa Mesonet service is available at:

    http://mesonet.agron.iastate.edu/ogc/

[derekswingley1]

Hi Bob,

Thanks for providing plenty of detail and a simple repro case.

I haven't been able to get to the bottom of this. I've passed this on to someone who is a bit more knowledgable with regard to WMTS than me. I'll try to get you some more info by Monday.

[bobcarr]

Using the constructor to extend the TileMapServiceLayer (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/inside_custom_layers.htm), and reversing the order of "row" and "col" in the arguments to the calling function, I believe the map is now returning the correct tiles.

A sample is posted at:  http://geologic.dyndns.org/new_nexrad.html

Thanks, Derek, for reviewing my earlier post.

function init() {
        initLayer();
 var map = new esri.Map("map");
 var startExtent = new esri.geometry.Extent({"xmin":-11301768,"ymin": 3962510, "xmax":-7052110,"ymax": 6422839,"spatialReference": new esri.SpatialReference({"wkid":102100})});
        map.setExtent(startExtent);
        map.addLayer(new MesonetNexTiledMapServiceLayer());
      }
      function initLayer(){
          
          dojo.declare("MesonetNexTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, {
              constructor: function() {
           
            this.spatialReference = new esri.SpatialReference({ wkid:102100 });
            this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.340000,-20037508.340000,20037508.340000,20037508.340000, this.spatialReference));
           
            this.tileInfo = new esri.layers.TileInfo({
                "rows" : 256,
                "cols" : 256,
                "dpi" : 96,
                "format" : "PNG24",
                "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},
                   {"level" : 9, "resolution" : 305.74811308593751846274, "scale" : 1155581},
                   {"level" : 10, "resolution" : 152.87405654296875923137, "scale" : 577791},
                   {"level" : 11, "resolution" : 76.43702827148437961569, "scale" : 288895},
                   {"level" : 12, "resolution" : 38.21851413574218980784, "scale" : 144448},
                   {"level" : 13, "resolution" : 19.10925706787109490392, "scale" : 72224},
                   {"level" : 14, "resolution" : 9.55462853393554745196, "scale" : 36112},
       {"level" : 15, "resolution" : 4.77731426696777372598, "scale" : 18056},
     {"level" : 16, "resolution" : 2.38865713348388686299, "scale" : 9028},
     {"level" : 17, "resolution" : 1.19432856674194343150, "scale" : 4514},
       {"level" : 18, "resolution" : 0.59716428337097171575, "scale" : 2257},
     {"level" : 19, "resolution" : 0.29858214168548585787, "scale" : 1128}
                ]
            });

            this.loaded = true;
            this.onLoad(this);
          },

           getTileUrl: function(level, col, row) {
           
            return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + level +"/" + row.toString() +"/" + col.toString() +".png?";
          }
      });
    }