WMS image overlay not working in sandbox

Using the Web Map Service (WMS) Sandcastle demonstration, I have plugged in an alternative url, layers, format. From the beginning, the console is reporting ‘An error occurred in “WebMapServiceImageryProvider”: Failed to obtain image tile X: 0 Y: 0 Level: 0.’

I’ve tested the identical URL in Google Earth, and it works just fine, so I am skeptical that it may be CORS, however I do not operate the originating server and do not know its CORS configuration.

-Kirk

It is most likely a CORS issue. If you bring up the developer tools console you should see additional errors confirming this (unfortunately not all errors are able to be shown in the Sandcastle console).

Since Google Earth is a native application, it exists outside of browser sandboxing and is not restricted by CORS.

If you still think it’s not a CORS issue, can you share the URL and Cesium code you are using to configure it?

Matthew,

Thanks for your prompt reply and the reminder that GE is not a suitable comparison. I am waiting to hear from the server owner concerning CORS; depending upon the outcome, I will post the additional details here.

-Kirk

First, CORS was the root of the original problem, and this proved to be the ultimate remedy. However, now that I am getting data displayed, I have discovered some unexpected behavior that appears to be tiling the WMS overlay within the rectangle, in a way the varies with zoom. Allow me to demonstrate with the following two cases. (The hyperlink will illustrate the expected appearance of the overlay; the code, swapped into the Sandcastle, will generate the unexpected results.)

#1: http://205.153.22.36:8080/geoserver/iks/wms?service=WMS&version=1.1.0&request=GetMap&layers=iks:heatmap-point&styles=&bbox=92.5,-20.0,126.5,12.0&width=512&height=481&srs=EPSG:4326&format=image%2Fpng

Upon un/zooming, the image tiles within its specified rectangle.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

// Add a WMS imagery layer

var imageryLayers = viewer.imageryLayers;

imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({

url : ‘http://205.153.22.36:8080/geoserver/iks/wms?service=WMS&version=1.1.0&request=GetMap&layers=iks:heatmap-point&styles=&bbox=92.5,-20.0,126.5,12.0&width=512&height=481&srs=EPSG:4326&format=image%2Fpng’,

layers : ‘iks:heatmap-point’,

parameters : {

service: ‘WMS’,

version: ‘1.1.0’,

request: ‘GetMap’,

transparent : ‘true’,

format : ‘image/png’

},

rectangle: new Cesium.Rectangle.fromDegrees(92.5,-20.0,126.5,12.0)

}));

viewer.camera.viewRectangle(Cesium.Rectangle.fromDegrees(92.5,-20.0,126.5,12.0));

#2: http://205.153.22.36:8080/geoserver/iks/wms?service=WMS&version=1.1.0&request=GetMap&layers=iks:heatmap-stat&styles=&bbox=91.0,-20.0,130.5,30.5&width=400&height=512&srs=EPSG:4326&format=image%2Fpng

Again, upon un/zooming, the image tiles within its specified rectangle.

This one is more self-evident:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

// Add a WMS imagery layer

var imageryLayers = viewer.imageryLayers;

imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({

url : ‘http://205.153.22.36:8080/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poly_landmarks&styles=&bbox=-74.047185,40.679648,-73.90782,40.882078&width=352&height=512&srs=EPSG:4326&format=image%2Fpng’,

layers : ‘iks:heatmap-point’,

parameters : {

service: ‘WMS’,

version: ‘1.1.0’,

request: ‘GetMap’,

transparent : ‘true’,

format : ‘image/png’

},

enablePickFeatures: true,

rectangle: new Cesium.Rectangle.fromDegrees(-74.047185,40.679648,-73.90782,40.882078)

}));

viewer.camera.viewRectangle(Cesium.Rectangle.fromDegrees(-74.047185,40.679648,-73.90782,40.882078));

Problem solved. Part #1: CORS. Part#2: Over-specifying the URL. (See examples below.)

I don’t see any examples :slight_smile:

The example were BELOW as I typed my reply, however it was shuffled to the bottom when I finished it. Three examples are in the thread above.

You need to add a Proxy.

var viewer = new Cesium.Viewer(‘cesiumContainer’);
// Add a WMS imagery layer
var imageryLayers = viewer.imageryLayers;
imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url : ‘http://205.153.22.36:8080/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poly_landmarks&styles=&bbox=-74.047185,40.679648,-73.90782,40.882078&width=352&height=512&srs=EPSG:4326&format=image%2Fpng’,
layers : ‘iks:heatmap-point’,
parameters : {
service: ‘WMS’,
version: ‘1.1.0’,
request: ‘GetMap’,
transparent : ‘true’,
format : ‘image/png’
},
** proxy****: new Cesium.DefaultProxy(’/proxy/’),**
enablePickFeatures: true,
rectangle: new Cesium.Rectangle.fromDegrees(-74.047185,40.679648,-73.90782,40.882078)
}));

viewer.camera.viewRectangle(Cesium.Rectangle.fromDegrees(-74.047185,40.679648,-73.90782,40.882078));

``

Hi guys!
I still have the CORS problem when I try to execute the WMS Sandcastle example.
I am testing the code with the following parameters:
WMS URL: ‘http://mapas.igme.es/gis/services/Cartografia_Geologica/IGME_Edades_1M/MapServer/WMSServer

Layer Name: '0'

The exception is the famous "CORS No Access-Control-Allow-Origin".
If I add the proxy line (proxy: new Cesium.DefaultProxy('/proxy/')), I have a new exception like Error 400, Bad Request.
I tried this WMS service in other visor with a successful result, approximately in BBOX (-19, 45, 12, 33).
Could anyone help me?
Thank you very much for your replies!!

Bern.

Hello,

The server hosting the tiles needs to have CORS enabled. If you have control of the server, you can learn about enabling CORS here: http://enable-cors.org/

Otherwise, I’m not sure if there is a workaround. CORS is disabled by default for server security.

Best,

Hannah

Hello!,
Hannah! Thank you very much for you reply.
I don't understand if it's a CORS problem in the hosting side, why is working in other visors, like this one?:
http://www.idee.es/visualizador/

Thanks!

This works for me. What options are you specifying?

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var provider = new Cesium.WebMapServiceImageryProvider({

url : ‘http://mapas.igme.es/gis/services/Cartografia_Geologica/IGME_Edades_1M/MapServer/WMSServer’,

layers : ‘0’,

proxy: new Cesium.DefaultProxy(’/proxy/’)

});

viewer.imageryLayers.addImageryProvider(provider);

``