CORS error using professional OWM tile server

CesiumJS
1

For our app, we have been using open weather map to show weather tiles on the Earth using the createOpenStreetMapImageryProvider with URL http://tile.openweathermap.org/map/{layer}/{z}/{x}/{y}.png?appid={api_key}, and this was working fine. We recently upgraded to the professional edition of the API, and are trying to use the other tile server which is https://maps.owm.io/map/{layer}/{z}/{x}/{y}.png?appid={api_key}. It works on our leaflet app, but for cesium, we are getting this error:

Access to Image at 'https://maps.owm.io/map/clouds/3/2/2.png?appid={API_KEY}' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

We can access the image in the browser, so I'm not sure what the problem is

2

WebGL requires cross-origin images to have proper CORS headers. This is a browser security requirement that does not apply to other mechanisms for loading images.

If you have a paid account, I would suggest contacting the OpenWeatherMap support team and ask them to enable proper CORS headers. Otherwise, you could set up a server-side reverse proxy on your server that makes it appear to the browser as if the images were loaded from your domain.

3

Is there anyway you can provide a code snippet of your original usage of the free service? It looks like I am only getting a single tile returned. Thanks for the help!

var imageryLayers = viewer.imageryLayers;
imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url : 'http://{s}.tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid={api_key}',
    layer : 'Clouds',
    style : 'default',
    format : 'image/png',
    tileMatrixSetID : 'a',
    maximumLevel: 18
}));

4

It ended up being a CORS error with the OWM people; I contacted them and they fixed it as of this morning.

Michael, I have been using the createOpenStreetMapImageryProvider for the OWM tiles, and it adds the {z}{x}{y} by default, so you have to put your API key in the fileExtension property.