@cesium/engine 9.2.0 → 10.1.0

package/Source/Scene/Billboard.js

@@ -21,6 +21,7 @@ import HorizontalOrigin from "./HorizontalOrigin.js";
 import SceneMode from "./SceneMode.js";
 import SceneTransforms from "./SceneTransforms.js";
 import VerticalOrigin from "./VerticalOrigin.js";
+import SplitDirection from "./SplitDirection.js";
 
 /**
  * @typedef {object} Billboard.ConstructorOptions
@@ -49,6 +50,7 @@ import VerticalOrigin from "./VerticalOrigin.js";
  * @property {BoundingRectangle} [imageSubRegion] A {@link BoundingRectangle} Specifying the sub-region of the image to use for the billboard, rather than the entire image.
  * @property {DistanceDisplayCondition} [distanceDisplayCondition] A {@link DistanceDisplayCondition} Specifying the distance from the camera at which this billboard will be displayed.
  * @property {number} [disableDepthTestDistance] A number specifying the distance from the camera at which to disable the depth test to, for example, prevent clipping against terrain.
+ * @property {SplitDirection} [splitDirection] A {@link SplitDirection} Specifying the split property of the billboard.
  */
 
 /**
@@ -250,6 +252,11 @@ function Billboard(options, billboardCollection) {
   this._outlineWidth = defaultValue(options.outlineWidth, 0.0);
 
   this._updateClamping();
+
+  this._splitDirection = defaultValue(
+    options.splitDirection,
+    SplitDirection.NONE
+  );
 }
 
 const SHOW_INDEX = (Billboard.SHOW_INDEX = 0);
@@ -270,7 +277,8 @@ const DISTANCE_DISPLAY_CONDITION = (Billboard.DISTANCE_DISPLAY_CONDITION = 14);
 const DISABLE_DEPTH_DISTANCE = (Billboard.DISABLE_DEPTH_DISTANCE = 15);
 Billboard.TEXTURE_COORDINATE_BOUNDS = 16;
 const SDF_INDEX = (Billboard.SDF_INDEX = 17);
-Billboard.NUMBER_OF_PROPERTIES = 18;
+const SPLIT_DIRECTION_INDEX = (Billboard.SPLIT_DIRECTION_INDEX = 18);
+Billboard.NUMBER_OF_PROPERTIES = 19;
 
 function makeDirty(billboard, propertyChanged) {
   const billboardCollection = billboard._billboardCollection;
@@ -1072,6 +1080,24 @@ Object.defineProperties(Billboard.prototype, {
       }
     },
   },
+
+  /**
+   * Gets or sets the {@link SplitDirection} of this billboard.
+   * @memberof Billboard.prototype
+   * @type {SplitDirection}
+   * @default {@link SplitDirection.NONE}
+   */
+  splitDirection: {
+    get: function () {
+      return this._splitDirection;
+    },
+    set: function (value) {
+      if (this._splitDirection !== value) {
+        this._splitDirection = value;
+        makeDirty(this, SPLIT_DIRECTION_INDEX);
+      }
+    },
+  },
 });
 
 Billboard.prototype.getPickId = function (context) {
@@ -1104,8 +1130,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 +1400,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 +1425,7 @@ Billboard._computeScreenSpacePosition = function (
   );
 
   // World to window coordinates
-  const positionWC = SceneTransforms.wgs84WithEyeOffsetToWindowCoordinates(
+  const positionWC = SceneTransforms.worldWithEyeOffsetToWindowCoordinates(
     scene,
     positionWorld,
     eyeOffset,
@@ -1565,7 +1593,8 @@ Billboard.prototype.equals = function (other) {
         this._distanceDisplayCondition,
         other._distanceDisplayCondition
       ) &&
-      this._disableDepthTestDistance === other._disableDepthTestDistance)
+      this._disableDepthTestDistance === other._disableDepthTestDistance &&
+      this._splitDirection === other._splitDirection)
   );
 };
 

package/Source/Scene/BillboardCollection.js

@@ -54,6 +54,7 @@ const DISTANCE_DISPLAY_CONDITION_INDEX = Billboard.DISTANCE_DISPLAY_CONDITION;
 const DISABLE_DEPTH_DISTANCE = Billboard.DISABLE_DEPTH_DISTANCE;
 const TEXTURE_COORDINATE_BOUNDS = Billboard.TEXTURE_COORDINATE_BOUNDS;
 const SDF_INDEX = Billboard.SDF_INDEX;
+const SPLIT_DIRECTION_INDEX = Billboard.SPLIT_DIRECTION_INDEX;
 const NUMBER_OF_PROPERTIES = Billboard.NUMBER_OF_PROPERTIES;
 
 let attributeLocations;
@@ -71,6 +72,7 @@ const attributeLocationsBatched = {
   textureCoordinateBoundsOrLabelTranslate: 9,
   a_batchId: 10,
   sdf: 11,
+  splitDirection: 12,
 };
 
 const attributeLocationsInstanced = {
@@ -87,6 +89,7 @@ const attributeLocationsInstanced = {
   textureCoordinateBoundsOrLabelTranslate: 10,
   a_batchId: 11,
   sdf: 12,
+  splitDirection: 13,
 };
 
 /**
@@ -311,6 +314,7 @@ function BillboardCollection(options) {
     BufferUsage.STATIC_DRAW, // PIXEL_OFFSET_SCALE_BY_DISTANCE_INDEX
     BufferUsage.STATIC_DRAW, // DISTANCE_DISPLAY_CONDITION_INDEX
     BufferUsage.STATIC_DRAW, // TEXTURE_COORDINATE_BOUNDS
+    BufferUsage.STATIC_DRAW, // SPLIT_DIRECTION_INDEX
   ];
 
   this._highlightColor = Color.clone(Color.WHITE); // Only used by Vector3DTilePoints
@@ -777,6 +781,12 @@ function createVAF(
       componentDatatype: ComponentDatatype.FLOAT,
       usage: buffersUsage[TEXTURE_COORDINATE_BOUNDS],
     },
+    {
+      index: attributeLocations.splitDirection,
+      componentsPerAttribute: 1,
+      componentDatatype: ComponentDatatype.FLOAT,
+      usage: buffersUsage[SPLIT_DIRECTION_INDEX],
+    },
   ];
 
   // Instancing requires one non-instanced attribute.
@@ -1586,6 +1596,34 @@ function writeSDF(
   }
 }
 
+function writeSplitDirection(
+  billboardCollection,
+  frameState,
+  textureAtlasCoordinates,
+  vafWriters,
+  billboard
+) {
+  const writer = vafWriters[attributeLocations.splitDirection];
+  let direction = 0.0;
+
+  const split = billboard.splitDirection;
+  if (defined(split)) {
+    direction = split;
+  }
+
+  let i;
+  if (billboardCollection._instanced) {
+    i = billboard._index;
+    writer(i, direction);
+  } else {
+    i = billboard._index * 4;
+    writer(i + 0, direction);
+    writer(i + 1, direction);
+    writer(i + 2, direction);
+    writer(i + 3, direction);
+  }
+}
+
 function writeBillboard(
   billboardCollection,
   frameState,
@@ -1670,6 +1708,13 @@ function writeBillboard(
     vafWriters,
     billboard
   );
+  writeSplitDirection(
+    billboardCollection,
+    frameState,
+    textureAtlasCoordinates,
+    vafWriters,
+    billboard
+  );
 }
 
 function recomputeActualPositions(
@@ -1981,6 +2026,10 @@ BillboardCollection.prototype.update = function (frameState) {
       writers.push(writeSDF);
     }
 
+    if (properties[SPLIT_DIRECTION_INDEX]) {
+      writers.push(writeSplitDirection);
+    }
+
     const numWriters = writers.length;
     vafWriters = this._vaf.writers;
 

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.
@@ -120,7 +120,16 @@ function metadataSuccess(data, imageryProviderBuilder) {
   imageryProviderBuilder.maximumLevel = resource.zoomMax - 1;
   imageryProviderBuilder.imageUrlSubdomains = resource.imageUrlSubdomains;
   imageryProviderBuilder.imageUrlTemplate = resource.imageUrl;
-  imageryProviderBuilder.attributionList = resource.imageryProviders;
+
+  let validProviders = resource.imageryProviders;
+  if (defined(resource.imageryProviders)) {
+    // prevent issues with the imagery API from crashing the viewer when the expected properties are not there
+    // See https://github.com/CesiumGS/cesium/issues/12088
+    validProviders = resource.imageryProviders.filter((provider) =>
+      provider.coverageAreas?.some((area) => defined(area.bbox))
+    );
+  }
+  imageryProviderBuilder.attributionList = validProviders;
 }
 
 function metadataFailure(metadataResource, error, provider) {

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
     );
   }