@cesium/engine 9.2.0 → 10.0.0

package/Source/DataSources/ModelVisualizer.js

@@ -441,8 +441,7 @@ ModelVisualizer.prototype.getBoundingSphere = function (entity, result) {
   }
 
   const scene = this._scene;
-  const globe = scene.globe;
-  const ellipsoid = defaultValue(globe?.ellipsoid, Ellipsoid.WGS84);
+  const ellipsoid = defaultValue(scene.ellipsoid, Ellipsoid.default);
 
   const hasHeightReference = model.heightReference !== HeightReference.NONE;
   if (hasHeightReference) {

package/Source/DataSources/PolygonGeometryUpdater.js

@@ -243,7 +243,7 @@ PolygonGeometryUpdater.prototype._computeCenter = function (time, result) {
   if (positions.length === 0) {
     return;
   }
-  const ellipsoid = this._scene.mapProjection.ellipsoid;
+  const ellipsoid = this._scene.ellipsoid;
 
   const tangentPlane = EllipsoidTangentPlane.fromPoints(positions, ellipsoid);
   const positions2D = tangentPlane.projectPointsOntoPlane(

package/Source/DataSources/PolylineGeometryUpdater.js

@@ -789,8 +789,9 @@ DynamicGeometryUpdater.prototype.update = function (time) {
   arcType = Property.getValueOrDefault(polyline._arcType, time, arcType);
 
   const globe = geometryUpdater._scene.globe;
+  const ellipsoid = geometryUpdater._scene.ellipsoid;
   if (arcType !== ArcType.NONE && defined(globe)) {
-    generateCartesianArcOptions.ellipsoid = globe.ellipsoid;
+    generateCartesianArcOptions.ellipsoid = ellipsoid;
     generateCartesianArcOptions.positions = positions;
     generateCartesianArcOptions.granularity = Property.getValueOrUndefined(
       polyline._granularity,
@@ -798,7 +799,7 @@ DynamicGeometryUpdater.prototype.update = function (time) {
     );
     generateCartesianArcOptions.height = PolylinePipeline.extractHeights(
       positions,
-      globe.ellipsoid
+      ellipsoid
     );
     if (arcType === ArcType.GEODESIC) {
       positions = PolylinePipeline.generateCartesianArc(

package/Source/DataSources/RectangleGeometryUpdater.js

@@ -220,7 +220,7 @@ RectangleGeometryUpdater.prototype._computeCenter = function (time, result) {
     return;
   }
   const center = Rectangle.center(rect, scratchCarto);
-  return Cartographic.toCartesian(center, Ellipsoid.WGS84, result);
+  return Cartographic.toCartesian(center, Ellipsoid.default, result);
 };
 
 RectangleGeometryUpdater.prototype._isHidden = function (entity, rectangle) {

package/Source/DataSources/ScaledPositionProperty.js

@@ -6,7 +6,7 @@ import ReferenceFrame from "../Core/ReferenceFrame.js";
 import Property from "./Property.js";
 
 /**
- * This is a temporary class for scaling position properties to the WGS84 surface.
+ * This is a temporary class for scaling position properties to the ellipsoid surface.
  * It will go away or be refactored to support data with arbitrary height references.
  * @private
  */
@@ -80,7 +80,7 @@ ScaledPositionProperty.prototype.getValueInReferenceFrame = function (
 
   result = this._value.getValueInReferenceFrame(time, referenceFrame, result);
   return defined(result)
-    ? Ellipsoid.WGS84.scaleToGeodeticSurface(result, result)
+    ? Ellipsoid.default.scaleToGeodeticSurface(result, result)
     : undefined;
 };
 

package/Source/DataSources/TerrainOffsetProperty.js

@@ -72,7 +72,7 @@ function TerrainOffsetProperty(
 
     this._updateClamping();
 
-    this._normal = scene.globe.ellipsoid.geodeticSurfaceNormal(
+    this._normal = scene.ellipsoid.geodeticSurfaceNormal(
       position,
       this._normal
     );
@@ -115,14 +115,13 @@ TerrainOffsetProperty.prototype._updateClamping = function () {
   }
 
   const scene = this._scene;
-  const globe = scene.globe;
   const position = this._position;
 
   if (Cartesian3.equals(position, Cartesian3.ZERO)) {
     this._terrainHeight = 0;
     return;
   }
-  const ellipsoid = globe.ellipsoid;
+  const ellipsoid = scene.ellipsoid;
   const cartographicPosition = ellipsoid.cartesianToCartographic(
     position,
     this._cartographicPosition
@@ -204,10 +203,7 @@ TerrainOffsetProperty.prototype.getValue = function (time, result) {
 
   this._updateClamping();
 
-  const normal = scene.globe.ellipsoid.geodeticSurfaceNormal(
-    position,
-    this._normal
-  );
+  const normal = scene.ellipsoid.geodeticSurfaceNormal(position, this._normal);
   return Cartesian3.multiplyByScalar(normal, this._terrainHeight, result);
 };
 

package/Source/DataSources/VelocityOrientationProperty.js

@@ -17,7 +17,7 @@ import VelocityVectorProperty from "./VelocityVectorProperty.js";
  * @constructor
  *
  * @param {PositionProperty} [position] The position property used to compute the orientation.
- * @param {Ellipsoid} [ellipsoid=Ellipsoid.WGS84] The ellipsoid used to determine which way is up.
+ * @param {Ellipsoid} [ellipsoid=Ellipsoid.default] The ellipsoid used to determine which way is up.
  *
  * @example
  * //Create an entity with position and orientation.
@@ -34,7 +34,7 @@ function VelocityOrientationProperty(position, ellipsoid) {
   this._ellipsoid = undefined;
   this._definitionChanged = new Event();
 
-  this.ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84);
+  this.ellipsoid = defaultValue(ellipsoid, Ellipsoid.default);
 
   const that = this;
   this._velocityVectorProperty.definitionChanged.addEventListener(function () {

package/Source/DataSources/exportKml.js

@@ -249,7 +249,7 @@ IdManager.prototype.get = function (id) {
  *
  * @param {object} options An object with the following properties:
  * @param {EntityCollection} options.entities The EntityCollection to export as KML.
- * @param {Ellipsoid} [options.ellipsoid=Ellipsoid.WGS84] The ellipsoid for the output file.
+ * @param {Ellipsoid} [options.ellipsoid=Ellipsoid.default] The ellipsoid for the output file.
  * @param {exportKmlModelCallback} [options.modelCallback] A callback that will be called with a {@link ModelGraphics} instance and should return the URI to use in the KML. Required if a model exists in the entity collection.
  * @param {JulianDate} [options.time=entities.computeAvailability().start] The time value to use to get properties that are not time varying in KML.
  * @param {TimeInterval} [options.defaultAvailability=entities.computeAvailability()] The interval that will be sampled if an entity doesn't have an availability.
@@ -405,7 +405,7 @@ exportKml._createState = function (options) {
   const kmlDoc = document.implementation.createDocument(kmlNamespace, "kml");
   return {
     kmlDoc: kmlDoc,
-    ellipsoid: defaultValue(options.ellipsoid, Ellipsoid.WGS84),
+    ellipsoid: defaultValue(options.ellipsoid, Ellipsoid.default),
     idManager: new IdManager(),
     styleCache: styleCache,
     externalFileHandler: externalFileHandler,

package/Source/Renderer/UniformState.js

@@ -1173,7 +1173,7 @@ Object.defineProperties(UniformState.prototype, {
    */
   ellipsoid: {
     get: function () {
-      return defaultValue(this._ellipsoid, Ellipsoid.WGS84);
+      return defaultValue(this._ellipsoid, Ellipsoid.default);
     },
   },
 });

package/Source/Scene/ArcGisMapServerImageryProvider.js

@@ -49,9 +49,9 @@ import DeveloperError from "../Core/DeveloperError.js";
  *                    a tiled layer.
  * @property {TilingScheme} [tilingScheme=new GeographicTilingScheme()] The tiling scheme to use to divide the world into tiles.
  *                       This parameter is ignored when accessing a tiled server.
- * @property {Ellipsoid} [ellipsoid] The ellipsoid.  If the tilingScheme is specified and used,
+ * @property {Ellipsoid} [ellipsoid=Ellipsoid.default] The ellipsoid.  If the tilingScheme is specified and used,
  *                    this parameter is ignored and the tiling scheme's ellipsoid is used instead. If neither
- *                    parameter is specified, the WGS84 ellipsoid is used.
+ *                    parameter is specified, the default ellipsoid is used.
  * @property {Credit|string} [credit] A credit for the data source, which is displayed on the canvas.  This parameter is ignored when accessing a tiled server.
  * @property {number} [tileWidth=256] The width of each tile in pixels.  This parameter is ignored when accessing a tiled server.
  * @property {number} [tileHeight=256] The height of each tile in pixels.  This parameter is ignored when accessing a tiled server.

package/Source/Scene/ArcGisMapService.js

@@ -4,7 +4,7 @@ import Resource from "../Core/Resource.js";
 
 let defaultTokenCredit;
 const defaultAccessToken =
-  "AAPKe5e6f1571ad74096bfacbdf289c5cdb687BUrehhWYnNo9tN4coC66_qhHDNruh3ygZV90buspkWdOqZUq6tb0kCb_dms9Ir";
+  "AAPTxy8BH1VEsoebNVZXo8HurEOF051kAEKlhkOhBEc9BmRcs5cw5x8CvIyg2oiotXJmY_GjoEUuuKAUvdWxusIx25kUy2AttkOs0FgosGzFJSsjafpWC40GiE5hiD0FLNSh3kxIW6w-5qqUQCEAwGY1t4yH7Fj-PjrkjPfSpw0_r2xF3lKLd0_LSmPWXCkYhqV1O67tWLNImHyr7SurJ92sA5YIG1pMJKEQU3Qv5k18p0g.AT1_sGbfSYDL";
 /**
  * Default options for accessing the ArcGIS image tile service.
  *

package/Source/Scene/Billboard.js

@@ -1104,8 +1104,7 @@ Billboard._updateClamping = function (collection, owner) {
     return;
   }
 
-  const globe = scene.globe;
-  const ellipsoid = defaultValue(globe?.ellipsoid, Ellipsoid.WGS84);
+  const ellipsoid = defaultValue(scene.ellipsoid, Ellipsoid.default);
 
   const mode = scene.frameState.mode;
 
@@ -1375,7 +1374,10 @@ Billboard._computeActualPosition = function (
   }
 
   Matrix4.multiplyByPoint(modelMatrix, position, tempCartesian3);
-  return SceneTransforms.computeActualWgs84Position(frameState, tempCartesian3);
+  return SceneTransforms.computeActualEllipsoidPosition(
+    frameState,
+    tempCartesian3
+  );
 };
 
 const scratchCartesian3 = new Cartesian3();
@@ -1397,7 +1399,7 @@ Billboard._computeScreenSpacePosition = function (
   );
 
   // World to window coordinates
-  const positionWC = SceneTransforms.wgs84WithEyeOffsetToWindowCoordinates(
+  const positionWC = SceneTransforms.worldWithEyeOffsetToWindowCoordinates(
     scene,
     positionWorld,
     eyeOffset,

package/Source/Scene/BingMapsImageryProvider.js

@@ -28,7 +28,7 @@ import ImageryProvider from "./ImageryProvider.js";
  * @property {string} [culture=''] The culture to use when requesting Bing Maps imagery. Not
  *        all cultures are supported. See {@link http://msdn.microsoft.com/en-us/library/hh441729.aspx}
  *        for information on the supported cultures.
- * @property {Ellipsoid} [ellipsoid] The ellipsoid.  If not specified, the WGS84 ellipsoid is used.
+ * @property {Ellipsoid} [ellipsoid=Ellipsoid.default] The ellipsoid.  If not specified, the default ellipsoid is used.
  * @property {TileDiscardPolicy} [tileDiscardPolicy] The policy that determines if a tile
  *        is invalid and should be discarded.  By default, a {@link DiscardEmptyTileImagePolicy}
  *        will be used, with the expectation that the Bing Maps server will send a zero-length response for missing tiles.

package/Source/Scene/Camera.js

@@ -1436,7 +1436,7 @@ const scratchHpr = new HeadingPitchRoll();
  * Sets the camera position, orientation and transform.
  *
  * @param {object} options Object with the following properties:
- * @param {Cartesian3|Rectangle} [options.destination] The final position of the camera in WGS84 (world) coordinates or a rectangle that would be visible from a top-down view.
+ * @param {Cartesian3|Rectangle} [options.destination] The final position of the camera in world coordinates or a rectangle that would be visible from a top-down view.
  * @param {HeadingPitchRollValues|DirectionUp} [options.orientation] An object that contains either direction and up properties or heading, pitch and roll properties. By default, the direction will point
  * towards the center of the frame in 3D and in the negative z direction in Columbus view. The up direction will point towards local north in 3D and in the positive
  * y direction in Columbus view. Orientation is not used in 2D when in infinite scrolling mode.
@@ -2343,9 +2343,12 @@ Camera.prototype.lookAt = function (target, offset) {
   }
   //>>includeEnd('debug');
 
+  const scene = this._scene;
+  const ellipsoid = defaultValue(scene.ellipsoid, Ellipsoid.default);
+
   const transform = Transforms.eastNorthUpToFixedFrame(
     target,
-    Ellipsoid.WGS84,
+    ellipsoid,
     scratchLookAtMatrix4
   );
   this.lookAtTransform(transform, offset);
@@ -2841,7 +2844,7 @@ Camera.prototype.getRectangleCameraCoordinates = function (rectangle, result) {
 
 const pickEllipsoid3DRay = new Ray();
 function pickEllipsoid3D(camera, windowPosition, ellipsoid, result) {
-  ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84);
+  ellipsoid = defaultValue(ellipsoid, Ellipsoid.default);
   const ray = camera.getPickRay(windowPosition, pickEllipsoid3DRay);
   const intersection = IntersectionTests.rayEllipsoid(ray, ellipsoid);
   if (!intersection) {
@@ -2893,7 +2896,7 @@ function pickMapColumbusView(camera, windowPosition, projection, result) {
  * Pick an ellipsoid or map.
  *
  * @param {Cartesian2} windowPosition The x and y coordinates of a pixel.
- * @param {Ellipsoid} [ellipsoid=Ellipsoid.WGS84] The ellipsoid to pick.
+ * @param {Ellipsoid} [ellipsoid=Ellipsoid.default] The ellipsoid to pick.
  * @param {Cartesian3} [result] The object onto which to store the result.
  * @returns {Cartesian3 | undefined} If the ellipsoid or map was picked,
  * returns the point on the surface of the ellipsoid or map in world
@@ -2902,7 +2905,7 @@ function pickMapColumbusView(camera, windowPosition, projection, result) {
  * @example
  * const canvas = viewer.scene.canvas;
  * const center = new Cesium.Cartesian2(canvas.clientWidth / 2.0, canvas.clientHeight / 2.0);
- * const ellipsoid = viewer.scene.globe.ellipsoid;
+ * const ellipsoid = viewer.scene.ellipsoid;
  * const result = viewer.camera.pickEllipsoid(center, ellipsoid);
  */
 Camera.prototype.pickEllipsoid = function (windowPosition, ellipsoid, result) {
@@ -2921,7 +2924,7 @@ Camera.prototype.pickEllipsoid = function (windowPosition, ellipsoid, result) {
     result = new Cartesian3();
   }
 
-  ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84);
+  ellipsoid = defaultValue(ellipsoid, Ellipsoid.default);
 
   if (this._mode === SceneMode.SCENE3D) {
     result = pickEllipsoid3D(this, windowPosition, ellipsoid, result);
@@ -3316,7 +3319,7 @@ Camera.prototype.completeFlight = function () {
  * Flies the camera from its current position to a new position.
  *
  * @param {object} options Object with the following properties:
- * @param {Cartesian3|Rectangle} options.destination The final position of the camera in WGS84 (world) coordinates or a rectangle that would be visible from a top-down view.
+ * @param {Cartesian3|Rectangle} options.destination The final position of the camera in world coordinates or a rectangle that would be visible from a top-down view.
  * @param {object} [options.orientation] An object that contains either direction and up properties or heading, pitch and roll properties. By default, the direction will point
  * towards the center of the frame in 3D and in the negative z direction in Columbus view. The up direction will point towards local north in 3D and in the positive
  * y direction in Columbus view.  Orientation is not used in 2D when in infinite scrolling mode.
@@ -3632,9 +3635,12 @@ Camera.prototype.flyToBoundingSphere = function (boundingSphere, options) {
     );
   }
 
+  const scene = this._scene;
+  const ellipsoid = defaultValue(scene.ellipsoid, Ellipsoid.default);
+
   const transform = Transforms.eastNorthUpToFixedFrame(
     boundingSphere.center,
-    Ellipsoid.WGS84,
+    ellipsoid,
     scratchflyToBoundingSphereTransform
   );
   Matrix4.multiplyByPoint(transform, position, position);
@@ -3814,13 +3820,13 @@ function addToResult(x, y, index, camera, ellipsoid, computedHorizonQuad) {
 /**
  * Computes the approximate visible rectangle on the ellipsoid.
  *
- * @param {Ellipsoid} [ellipsoid=Ellipsoid.WGS84] The ellipsoid that you want to know the visible region.
+ * @param {Ellipsoid} [ellipsoid=Ellipsoid.default] The ellipsoid that you want to know the visible region.
  * @param {Rectangle} [result] The rectangle in which to store the result
  *
  * @returns {Rectangle|undefined} The visible rectangle or undefined if the ellipsoid isn't visible at all.
  */
 Camera.prototype.computeViewRectangle = function (ellipsoid, result) {
-  ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84);
+  ellipsoid = defaultValue(ellipsoid, Ellipsoid.default);
   const cullingVolume = this.frustum.computeCullingVolume(
     this.positionWC,
     this.directionWC,

package/Source/Scene/Cesium3DTileset.js

@@ -3568,7 +3568,7 @@ Cesium3DTileset.prototype.getHeight = function (cartographic, scene) {
   Check.typeOf.object("scene", scene);
   //>>includeEnd('debug');
 
-  let ellipsoid = scene.globe?.ellipsoid;
+  let ellipsoid = scene.ellipsoid;
   if (!defined(ellipsoid)) {
     ellipsoid = Ellipsoid.WGS84;
   }

package/Source/Scene/ClippingPolygon.js

@@ -15,7 +15,7 @@ import Rectangle from "../Core/Rectangle.js";
  *
  * @param {object} options Object with the following properties:
  * @param {Cartesian3[]} options.positions A list of three or more Cartesian coordinates defining the outer ring of the clipping polygon.
- * @param {Ellipsoid} [options.ellipsoid=Ellipsoid.WGS84]
+ * @param {Ellipsoid} [options.ellipsoid=Ellipsoid.default]
  *
  * @example
  * const positions = Cesium.Cartesian3.fromRadiansArray([
@@ -46,7 +46,7 @@ function ClippingPolygon(options) {
   );
   //>>includeEnd('debug');
 
-  this._ellipsoid = defaultValue(options.ellipsoid, Ellipsoid.WGS84);
+  this._ellipsoid = defaultValue(options.ellipsoid, Ellipsoid.default);
   this._positions = [...options.positions];
 }
 

package/Source/Scene/ClippingPolygonCollection.js

@@ -737,7 +737,7 @@ const scratchRectangleIntersection = new Rectangle();
  * @private
  *
  * @param {object} tileBoundingVolume The volume to determine the intersection with the polygons.
- * @param {Ellipsoid} [ellipsoid=WGS84] The ellipsoid on which the bounding volumes are defined.
+ * @param {Ellipsoid} [ellipsoid=Ellipsoid.default] The ellipsoid on which the bounding volumes are defined.
  * @returns {Intersect} The intersection type: {@link Intersect.OUTSIDE} if the entire volume is not clipped, {@link Intersect.INSIDE}
  *                      if the entire volume should be clipped, and {@link Intersect.INTERSECTING} if the volume intersects the polygons and will partially clipped.
  */

package/Source/Scene/CreditDisplay.js

@@ -163,112 +163,102 @@ function styleLightboxContainer(that) {
   }
 }
 
-function addStyle(selector, styles) {
-  let style = `${selector} {`;
-  for (const attribute in styles) {
-    if (styles.hasOwnProperty(attribute)) {
-      style += `${attribute}: ${styles[attribute]}; `;
-    }
-  }
-  style += " }\n";
-  return style;
-}
-
 function appendCss(container) {
-  let style = "";
-  style += addStyle(".cesium-credit-lightbox-overlay", {
-    display: "none",
-    "z-index": "1", //must be at least 1 to draw over top other Cesium widgets
-    position: "absolute",
-    top: "0",
-    left: "0",
-    width: "100%",
-    height: "100%",
-    "background-color": "rgba(80, 80, 80, 0.8)",
-  });
-
-  style += addStyle(".cesium-credit-lightbox", {
-    "background-color": "#303336",
-    color: textColor,
-    position: "relative",
-    "min-height": `${lightboxHeight}px`,
-    margin: "auto",
-  });
-
-  style += addStyle(
-    ".cesium-credit-lightbox > ul > li a, .cesium-credit-lightbox > ul > li a:visited",
-    {
-      color: textColor,
-    }
-  );
-
-  style += addStyle(".cesium-credit-lightbox > ul > li a:hover", {
-    color: highlightColor,
-  });
-
-  style += addStyle(".cesium-credit-lightbox.cesium-credit-lightbox-expanded", {
-    border: "1px solid #444",
-    "border-radius": "5px",
-    "max-width": "370px",
-  });
-
-  style += addStyle(".cesium-credit-lightbox.cesium-credit-lightbox-mobile", {
-    height: "100%",
-    width: "100%",
-  });
-
-  style += addStyle(".cesium-credit-lightbox-title", {
-    padding: "20px 20px 0 20px",
-  });
-
-  style += addStyle(".cesium-credit-lightbox-close", {
-    "font-size": "18pt",
-    cursor: "pointer",
-    position: "absolute",
-    top: "0",
-    right: "6px",
-    color: textColor,
-  });
+  const style = /*css*/ `
+.cesium-credit-lightbox-overlay {
+  display: none;
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(80, 80, 80, 0.8);
+}
 
-  style += addStyle(".cesium-credit-lightbox-close:hover", {
-    color: highlightColor,
-  });
+.cesium-credit-lightbox {
+  background-color: #303336;
+  color: ${textColor};
+  position: relative;
+  min-height: ${lightboxHeight}px;
+  margin: auto;
+}
+.cesium-credit-lightbox > ul > li a,
+.cesium-credit-lightbox > ul > li a:visited,
+.cesium-credit-wrapper a,
+.cesium-credit-wrapper a:visited {
+  color: ${textColor};
+}
+.cesium-credit-lightbox > ul > li a:hover {
+  color: ${highlightColor};
+}
+.cesium-credit-lightbox.cesium-credit-lightbox-expanded {
+  border: 1px solid #444;
+  border-radius: 5px;
+  max-width: 370px;
+}
+.cesium-credit-lightbox.cesium-credit-lightbox-mobile {
+  height: 100%;
+  width: 100%;
+}
+.cesium-credit-lightbox-title {
+  padding: 20px 20px 0 20px;
+}
+.cesium-credit-lightbox-close {
+  font-size: 18pt;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 6px;
+  color: ${textColor};
+}
+.cesium-credit-lightbox-close:hover {
+  color: ${highlightColor};
+}
+.cesium-credit-lightbox > ul {
+  margin: 0;
+  padding: 12px 20px 12px 40px;
+  font-size: 13px;
+}
+.cesium-credit-lightbox > ul > li {
+  padding-bottom: 6px;
+}
+.cesium-credit-lightbox > ul > li * {
+  padding: 0;
+  margin: 0;
+}
 
-  style += addStyle(".cesium-credit-lightbox > ul", {
-    margin: "0",
-    padding: "12px 20px 12px 40px",
-    "font-size": "13px",
-  });
+.cesium-credit-expand-link {
+  padding-left: 5px;
+  cursor: pointer;
+  text-decoration: underline;
+  color: ${textColor};
+}
+.cesium-credit-expand-link:hover {
+  color: ${highlightColor};
+}
 
-  style += addStyle(".cesium-credit-lightbox > ul > li", {
-    "padding-bottom": "6px",
-  });
+.cesium-credit-text {
+  color: ${textColor};
+}
 
-  style += addStyle(".cesium-credit-lightbox > ul > li *", {
-    padding: "0",
-    margin: "0",
-  });
+.cesium-credit-delimiter {
+  padding: 0 5px;
+}
 
-  style += addStyle(".cesium-credit-expand-link", {
-    "padding-left": "5px",
-    cursor: "pointer",
-    "text-decoration": "underline",
-    color: textColor,
-  });
-  style += addStyle(".cesium-credit-expand-link:hover", {
-    color: highlightColor,
-  });
+.cesium-credit-textContainer *,
+.cesium-credit-logoContainer * {
+  display: inline;
+}
 
-  style += addStyle(".cesium-credit-text", {
-    color: textColor,
-  });
+.cesium-credit-textContainer a:hover {
+  color: ${highlightColor}
+}
 
-  style += addStyle(
-    ".cesium-credit-textContainer *, .cesium-credit-logoContainer *",
-    {
-      display: "inline",
-    }
-  );
+.cesium-credit-textContainer .cesium-credit-wrapper:first-of-type {
+  padding-left: 5px;
+}
+`;
 
   function getShadowRoot(container) {
     if (container.shadowRoot) {
@@ -287,16 +277,16 @@ function appendCss(container) {
     getShadowRoot(container),
     document.head
   );
-  const css = document.createElement("style");
-  css.innerHTML = style;
-  shadowRootOrDocumentHead.appendChild(css);
+  const styleElem = document.createElement("style");
+  styleElem.innerHTML = style;
+  shadowRootOrDocumentHead.appendChild(styleElem);
 }
 
 /**
  * The credit display is responsible for displaying credits on screen.
  *
  * @param {HTMLElement} container The HTML element where credits will be displayed
- * @param {string} [delimiter= ' • '] The string to separate text credits
+ * @param {string} [delimiter= '•'] The string to separate text credits
  * @param {HTMLElement} [viewport=document.body] The HTML element that will contain the credits popup
  *
  * @alias CreditDisplay
@@ -369,7 +359,7 @@ function CreditDisplay(container, delimiter, viewport) {
   appendCss(container);
   const cesiumCredit = Credit.clone(CreditDisplay.cesiumCredit);
 
-  this._delimiter = defaultValue(delimiter, " • ");
+  this._delimiter = defaultValue(delimiter, "•");
   this._screenContainer = screenContainer;
   this._cesiumCreditContainer = cesiumCreditContainer;
   this._lastViewportHeight = undefined;
@@ -634,7 +624,7 @@ function getDefaultCredit() {
     }
 
     defaultCredit = new Credit(
-      `<a href="https://cesium.com/" target="_blank"><img src="${logo}" title="Cesium ion"/></a>`,
+      `<a href="https://cesium.com/" target="_blank"><img src="${logo}" style="vertical-align: -7px" title="Cesium ion"/></a>`,
       true
     );
   }