1

I would like to use the Positron base map provided by CartoDB with CesiumJS. According to this blog post this should be possible using this cesium-cartodb plugin. I'm using Cesium version 1.6.

Though the example given on the plugin github README page appears very straight forward, it is not clear what URL to use. I can't find what the values {s}, {z}, {x} and {y} relate to. I would also like to know if this image provider will automatically load in appropriate zoom level tiles like the default CesiumJS image providers.

var basemapProvider = new Cesium.CartoDBImageryProvider({
    url: '<MAP_TEMPLATE_URL>', // e.g.:     http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png,
    credit: 'Basemap courtesy of CartoDB'
});

viewer = new Cesium.Viewer('cesiumContainer',{
    imageryProvider: basemapProvider,
    baseLayerPicker: false
});

None of the examples ive seem work for me, they make calls to the following urls and fail:

http://b.basemaps.cartocdn.com/light_all/1/1/0.png/
http://b.basemaps.cartocdn.com/light_all/1/0/1.png/
http://c.basemaps.cartocdn.com/light_all/1/1/1.png/
http://a.basemaps.cartocdn.com/light_all/1/0/0.png/
2
  • hmm, seems like it might be related to a firewall? Commented Feb 25, 2015 at 22:31
  • Yeah, I disabled my firewall briefly and got the following error: Image from origin 'a.basemaps.cartocdn.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access. The response had HTTP status code 404. I thought CORS was just for scripts not images?
    – Red Panda
    Commented Feb 25, 2015 at 22:44

1 Answer 1

1

You just need to stick in the url template into that url line and not worry about the s, z, x, y variables -- they're filled in automatically by the mapping libraries you choose.

That is, leave it like this:

var basemapProvider = new Cesium.CartoDBImageryProvider({
    url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    credit: 'Basemap courtesy of CartoDB'
});

You can see the example you're probably pulling the code from live.

Leaflet and many other APIs use the same format xyz format and fill in those values automatically behind the scenes. You can open your console to see that the correct tiles are automatically downloaded:

enter image description here

The templates for other CartoDB basemaps are here.

3
  • Thanks for your reply, can you think of any reason why it might load the images once or twice and then stop working? GET requests for tiles : status failed.
    – Red Panda
    Commented Feb 25, 2015 at 19:01
  • could you give more information? maybe a link to one of the failed tile requests? Commented Feb 25, 2015 at 20:32
  • a.basemaps.cartocdn.com/light/1/0/0.png Here is an image of my console output here
    – Red Panda
    Commented Feb 25, 2015 at 22:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.