I have a sandcastle. However, a free key will be needed to make it work. The key can be obtained by going to https://www.maptiler.com/ to create a free account. Your key will then be on https://cloud.maptiler.com/account/keys/
The code is:
const osm = new Cesium.UrlTemplateImageryProvider({
url : 'https://api.maptiler.com/maps/ch-swisstopo-lbm-dark/256/{z}/{x}/{y}.png?key=<your key>',
});
console.log( osm.url )
const viewer = new Cesium.Viewer("cesiumContainer", {
baseLayer: Cesium.ImageryLayer.fromProviderAsync(osm),
baseLayerPicker: false,
geocoder: false,
animation: false,
timeline: false,
infoBox: false,
homeButton: true,
fullscreenButton: false,
sceneModePicker: false,
selectionIndicator: false,
navigationHelpButton: false,
terrainProvider: null,
creditContainer: document.createElement('none'),
});
The image this produces when zoomed out is:
There is a light blue tint to the globe. However, if I zoom in, I see:
which matches the tile set I am using (CH swisstopo LBM Dark).
I figure there is something about the lighting that needs to be changed so zoomed out will look the same as zoomed in, but I am not sure how to do that...? (I want the dark zoomed in look, not the light blue when zoomed out)
[UPDATE 1] What has gotten me a bit closer is setting:
viewer.scene.globe.atmosphereLightIntensity = 0
which then results in the zoomed out image:
instead of a light blue, it is a light gray.
There is the bluish ring around the globe which needs to go away as well.
The answer appears to be to set:
viewer.scene.globe.showGroundAtmosphere = false;
viewer.scene.skyAtmosphere.show = false
this produces the zoomed out image of:
And zooming in no longer shows a distinct color shift with the drawn tiles. There is no ring.
There is a useful demo which I had missed to play with the possible settings.