Leaflet WMTS wrong tile order

Question

I added a WMTS Layer to a Leaflet map. The tiles are loading but aren't in the correct order. Has anyone ever encountered this problem? If so, how did you overcome it?

    var map = new L.Map('viewerDiv', {
         crs: L.CRS.EPSG3857
    });
    var url =
        'http://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS/tile/1.0.0/World_Topo_Map/default/default028mm/{z}/{x}/{y}.png';
    var tilelayer = new L.tileLayer(url, {
        tileSize: 256,
        tms: true,
        attribution: 'World Map'
    });
    map.addLayer(tilelayer);
    map.setView(L.latLng(50, 8), 4);

http://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS/1.0.0/WMTSCapabilities.xml

Answer 1

If you look at the tileset capabilites, you'll notice line <TileMatrixSet>GoogleMapsCompatible</TileMatrixSet>, which means this is standard Google Maps tileset. As @nmtoken pointed out, this means that x and y order should be reversed and that this is not TMS layer, so layer option tms should be left out:

var tilelayer = new L.tileLayer(
  'http://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS/tile/1.0.0/World_Topo_Map/default/default028mm/{z}/{y}/{x}.png',
  {
    tileSize: 256,
    attribution: 'World Map'
  }
);