Using CartoDB Basemaps with CesiumJS

Question

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/

• Andy Eschbacher: hmm, seems like it might be related to a firewall?
• Red Panda: 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?

Answer 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.

• Red Panda: 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.
• Andy Eschbacher: could you give more information? maybe a link to one of the failed tile requests?
• Red Panda: a.basemaps.cartocdn.com/light/1/0/0.png Here is an image of my console output here