Add a map-level debug flag for Cesium maps

src/css/Cesium3DTilesInspector.css

@@ -0,0 +1,261 @@
+/* CesiumJS v 1.139.1: CesiumInspector/CesiumInspector.css */
+
+.cesium-cesiumInspector {
+  border-radius: 5px;
+  transition: width ease-in-out 0.25s;
+  background: rgba(48, 51, 54, 0.8);
+  border: 1px solid #444;
+  color: #edffff;
+  display: inline-block;
+  position: relative;
+  padding: 4px 12px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.cesium-cesiumInspector-button {
+  text-align: center;
+  font-size: 11pt;
+}
+
+.cesium-cesiumInspector-visible .cesium-cesiumInspector-button {
+  border-bottom: 1px solid #aaa;
+  padding-bottom: 3px;
+}
+
+.cesium-cesiumInspector input:enabled,
+.cesium-cesiumInspector-button {
+  cursor: pointer;
+}
+
+.cesium-cesiumInspector-visible {
+  width: 185px;
+  height: auto;
+}
+
+.cesium-cesiumInspector-hidden {
+  width: 122px;
+  height: 17px;
+}
+
+.cesium-cesiumInspector-sectionContent {
+  max-height: 600px;
+}
+
+.cesium-cesiumInspector-section-collapsed
+  .cesium-cesiumInspector-sectionContent {
+  max-height: 0;
+  padding: 0 !important;
+  overflow: hidden;
+}
+
+.cesium-cesiumInspector-dropDown {
+  margin: 5px 0;
+  font-family: sans-serif;
+  font-size: 10pt;
+  width: 185px;
+}
+
+.cesium-cesiumInspector-frustumStatistics {
+  padding-left: 10px;
+  padding: 5px;
+  background-color: rgba(80, 80, 80, 0.75);
+}
+
+.cesium-cesiumInspector-pickButton {
+  background-color: rgba(0, 0, 0, 0.3);
+  border: 1px solid #444;
+  color: #edffff;
+  border-radius: 5px;
+  padding: 3px 7px;
+  cursor: pointer;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 0 auto;
+}
+
+.cesium-cesiumInspector-pickButton:focus {
+  outline: none;
+}
+
+.cesium-cesiumInspector-pickButton:active,
+.cesium-cesiumInspector-pickButtonHighlight {
+  color: #000; /* For text buttons */
+  background: #adf;
+  border-color: #fff;
+  box-shadow: 0 0 8px #fff;
+}
+
+.cesium-cesiumInspector-center {
+  text-align: center;
+}
+
+.cesium-cesiumInspector-sectionHeader {
+  font-weight: bold;
+  font-size: 10pt;
+  margin: 0;
+  cursor: pointer;
+}
+
+.cesium-cesiumInspector-pickSection {
+  border: 1px solid #aaa;
+  border-radius: 5px;
+  padding: 3px;
+  margin-bottom: 5px;
+}
+
+.cesium-cesiumInspector-sectionContent {
+  margin-bottom: 10px;
+  transition: max-height 0.25s;
+}
+
+.cesium-cesiumInspector-tileText {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #aaa;
+}
+
+.cesium-cesiumInspector-relativeText {
+  padding-top: 10px;
+}
+
+.cesium-cesiumInspector-sectionHeader::before {
+  margin-right: 5px;
+  content: "-";
+  width: 1ch;
+  display: inline-block;
+}
+
+.cesium-cesiumInspector-section-collapsed
+  .cesium-cesiumInspector-sectionHeader::before {
+  content: "+";
+}
+
+/* CesiumJS v 1.139.1: Cesium3DTilesInspector/Cesium3DTilesInspector.css */
+
+ul.cesium-cesiumInspector-statistics {
+  margin: 0;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+ul.cesium-cesiumInspector-statistics + ul.cesium-cesiumInspector-statistics {
+  border-top: 1px solid #aaa;
+}
+
+.cesium-cesiumInspector-slider {
+  margin-top: 5px;
+}
+
+.cesium-cesiumInspector-slider input[type="number"] {
+  text-align: left;
+  background-color: #222;
+  outline: none;
+  border: 1px solid #444;
+  color: #edffff;
+  width: 100px;
+  border-radius: 3px;
+  padding: 1px;
+  margin-left: 10px;
+  cursor: auto;
+}
+
+.cesium-cesiumInspector-slider input[type="number"]::-webkit-outer-spin-button,
+.cesium-cesiumInspector-slider input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.cesium-cesiumInspector-slider input[type="range"] {
+  margin-left: 5px;
+  vertical-align: middle;
+}
+
+.cesium-cesiumInspector-hide .cesium-cesiumInspector-styleEditor {
+  display: none;
+}
+
+.cesium-cesiumInspector-styleEditor {
+  padding: 10px;
+  border-radius: 5px;
+  background: rgba(48, 51, 54, 0.8);
+  border: 1px solid #444;
+}
+
+.cesium-cesiumInspector-styleEditor textarea {
+  width: 100%;
+  height: 300px;
+  background: transparent;
+  color: #edffff;
+  border: none;
+  padding: 0;
+  white-space: pre;
+  overflow-wrap: normal;
+  overflow-x: auto;
+}
+
+.cesium-3DTilesInspector {
+  width: 300px;
+  pointer-events: all;
+}
+
+.cesium-3DTilesInspector-statistics {
+  font-size: 11px;
+}
+
+.cesium-3DTilesInspector-disabledElementsInfo {
+  margin: 5px 0 0 0;
+  padding: 0 0 0 20px;
+  color: #eed202;
+}
+
+.cesium-3DTilesInspector div,
+.cesium-3DTilesInspector input[type="range"] {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cesium-cesiumInspector-error {
+  color: #ff9e9e;
+  overflow: auto;
+}
+
+.cesium-3DTilesInspector .cesium-cesiumInspector-section {
+  margin-top: 3px;
+}
+
+.cesium-3DTilesInspector
+  .cesium-cesiumInspector-sectionHeader
+  + .cesium-cesiumInspector-show {
+  border-top: 1px solid white;
+}
+
+input.cesium-cesiumInspector-url {
+  overflow: hidden;
+  white-space: nowrap;
+  overflow-x: scroll;
+  background-color: transparent;
+  color: white;
+  outline: none;
+  border: none;
+  height: 1em;
+  width: 100%;
+}
+
+.cesium-cesiumInspector .field-group {
+  display: table;
+}
+
+.cesium-cesiumInspector .field-group > label {
+  display: table-cell;
+  font-weight: bold;
+}
+
+.cesium-cesiumInspector .field-group > .field {
+  display: table-cell;
+  width: 100%;
+}

src/css/map-view.css

@@ -373,6 +373,57 @@
   height: 100%;
 }
 
+.cesium-debug-overlay,
+.cesium-performanceDisplay {
+  min-width: 7rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--map-border-radius-small);
+  background: rgba(19, 28, 43, 0.82);
+  box-shadow: var(--map-shadow-md);
+  color: #fff;
+  font-family: monospace;
+  font-size: 0.75rem;
+  line-height: 1.45;
+  white-space: pre-line;
+  pointer-events: none;
+  text-align: left;
+  border: none;
+  color: #fff;
+}
+
+.cesium-debug-overlay,
+.cesium-performanceDisplay-defaultContainer {
+  z-index: var(--map-z-index-base);
+  position: absolute;
+  bottom: 1rem;
+}
+
+.cesium-debug-overlay {
+  right: 1rem;
+}
+
+.cesium-performanceDisplay-defaultContainer {
+  right: 12rem;
+}
+
+.cesium-performanceDisplay {
+  min-width: 7rem;
+}
+
+.cesium-3d-tiles-inspector-container {
+  position: absolute;
+  top: 4rem;
+  right: 1rem;
+  z-index: var(--map-z-index-base);
+  max-height: calc(100% - 5rem);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.cesium-3d-tiles-inspector-container h3 {
+  line-height: unset;
+}
+
 /*****************************************************************************************
  *
  * Scale Bar

src/js/common/Utilities.js

@@ -134,6 +134,18 @@ define([], () => {
       return value.toExponential(2).toString();
     },
 
+    /**
+     * Format a finite number using a fixed number of decimal places.
+     * @param {number} value The number value to be formatted.
+     * @param {number} [digits=2] The number of decimal places to display.
+     * @param {string} [fallback=""] The value to return when `value` is not finite.
+     * @returns {string} A fixed-decimal number string or the fallback value.
+     * @since 0.0.0
+     */
+    formatFixedNumber(value, digits = 2, fallback = "") {
+      return Number.isFinite(value) ? value.toFixed(digits) : fallback;
+    },
+
     /**
      * Calculate the number of decimal places we should use based on the range of the data.
      * @param {number} range The range of data values.

src/js/models/maps/Map.js

@@ -106,6 +106,15 @@ define([
        * feedback section. showFeedback must be true for this to be shown.
        * @property {string} [globeBaseColor=null] - The base color of the globe
        * when no layer is shown.
+       * @property {boolean} [debug=false] - Enables Cesium's built-in map
+       * debugging aids, such as tile coordinate overlays, terrain wireframes,
+       * and a camera position overlay. This does not automatically enable
+       * layer-specific debug flags like 3D Tiles `debugShowGeometricError`;
+       * those can still be passed directly through a layer's
+       * `cesiumOptions`.
+       * @property {boolean} [show3DTilesInspector=false] - Whether or not to
+       * show Cesium's built-in 3D Tiles inspector widget for tileset
+       * debugging.
        * @property {MapConfig#ZoomPresets} [zoomPresets=null] - A predefined
        * list of locations with an enabled list of layer IDs to be shown the
        * zoom presets UI, or an object with a URL to fetch the presets from.
@@ -238,6 +247,10 @@ define([
        * feedback section.
        * @property {string} [globeBaseColor=null] - The base color of the globe
        * when no layer is shown.
+       * @property {boolean} [debug=false] - Enables Cesium's built-in map
+       * debugging aids and overlays for development.
+       * @property {boolean} [show3DTilesInspector=false] - Whether or not to
+       * show Cesium's built-in 3D Tiles inspector widget.
        * @property {ZoomPresets} [zoomPresets=null] - A Backbone.Collection of a
        * predefined list of locations with an enabled list of layer IDs to be
        * shown the zoom presets UI. Requires `showViewfinder` to be true as this
@@ -275,6 +288,8 @@ define([
           showFeedback: false,
           feedbackText: null,
           globeBaseColor: null,
+          debug: false,
+          show3DTilesInspector: false,
           zoomPresets: null,
         };
       },