Add a imageryProviderViewModel based on a KML

I'm a little new to Cesium and the mapping domain in general so apologies in advance if I get some of the vernacular wrong.

1. A concise explanation of the problem you're experiencing.

Add a imageryProviderViewModel to the base layer picker based on a KML.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

The function below does accomplish what I want but it's a bit hacky and I don't think it's possible to add this to the baselayer picker without something incredibly hacky so I'm open to other solutions.

async function removeBase(viewer) {
  let countryBorders;
  let countryNames;

  try {
    countryBorders = await CzmlDataSource.load(
    countryNames = await CzmlDataSource.load(
  } catch (e) {
    console.log("Failed to load json");
    return false;

  viewer.scene.globe.baseColor = Color.BLACK;
  return true;

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

The application I'm working on will be deployed in low bandwidth environments so having the option to have a base layer that is based on a KML and has no additional data requirements past the first load would be ideal.

4. The Cesium version you're using, your operating system and browser.

Cesium: 1.47.0
OS: Windows 10
Browser: Firefox 62.0.2 (64-bit)

I think if your KML looks good as a base layer then removing the imagery and keeping that should be a fine solution. You can see all the available types of imagery providers here:

I think it would only be worth implementing a custom imagery provider if you were streaming in KML tiles but it sounds like you only need to load all the data initially.

Typically for low bandwidth/offline environment, the Natural Earth Imagery that ships with Cesium is a good fallback: