I don't think I am building this wms provider correctly

CesiumJS
1

Hi there,

Could someone take a look at this WMS ?

http://wms.alaskamapped.org/ortho

and help me out with building a Cesium.WebMapServiceImageryProvider?

I have:

var spot = new Cesium.WebMapServiceImageryProvider({
url: ‘http://wms.alaskamapped.org/ortho’,
layers: 'ORTHO.RGB, //tried a bunch of different names out here
});

I am seeing a CORS error when the page loads, but I have seen those before when the problem ultimately was a poorly constructed url or parameter. I think I need to rule out the possibility that I am not referencing the layer properly.

thanks,

Evan

2

Hello Evan,

CORS issues usually have to do with how your server is configured. http://enable-cors.org/ is a good resource for learning about CORS and how to enable it.

I was able to get your imagery to load with the code you included in your post, so that’s not the problem.

Best,

Hannah

3

Hi Hannah,
Thanks for looking into that. Do you have an example I could see in the cesium online sandcastle?

I also found a TMS address:
http://tiles.gina.alaska.edu/tiles/SPOT5.SDMI.ORTHO_RGB/tile/{x}/{y}/{z}.png
and I can get this to work in a Leaflet fiddle app by simply adding

L.tileLayer('http://tiles.gina.alaska.edu/tiles/SPOT5.SDMI.ORTHO_RGB/tile/{x}/{y}/{z}.png').addTo(map)

But, again, when I try:

var spot = new Cesium.TileMapServiceImageryProvider({
  url: 'http://tiles.gina.alaska.edu/tiles/SPOT5.SDMI.ORTHO_RGB/tile/{x}/{y}/{z}.png',
  fileExtension: 'png'
});

it doesn't work. Same resource, same browser, and I am not doing anything to address CORS, what's the difference?

PS. I don't have any control over the server

4

Hi Evan,

You most likely have to enable CORS support on your own server. For example, we have a proxy route included in the server.js node script included with the Cesium download. If you run Sandcastle locally by doing node server.js, this code will work:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {
imageryProvider : new Cesium.WebMapServiceImageryProvider({
url: ‘//wms.alaskamapped.org/ortho’,
layers: ‘ORTHO.RGB’,
proxy : new Cesium.DefaultProxy(’/proxy/’)
}),
baseLayerPicker : false
});

``

For the TMS server, consider using the UrlTemplateImageryProvider instead, since you know the template of the URL:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {
imageryProvider : new Cesium.UrlTemplateImageryProvider({
url: ‘//tiles.gina.alaska.edu/tiles/SPOT5.SDMI.ORTHO_RGB/tile/{x}/{y}/{z}.png’,
proxy : new Cesium.DefaultProxy(’/proxy/’)
}),
baseLayerPicker : false
});

``

Best,

Hannah

5

Thanks again,

sorry I am so dense about CORS. I have read dozens of explanations and I only sort of get it. I will try this out.