OpenLayers3 WMTS out-of-memory error

Question

I'm trying to fetch weather radar data for the UK, from a WMST server.

The client can get the Capabilities fine. After that, the browser (Chrome and Firefox) crashes after a while, with an out-of-memory error.

The only thing obviously different in my case, in comparison with simple examples, is that an API key is needed for all interactions with the server.

  var parser = new ol.format.WMTSCapabilities();
  var map;

  //I pass the API key here
  fetch('http://datapoint.metoffice.gov.uk/public/data/inspire/view/wmts?REQUEST=GetCapabilities&key=my_key_goes_here').then(function(response) {
    return response.text();
  }).then(function(text) {
    console.log('Capabilities found.'); //ok

    var result = parser.read(text);
    var options = ol.source.WMTS.optionsFromCapabilities(result, {
        layer: 'RADAR_UK_Composite_Highres', 
        matrixSet: 'EPSG:4326'
    });

    map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM(),
          opacity: 0.7
        }),
        new ol.layer.Tile({ //fails when this Tile is included
          opacity: 1,
          source: new ol.source.WMTS(options),
          //I set this,  figuring that the API key is still needed
          url: 'http://datapoint.metoffice.gov.uk/public/data/inspire/view/wmts?my_key_goes_here'
        })
      ],
      target: 'mymap',
      view: new ol.View({
        center: ol.proj.fromLonLat([0, 52.0]),   //near London, UK
        zoom: 7
      })
    });
  });

The crash happens without the client trying to fetch the tiles (because I can't see any HTTP requests in the debugger; the last one is the get-capabilities request).

Any hints as to what might be causing this?

Answer 1

First of all, note that ol.layer.Tile does not have an url option. Ideally, the GetCapabilities response would advertise a service url that has the key already. Since the server you are trying to access does not have that, you'll have to tweak the result you get from the GetCapabilities response:

result.OperationsMetadata.GetTile.DCP.HTTP.Get[0].href += 'key=my_key_goes_here&'

The second and more severe problem is that the GetCapabilities response advertises incorrect scale denominators and origins. To fix those, you have to tweak the result again:

result.Contents.TileMatrixSet[0].TileMatrix.forEach(function(m) {
  m.ScaleDenominator *= 111319.49079327358;
  m.TopLeftCorner = m.TopLeftCorner.reverse();
});

After applying these tweaks, you can pass the result to ol.source.WMTS.optionsFromCapabilities, and you will get a correct map.

I'd strongly recommend you contact the service provider (contact information can also be found in the GetCapabilities response) and let them know about the problems with their GetCapabilities response.