Ol-cesium: how to load a 3d terrain from mapTile Cloud?

I use OpenLayers 6 and ol-cesium 2.15. The basemap in use on a 2d view is the ESRI ocean basemap. The problem is that, when using cesium, the map shows a white circle in correspondence of each pole (due to the nature of the ESRI map). To avoid this I imagined I could use a 3d terrain.

However I am having difficulties in getting it. I tried with free MapTile Cloud. The idea is: when I change to a 3d view I take the ocean basemap out and add a 3d terrain. But when I run the code, the 3d globe appears with my custom vector layers and no terrain (just sort of gradient white colors).

Any suggestion?

Here’s my code

const view =  new ol.View({
    projection: mercatorProjection,
    //center: ol.proj.transform([-97.6114, 38.8403], 'EPSG:3857', 'EPSG:4326'),
    center: ol.proj.transform([0,0], 'EPSG:3857', 'EPSG:4326'),
    zoom: 0
    }); 

 const ocean_map =
    new ol.layer.Tile({
       source: new ol.source.XYZ({
         attributions:'Tiles © <a href="https://services.arcgisonline.com/arcgis/' +
         'rest/services/Ocean/World_Ocean_Base/MapServer">ArcGIS</a>',
         url: 'https://services.arcgisonline.com/arcgis/rest/services/' +
         'Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}', /*ocean base map*/
         crossOrigin: "Anonymous",
         maxZoom: 15
       }),
       visible: true,
});
const source_eez=
 new ol.source.Vector({
   format: new ol.format.TopoJSON(),
   url: url_child + '/wp-content/themes/mmpatf/map/resources/EEZ_imma_topo.json',
   attributions: ['EEZ - ISRA'],
   crossOrigin: 'anonymous',
   loader: testXHR   
 });
 const layer_eez =
 new ol.layer.Vector({
   source: source_eez,
   style: eezStyle,
   name: 'EEZ - ISRA',
   visible: false,
 });
const map = new ol.Map({
    target: 'map',
    layers: [],
    view: view
});
map.addLayer(ocean_map);
map.addLayer(layer_eez);

/*CESIUM*/
//the following code enables the change of view in 3D Cesium (ol-cesium)
const ol3d = new olcs.OLCesium({
    map: map,
  });
  
  // Set up a variable to track whether the 3D view is enabled
let is3DViewEnabled = false;
  
  // Function to enable/disable the 3D view
document.getElementById('enable').onclick = function() {
    is3DViewEnabled = !is3DViewEnabled;
    ol3d.setEnabled(is3DViewEnabled);
  
    // Check if 3D view is enabled
    if (is3DViewEnabled) {

        map.getLayers().forEach(function(layer) {
            //change layer and get a 3D map
            if (layer instanceof ol.layer.Tile) {
            map.removeLayer(layer);
            const raster = new ol.layer.Tile({
                source: new ol.source.Tile({
                url: 'https://api.maptiler.com/tiles/terrain-quantized-mesh/{z}/{x}/{y}.quantized-mesh-1.0?key=MYKEY',
                }),
            });
            map.addLayer(raster);
            }
        });
 
        // Enable shadow map to allow Cesium to cast scene's shadows
        const scene = ol3d.getCesiumScene();
        scene.shadowMap.enabled = true;
        // Enable lighting the globe with the sun as a light source to have dynamic lighting conditions according to the position of the sun
        scene.globe.enableLighting = true;
        
            // Refresh the view
            map.updateSize(); // Refresh the OpenLayers map

    }
  
};

Hi there,

I’m not particular familiar with MapTile Cloud. Do you seeing any errors or failed network requests in the console?