OpenLayers3 access to UK weather server

Question

I'm trying to get started with OpenLayers3, to get access to weather data from the UK.

Their Datapoint service has a tiling WMTS server. I'm trying to access the radar/precipitation tiles. Receiving '501 - not implemented' errors.

<div id="map" class="map"></div>
<script>
  var map = new ol.Map({
    target: 'map',    
    layers: [
      new ol.layer.Tile({

        source: new ol.source.TileWMS({
          url: 'http://datapoint.metoffice.gov.uk/public/data/inspire/view/wmts',
          params: {
            'LAYERS': 'RADAR_UK_Composite_Highres', 
            'VERSION': '1.0.0',
            'key': '[your-api-access-key-goes-here]'
          }
        })      

      })
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [0, 0],
      zoom: 0
    })
  });
</script>

Their Capabilities doc has ServiceTypeVersion OGC WMTS = 1.0.0, so I override the OL default of 1.3.0. The layer name seems fine too.

The OpenLayers setup generates 3 calls to the server, of the form

http://datapoint.metoffice.gov.uk/public/data/inspire/view/wmts?SERVICE=WMS&VERSION=1.0.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=RADAR_UK_Composite_Highres&key=my_key_goes_here&WIDTH=256&HEIGHT=256&SRS=EPSG%3A4326&STYLES=&BBOX=-180%2C-270%2C180%2C90

Repeated here as plain text (note that my API key has been removed from the URL): http://datapoint.metoffice.gov.uk/public/data/inspire/view/wmts?SERVICE=WMS&VERSION=1.0.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=RADAR_UK_Composite_Highres&key=my_key_goes_here&WIDTH=256&HEIGHT=256&SRS=EPSG%3A4326&STYLES=&BBOX=-180%2C-270%2C180%2C90

In the Capabilities doc, there is an

Operation name="GetTile"

But there's no GetMap. That would explain the 501 error.

But if I try to force 'gettile', it gives a 400 error - bad request.

Answer 1

You are confused between TileWMS and ol.source.WMTS. The former is for accessing a WMS server, the latter for a WMTS server.