WMTS in OpenLayers

[PaulHuppé]

Hi,

Has anyone been able to display a WMTS service in OpenLayers?  I have been trying for several days without success.

OpenLayers 2.12
ArcGIS Server 10.1
Capabilities:
http://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBCT3978/MapServer/WMTS?

Here is some of the code I have tried:

    <!-- OpenLayers Start -->
    <script type="text/javascript" src="js/proj4js-compressed.js"></script>
    <script type="text/javascript" src="js/OpenLayers.js"></script>
    <script type="text/javascript">
          // Add projection
        Proj4js.defs["EPSG:3978"] = "+proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs";
        var options2 = {
            div: "geomap2",
            theme: null,
            controls: [
              new OpenLayers.Control.Attribution(),
              new OpenLayers.Control.TouchNavigation({
                  dragPanOptions: {
                      enableKinetic: true
                  }
              })
              ],
            maxExtent: new OpenLayers.Bounds(4926564.35035694, -5396818.737236813, 5347435.64964306, 4659495.9082),
            maxResolution: "auto",
            projection: "EPSG:3978", 
            restrictedExtent: new OpenLayers.Bounds(4926564.35035694, -5396818.737236813, 5347435.64964306, 4659495.9082),
            units: 'm',
            displayProjection: new OpenLayers.Projection("EPSG:4269"),
            numZoomLevels: 18
        };
        // map2 is the map used to define an extent using the map (option c)
        map2 = new OpenLayers.Map("geomap2", options2);
        var styleBBOX = new OpenLayers.Style({
            'fillOpacity':0.05,
            'fillColor':'#008000',
            'strokeColor':'#008000',
            'strokeWidth':1
        });   
        bboxLayer2 = new OpenLayers.Layer.Vector("BBOX_Overlay2",{styleMap: styleBBOX});
        var pzb2 = new OpenLayers.Control.PanZoomBar({'div':OpenLayers.Util.getElement('panzoombar2'), zoomStopHeight: 8})
        pzb2.position=new OpenLayers.Pixel(210,0);
        currentLayer2 = "lowContrast";
    // If tile matrix identifiers differ from zoom levels (0, 1, 2, ...)
    // then they must be explicitly provided.
    var matrixIds = new Array(18);
    for (var i=0; i<18; ++i) {
        matrixIds = "EPSG:3978:" + i;
    }


    var wmts = new OpenLayers.Layer.WMTS({
        name: "BaseMaps_CBCT3978",
        url: "BaseMaps_CBCT3978",
        layer: "BaseMaps_CBCT3978",
        singleTile: false,
        //matrixSet: "CBCT3978",default028mm
        matrixSet: "default028mm",
        matrixIds: matrixIds,
        format: "image/jpg",
//        //requestEncoding: "REST",
        requestEncoding: "KVP",
        style: "default",
        opacity: 0.7,
        isBaseLayer: true
    });                

    map2.addLayer(wmts);

This generates URLs of the form:

http://dev.geogratis.gc.ca/demo_wet3/BaseMaps_CBCT3978?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=BaseMaps_CBCT3978&STYLE=default&TILEMATRIXSET=default028mm&TILEMATRIX=EPSG%3A3978%3A0&TILEROW=1&TILECOL=0&FORMAT=image%2Fjpg

and those URLs give me 404 errors.

Can anyone spot the problem?

Thanks,
Paul