Open Layers 3 Reading ECMWF WMS layer

Question

I'm struggling to get a WMS feed to work, the feed is explained here:

https://software.ecmwf.int/wiki/display/MACSUP/Accessing+public+CAMS+WMS+products

An example URL to retrieve a layer is:

https://apps.ecmwf.int/wms/?token=public&request=GetMap&layers=composition_aod550,grid,foreground&width=600&bbox=-180,-90,180,90

However, I'm not sure how to get the Open Layers 3 WMS API to read this layer in, i'm currently doing:

var layer_to_return = new ol.layer.Tile({
  preload: Infinity,
  visible: true,
  source: new ol.source.TileWMS(({
    url: 'https://apps.ecmwf.int/wms/',
    params: {'LAYERS': 'composition_aod550', 'token':'public'},
    serverType: 'geoserver',
    crossOrigin: 'anonymous'
    }))
});

map.addLayer(layer_to_return);

Which seems to include most of the URL, except for the 'grid' element and the bounding box. I'm not sure why it won't get rendered in OL3.

sifriday sifriday · Accepted Answer · 2016-02-23T12:53:13

I just got this working by tweaking two things:

the HTTPS was giving me a cross-origin problem
then, the tile server was returning unknown projection (the URL request defaults to EPSG:3587)

In case it helps you, for reference, both of those I worked out by: adding your code to an ol3 map; trying to load it; using the browser dev tools to see the URL of the tile requests being generated; opening one of those URLs in a separate tab; reading the error message in the XML returned from the WMS server.

I had a look at the capabilities file on the website you link to, and it seemed to suggest EPSG:4326 would work. So I tried this and it worked:

var layer = new ol.layer.Tile({
    preload: Infinity,
    visible: true,
    source: new ol.source.TileWMS({
        url: 'http://apps.ecmwf.int/wms/',
        params: {'LAYERS': 'composition_aod550', 'token':'public'},
        serverType: 'geoserver',
        crossOrigin: 'anonymous',
        projection: 'EPSG:4326'
    }),
    opacity: 0.5
});

Note that I've added an opacity of 0.5. This is so you can overlay it over another map source to see the country boundaries, such as an open street map.

I've put a working example here, with the transparency:

http://www.freytag.org.uk/snippets/cams.html

Open Layers 3 Reading ECMWF WMS layer

1 Answers