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/

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:

The templates for other CartoDB basemaps are here.