cesiumjs

How can I prevent the Cesium ion logo from showing up?

Using Cesium Sandcastle, if I have:

HTML body & css

<style>
  @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

JavaScript Code:

const osm = new Cesium.OpenStreetMapImageryProvider({
  url : 'https://a.tile.openstreetmap.org/'
});


const viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(osm),
  baseLayerPicker: false,
  geocoder: false,
  creditContainer: null,
  creditViewport: null,
});

It is my understanding that I should not be using Cesium ion. Is this correct?

However, what appears in the window contains the logo and text for Cesium ion:

Cesium ion logo

I assume I am missing some configuration option that would allow me to either not show the logo or have it show the correct one which just says "Cesium" or something.

I thought that adding the lines:

  creditContainer: null,
  creditViewport: null,

would hide it. I don't see any other obvious configuration options.

If hiding it isn't an option, then having it show just Cesium or CesiumJS would be preferred over ion, which I am not using.

What am I missing?

Solution

  • CesiumJS requires some extra steps to be fully offline and independent from Cesium ion according to their documentation.

    As far as removing the Cesium Ion logo, you can use the following JS code or CSS code to remove:

    JS:

    viewer._cesiumWidget._creditContainer.parentNode.removeChild(
viewer._cesiumWidget._creditContainer);

    or

    viewer._cesiumWidget._creditContainer.style.display = "none";

    CSS:

    .cesium-widget-credits{
display:none !important;
}

    Please note: While it is technically possible to remove the Cesium logo, doing so while using Cesium ion services is against the terms of service. (see Cesium Terms of Service)

    Source: Cesium Forum Post

    EDIT

    Voted best by the questioner, you can also make the following change to the original code:

    const osm = new Cesium.OpenStreetMapImageryProvider({
  url : 'https://a.tile.openstreetmap.org/'
});


const viewer = new Cesium.Viewer("cesiumContainer", {
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(osm),
  baseLayerPicker: false,
  geocoder: false,
  creditContainer: document.createElement("none")
});