cesiumjs-anywidget 0.6.0__py3-none-any.whl → 0.7.0__py3-none-any.whl

cesiumjs_anywidget/index.js

@@ -23,6 +23,15 @@ function error(prefix, ...args) {
 
 // src/cesiumjs_anywidget/js/viewer-init.js
 var PREFIX = "ViewerInit";
+var CONSTANTS = {
+  // CesiumJS CDN
+  CESIUM_CDN_VERSION: "1.137",
+  // Interaction Timing
+  TIMELINE_SCRUB_DEBOUNCE_MS: 500,
+  // GeoJSON Defaults
+  GEOJSON_STROKE_WIDTH: 3,
+  GEOJSON_FILL_ALPHA: 0.5
+};
 async function loadCesiumJS() {
   log(PREFIX, "Loading CesiumJS...");
   if (window.Cesium) {
@@ -30,7 +39,7 @@ async function loadCesiumJS() {
     return window.Cesium;
   }
   const script = document.createElement("script");
-  script.src = "https://cesium.com/downloads/cesiumjs/releases/1.135/Build/Cesium/Cesium.js";
+  script.src = `https://cesium.com/downloads/cesiumjs/releases/${CONSTANTS.CESIUM_CDN_VERSION}/Build/Cesium/Cesium.js`;
   log(PREFIX, "Loading CesiumJS from CDN...");
   await new Promise((resolve, reject) => {
     script.onload = () => {
@@ -79,14 +88,23 @@ function createViewer(container, model, Cesium) {
     shadows: false,
     shouldAnimate: false
   };
+  const showGlobe = model.get("show_globe");
+  if (showGlobe === false) {
+    viewerOptions.globe = false;
+    log(PREFIX, "Globe disabled (typically for photorealistic tiles)");
+  }
   log(PREFIX, "Viewer options:", viewerOptions);
-  if (model.get("enable_terrain")) {
+  if (model.get("enable_terrain") && showGlobe !== false) {
     viewerOptions.terrain = Cesium.Terrain.fromWorldTerrain();
     log(PREFIX, "Terrain enabled");
   }
   const viewer = new Cesium.Viewer(container, viewerOptions);
-  viewer.scene.globe.enableLighting = model.get("enable_lighting");
-  log(PREFIX, "Viewer created, lighting:", model.get("enable_lighting"));
+  if (viewer.scene.globe) {
+    viewer.scene.globe.enableLighting = model.get("enable_lighting");
+    log(PREFIX, "Viewer created, lighting:", model.get("enable_lighting"));
+  } else {
+    log(PREFIX, "Viewer created without globe");
+  }
   return viewer;
 }
 function setupViewerListeners(viewer, model, container, Cesium) {
@@ -98,8 +116,7 @@ function setupViewerListeners(viewer, model, container, Cesium) {
       log(PREFIX, "Skipping enable_terrain change - destroyed");
       return;
     }
-    if (!viewer)
-      return;
+    if (!viewer) return;
     log(PREFIX, "Terrain setting changed:", model.get("enable_terrain"));
     if (model.get("enable_terrain")) {
       viewer.scene.setTerrain(Cesium.Terrain.fromWorldTerrain());
@@ -108,46 +125,35 @@ function setupViewerListeners(viewer, model, container, Cesium) {
     }
   });
   model.on("change:enable_lighting", () => {
-    if (isDestroyed)
-      return;
-    if (!viewer)
-      return;
+    if (isDestroyed) return;
+    if (!viewer) return;
     log(PREFIX, "Lighting setting changed:", model.get("enable_lighting"));
     viewer.scene.globe.enableLighting = model.get("enable_lighting");
   });
   model.on("change:height", () => {
-    if (isDestroyed)
-      return;
-    if (!viewer)
-      return;
+    if (isDestroyed) return;
+    if (!viewer) return;
     log(PREFIX, "Height changed:", model.get("height"));
     container.style.height = model.get("height");
     viewer.resize();
   });
   model.on("change:show_timeline", () => {
-    if (isDestroyed)
-      return;
-    if (!viewer || !viewer.timeline)
-      return;
+    if (isDestroyed) return;
+    if (!viewer || !viewer.timeline) return;
     log(PREFIX, "Timeline visibility changed:", model.get("show_timeline"));
     viewer.timeline.container.style.visibility = model.get("show_timeline") ? "visible" : "hidden";
   });
   model.on("change:show_animation", () => {
-    if (isDestroyed)
-      return;
-    if (!viewer || !viewer.animation)
-      return;
+    if (isDestroyed) return;
+    if (!viewer || !viewer.animation) return;
     log(PREFIX, "Animation visibility changed:", model.get("show_animation"));
     viewer.animation.container.style.visibility = model.get("show_animation") ? "visible" : "hidden";
   });
   model.on("change:atmosphere_settings", () => {
-    if (isDestroyed)
-      return;
-    if (!viewer || !viewer.scene || !viewer.scene.atmosphere)
-      return;
+    if (isDestroyed) return;
+    if (!viewer || !viewer.scene || !viewer.scene.atmosphere) return;
     const settings = model.get("atmosphere_settings");
-    if (!settings || Object.keys(settings).length === 0)
-      return;
+    if (!settings || Object.keys(settings).length === 0) return;
     log(PREFIX, "Atmosphere settings changed:", settings);
     const atmosphere = viewer.scene.atmosphere;
     if (settings.brightnessShift !== void 0) {
@@ -187,13 +193,10 @@ function setupViewerListeners(viewer, model, container, Cesium) {
     }
   });
   model.on("change:sky_atmosphere_settings", () => {
-    if (isDestroyed)
-      return;
-    if (!viewer || !viewer.scene || !viewer.scene.skyAtmosphere)
-      return;
+    if (isDestroyed) return;
+    if (!viewer || !viewer.scene || !viewer.scene.skyAtmosphere) return;
     const settings = model.get("sky_atmosphere_settings");
-    if (!settings || Object.keys(settings).length === 0)
-      return;
+    if (!settings || Object.keys(settings).length === 0) return;
     log(PREFIX, "Sky atmosphere settings changed:", settings);
     const skyAtmosphere = viewer.scene.skyAtmosphere;
     if (settings.show !== void 0) {
@@ -239,13 +242,10 @@ function setupViewerListeners(viewer, model, container, Cesium) {
     }
   });
   model.on("change:skybox_settings", () => {
-    if (isDestroyed)
-      return;
-    if (!viewer || !viewer.scene || !viewer.scene.skyBox)
-      return;
+    if (isDestroyed) return;
+    if (!viewer || !viewer.scene || !viewer.scene.skyBox) return;
     const settings = model.get("skybox_settings");
-    if (!settings || Object.keys(settings).length === 0)
-      return;
+    if (!settings || Object.keys(settings).length === 0) return;
     log(PREFIX, "SkyBox settings changed:", settings);
     const skyBox = viewer.scene.skyBox;
     if (settings.show !== void 0) {
@@ -270,6 +270,184 @@ function setupViewerListeners(viewer, model, container, Cesium) {
       }
     }
   });
+  const initialTime = model.get("current_time");
+  if (initialTime && viewer.clock) {
+    try {
+      const julianDate = Cesium.JulianDate.fromIso8601(initialTime);
+      viewer.clock.currentTime = julianDate;
+      viewer.clock.startTime = julianDate.clone();
+      viewer.clock.stopTime = Cesium.JulianDate.addDays(julianDate.clone(), 1, new Cesium.JulianDate());
+      log(PREFIX, "Clock initialized with time:", initialTime);
+    } catch (err) {
+      warn(PREFIX, "Failed to parse initial time:", initialTime, err);
+    }
+  }
+  const initialMultiplier = model.get("clock_multiplier");
+  if (initialMultiplier !== void 0 && viewer.clock) {
+    viewer.clock.multiplier = initialMultiplier;
+    log(PREFIX, "Clock multiplier initialized:", initialMultiplier);
+  }
+  const initialAnimate = model.get("should_animate");
+  if (initialAnimate !== void 0 && viewer.clock) {
+    viewer.clock.shouldAnimate = initialAnimate;
+    log(PREFIX, "Clock animation initialized:", initialAnimate);
+  }
+  model.on("change:current_time", () => {
+    if (isDestroyed) return;
+    if (!viewer || !viewer.clock) return;
+    const timeStr = model.get("current_time");
+    if (!timeStr) return;
+    try {
+      const julianDate = Cesium.JulianDate.fromIso8601(timeStr);
+      viewer.clock.currentTime = julianDate;
+      log(PREFIX, "Clock time updated:", timeStr);
+    } catch (err) {
+      warn(PREFIX, "Failed to parse time:", timeStr, err);
+    }
+  });
+  model.on("change:clock_multiplier", () => {
+    if (isDestroyed) return;
+    if (!viewer || !viewer.clock) return;
+    const multiplier = model.get("clock_multiplier");
+    if (multiplier !== void 0) {
+      viewer.clock.multiplier = multiplier;
+      log(PREFIX, "Clock multiplier updated:", multiplier);
+    }
+  });
+  model.on("change:should_animate", () => {
+    if (isDestroyed) return;
+    if (!viewer || !viewer.clock) return;
+    const shouldAnimate = model.get("should_animate");
+    if (shouldAnimate !== void 0) {
+      viewer.clock.shouldAnimate = shouldAnimate;
+      log(PREFIX, "Clock animation updated:", shouldAnimate);
+    }
+  });
+  model.on("change:clock_command", () => {
+    if (isDestroyed) return;
+    if (!viewer || !viewer.clock) return;
+    const command = model.get("clock_command");
+    if (!command || !command.command) return;
+    log(PREFIX, "Clock command received:", command.command);
+    switch (command.command) {
+      case "setTime":
+        if (command.time) {
+          try {
+            const julianDate = Cesium.JulianDate.fromIso8601(command.time);
+            viewer.clock.currentTime = julianDate;
+            log(PREFIX, "Clock time set via command:", command.time);
+          } catch (err) {
+            warn(PREFIX, "Failed to parse time in command:", command.time, err);
+          }
+        }
+        break;
+      case "play":
+        viewer.clock.shouldAnimate = true;
+        log(PREFIX, "Clock animation started");
+        break;
+      case "pause":
+        viewer.clock.shouldAnimate = false;
+        log(PREFIX, "Clock animation paused");
+        break;
+      case "setMultiplier":
+        if (command.multiplier !== void 0) {
+          viewer.clock.multiplier = command.multiplier;
+          log(PREFIX, "Clock multiplier set via command:", command.multiplier);
+        }
+        break;
+      case "setRange":
+        if (command.startTime && command.stopTime) {
+          try {
+            const startDate = Cesium.JulianDate.fromIso8601(command.startTime);
+            const stopDate = Cesium.JulianDate.fromIso8601(command.stopTime);
+            viewer.clock.startTime = startDate;
+            viewer.clock.stopTime = stopDate;
+            log(PREFIX, "Clock range set via command:", command.startTime, "to", command.stopTime);
+          } catch (err) {
+            warn(PREFIX, "Failed to parse time range in command:", err);
+          }
+        }
+        break;
+      default:
+        warn(PREFIX, "Unknown clock command:", command.command);
+    }
+  });
+  model.on("change:czml_entity_update", () => {
+    if (isDestroyed) return;
+    if (!viewer || !viewer.dataSources) return;
+    const update = model.get("czml_entity_update");
+    if (!update || !update.entity_id || !update.properties) return;
+    log(PREFIX, "CZML entity update:", update);
+    let entity = null;
+    for (let i = 0; i < viewer.dataSources.length; i++) {
+      const dataSource = viewer.dataSources.get(i);
+      if (dataSource instanceof Cesium.CzmlDataSource) {
+        entity = dataSource.entities.getById(update.entity_id);
+        if (entity) break;
+      }
+    }
+    if (!entity) {
+      warn(PREFIX, "Entity not found:", update.entity_id);
+      return;
+    }
+    const props = update.properties;
+    if (props.orientation && !props.position) {
+      const heading = Cesium.Math.toRadians(props.orientation.heading ?? 0);
+      const pitch = Cesium.Math.toRadians(props.orientation.pitch ?? 0);
+      const roll = Cesium.Math.toRadians(props.orientation.roll ?? 0);
+      const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
+      if (entity.position) {
+        const position = entity.position.getValue(viewer.clock.currentTime);
+        if (position) {
+          const orientation = Cesium.Transforms.headingPitchRollQuaternion(
+            position,
+            hpr
+          );
+          entity.orientation = new Cesium.ConstantProperty(orientation);
+          log(PREFIX, "Updated entity orientation:", props.orientation);
+        } else {
+          warn(PREFIX, "Cannot update orientation - no valid position");
+        }
+      } else {
+        warn(PREFIX, "Cannot update orientation - entity has no position");
+      }
+    }
+    if (props.position) {
+      const lat = Cesium.Math.toRadians(props.position.latitude);
+      const lon = Cesium.Math.toRadians(props.position.longitude);
+      const alt = props.position.altitude ?? 0;
+      const position = Cesium.Cartesian3.fromRadians(lon, lat, alt);
+      entity.position = new Cesium.ConstantPositionProperty(position);
+      log(PREFIX, "Updated entity position:", props.position);
+      if (props.orientation && entity.orientation) {
+        const heading = Cesium.Math.toRadians(props.orientation.heading ?? 0);
+        const pitch = Cesium.Math.toRadians(props.orientation.pitch ?? 0);
+        const roll = Cesium.Math.toRadians(props.orientation.roll ?? 0);
+        const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
+        const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
+        entity.orientation = new Cesium.ConstantProperty(orientation);
+        log(PREFIX, "Updated entity orientation after position change:", props.orientation);
+      }
+    }
+    for (const [key, value] of Object.entries(props)) {
+      if (key !== "orientation" && key !== "position" && entity[key] !== void 0) {
+        try {
+          if (typeof value === "object" && value !== null) {
+            for (const [subKey, subValue] of Object.entries(value)) {
+              if (entity[key][subKey] !== void 0) {
+                entity[key][subKey] = new Cesium.ConstantProperty(subValue);
+              }
+            }
+          } else {
+            entity[key] = new Cesium.ConstantProperty(value);
+          }
+          log(PREFIX, `Updated entity ${key}:`, value);
+        } catch (err) {
+          warn(PREFIX, `Failed to update property ${key}:`, err);
+        }
+      }
+    }
+  });
   function getCameraState() {
     if (!viewer || !viewer.camera || !viewer.camera.positionCartographic) {
       warn(PREFIX, "Cannot get camera state - viewer or camera not available");
@@ -291,8 +469,7 @@ function setupViewerListeners(viewer, model, container, Cesium) {
     }
   }
   function getClockState() {
-    if (!viewer || !viewer.clock)
-      return null;
+    if (!viewer || !viewer.clock) return null;
     try {
       return {
         current_time: Cesium.JulianDate.toIso8601(viewer.clock.currentTime),
@@ -304,6 +481,61 @@ function setupViewerListeners(viewer, model, container, Cesium) {
       return null;
     }
   }
+  function getPickedPosition(click) {
+    if (!viewer || !viewer.camera || !viewer.scene || !viewer.scene.globe) {
+      return null;
+    }
+    try {
+      const ray = viewer.camera.getPickRay(click.position);
+      if (!ray) return null;
+      const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+      if (!cartesian) return null;
+      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+      return {
+        latitude: Cesium.Math.toDegrees(cartographic.latitude),
+        longitude: Cesium.Math.toDegrees(cartographic.longitude),
+        altitude: cartographic.height
+      };
+    } catch (error2) {
+      warn(PREFIX, "Error picking position:", error2);
+      return null;
+    }
+  }
+  function getPickedEntity(click) {
+    if (!viewer || !viewer.scene || !viewer.clock) {
+      return null;
+    }
+    try {
+      const pickedObject = viewer.scene.pick(click.position);
+      if (!Cesium.defined(pickedObject) || !Cesium.defined(pickedObject.id)) {
+        return null;
+      }
+      const entity = pickedObject.id;
+      const entityData = {
+        id: entity.id,
+        name: entity.name || null
+      };
+      if (entity.properties) {
+        const props = {};
+        const propertyNames = entity.properties.propertyNames;
+        if (propertyNames && propertyNames.length > 0) {
+          propertyNames.forEach((name) => {
+            try {
+              props[name] = entity.properties[name].getValue(viewer.clock.currentTime);
+            } catch (e) {
+            }
+          });
+          if (Object.keys(props).length > 0) {
+            entityData.properties = props;
+          }
+        }
+      }
+      return entityData;
+    } catch (error2) {
+      warn(PREFIX, "Error picking entity:", error2);
+      return null;
+    }
+  }
   function sendInteractionEvent(type, additionalData = {}) {
     if (isDestroyed) {
       log(PREFIX, "Skipping interaction event - destroyed:", type);
@@ -331,88 +563,37 @@ function setupViewerListeners(viewer, model, container, Cesium) {
   }
   const camera = viewer.camera;
   camera.moveEnd.addEventListener(() => {
-    if (isDestroyed || !viewer)
-      return;
+    if (isDestroyed || !viewer) return;
     sendInteractionEvent("camera_move");
   });
   const scene = viewer.scene;
   const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
   handler.setInputAction((click) => {
-    if (isDestroyed || !viewer || !viewer.scene || !viewer.camera)
-      return;
+    if (isDestroyed || !viewer || !viewer.scene || !viewer.camera) return;
     const pickedData = {};
-    try {
-      const ray = viewer.camera.getPickRay(click.position);
-      if (ray && viewer.scene.globe) {
-        const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
-        if (cartesian) {
-          const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-          pickedData.picked_position = {
-            latitude: Cesium.Math.toDegrees(cartographic.latitude),
-            longitude: Cesium.Math.toDegrees(cartographic.longitude),
-            altitude: cartographic.height
-          };
-        }
-      }
-    } catch (error2) {
-      warn(PREFIX, "Error picking position:", error2);
+    const pickedPosition = getPickedPosition(click);
+    if (pickedPosition) {
+      pickedData.picked_position = pickedPosition;
     }
-    try {
-      const pickedObject = viewer.scene.pick(click.position);
-      if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
-        const entity = pickedObject.id;
-        pickedData.picked_entity = {
-          id: entity.id,
-          name: entity.name || null
-        };
-        if (entity.properties) {
-          const props = {};
-          const propertyNames = entity.properties.propertyNames;
-          if (propertyNames && propertyNames.length > 0) {
-            propertyNames.forEach((name) => {
-              try {
-                props[name] = entity.properties[name].getValue(viewer.clock.currentTime);
-              } catch (e) {
-              }
-            });
-            if (Object.keys(props).length > 0) {
-              pickedData.picked_entity.properties = props;
-            }
-          }
-        }
-      }
-    } catch (error2) {
-      warn(PREFIX, "Error picking entity:", error2);
+    const pickedEntity = getPickedEntity(click);
+    if (pickedEntity) {
+      pickedData.picked_entity = pickedEntity;
     }
     sendInteractionEvent("left_click", pickedData);
   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
   handler.setInputAction((click) => {
-    if (isDestroyed || !viewer || !viewer.scene || !viewer.camera)
-      return;
+    if (isDestroyed || !viewer || !viewer.scene || !viewer.camera) return;
     const pickedData = {};
-    try {
-      const ray = viewer.camera.getPickRay(click.position);
-      if (ray && viewer.scene.globe) {
-        const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
-        if (cartesian) {
-          const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-          pickedData.picked_position = {
-            latitude: Cesium.Math.toDegrees(cartographic.latitude),
-            longitude: Cesium.Math.toDegrees(cartographic.longitude),
-            altitude: cartographic.height
-          };
-        }
-      }
-    } catch (error2) {
-      warn(PREFIX, "Error picking position:", error2);
+    const pickedPosition = getPickedPosition(click);
+    if (pickedPosition) {
+      pickedData.picked_position = pickedPosition;
     }
     sendInteractionEvent("right_click", pickedData);
   }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
   if (viewer.timeline) {
     let timelineScrubbing = false;
     viewer.clock.onTick.addEventListener(() => {
-      if (isDestroyed)
-        return;
+      if (isDestroyed) return;
       if (viewer.timeline) {
         if (scrubTimeout) {
           clearTimeout(scrubTimeout);
@@ -423,12 +604,26 @@ function setupViewerListeners(viewer, model, container, Cesium) {
             timelineScrubbing = false;
             sendInteractionEvent("timeline_scrub");
           }
-        }, 500);
+        }, CONSTANTS.TIMELINE_SCRUB_DEBOUNCE_MS);
         timelineScrubbing = true;
       }
     });
   }
   log(PREFIX, "Viewer listeners setup complete");
+  return {
+    destroy: () => {
+      log(PREFIX, "Destroying viewer listeners");
+      isDestroyed = true;
+      if (scrubTimeout) {
+        clearTimeout(scrubTimeout);
+        scrubTimeout = null;
+      }
+      if (handler) {
+        handler.destroy();
+      }
+      log(PREFIX, "Viewer listeners destroyed");
+    }
+  };
 }
 function setupGeoJSONLoader(viewer, model, Cesium) {
   log(PREFIX, "Setting up GeoJSON loader");
@@ -457,10 +652,10 @@ function setupGeoJSONLoader(viewer, model, Cesium) {
           log(PREFIX, "Loading GeoJSON dataset...");
           const dataSource = await Cesium.GeoJsonDataSource.load(geojsonData, {
             stroke: Cesium.Color.HOTPINK,
-            fill: Cesium.Color.PINK.withAlpha(0.5),
-            strokeWidth: 3
+            fill: Cesium.Color.PINK.withAlpha(CONSTANTS.GEOJSON_FILL_ALPHA),
+            strokeWidth: CONSTANTS.GEOJSON_STROKE_WIDTH
           });
-          if (viewer && viewer.dataSources) {
+          if (!isDestroyed && viewer && viewer.dataSources) {
             viewer.dataSources.add(dataSource);
             geojsonDataSources.push(dataSource);
             log(PREFIX, "GeoJSON dataset loaded successfully");
@@ -498,6 +693,7 @@ function setupCZMLLoader(viewer, model, Cesium) {
   log(PREFIX, "Setting up CZML loader");
   let czmlDataSources = [];
   let isDestroyed = false;
+  viewer._czmlDataSources = czmlDataSources;
   async function loadCZMLData(flyToData = true) {
     if (isDestroyed) {
       log(PREFIX, "Skipping czml_data load - destroyed");
@@ -521,7 +717,7 @@ function setupCZMLLoader(viewer, model, Cesium) {
           try {
             log(PREFIX, "Loading CZML document with", czmlData.length, "packets...");
             const dataSource = await Cesium.CzmlDataSource.load(czmlData);
-            if (viewer && viewer.dataSources) {
+            if (!isDestroyed && viewer && viewer.dataSources) {
               viewer.dataSources.add(dataSource);
               czmlDataSources.push(dataSource);
               log(PREFIX, "CZML document loaded successfully, entities:", dataSource.entities.values.length);
@@ -558,20 +754,109 @@ function setupCZMLLoader(viewer, model, Cesium) {
     }
   };
 }
+function setupPhotorealisticTiles(viewer, model, Cesium) {
+  log(PREFIX, "Setting up Photorealistic 3D Tiles loader");
+  let photorealisticTileset = null;
+  let isDestroyed = false;
+  async function updatePhotorealisticTiles() {
+    if (isDestroyed) {
+      log(PREFIX, "Skipping photorealistic tiles update - destroyed");
+      return;
+    }
+    if (!viewer || !viewer.scene || !viewer.scene.primitives) {
+      warn(PREFIX, "Cannot update photorealistic tiles - viewer not available");
+      return;
+    }
+    const enabled = model.get("enable_photorealistic_tiles");
+    log(PREFIX, "Photorealistic tiles enabled:", enabled);
+    if (photorealisticTileset) {
+      log(PREFIX, "Removing existing photorealistic tileset");
+      viewer.scene.primitives.remove(photorealisticTileset);
+      photorealisticTileset = null;
+    }
+    if (enabled) {
+      try {
+        log(PREFIX, "Creating Google Photorealistic 3D Tileset...");
+        photorealisticTileset = await Cesium.createGooglePhotorealistic3DTileset();
+        if (viewer && viewer.scene && viewer.scene.primitives && !isDestroyed) {
+          viewer.scene.primitives.add(photorealisticTileset);
+          log(PREFIX, "Google Photorealistic 3D Tileset loaded successfully");
+        } else {
+          log(PREFIX, "Viewer destroyed during tileset load, skipping add");
+          photorealisticTileset = null;
+        }
+      } catch (err) {
+        error(PREFIX, "Failed to load Google Photorealistic 3D Tileset:", err);
+        photorealisticTileset = null;
+      }
+    }
+  }
+  model.on("change:enable_photorealistic_tiles", () => updatePhotorealisticTiles());
+  if (model.get("enable_photorealistic_tiles")) {
+    log(PREFIX, "Loading initial photorealistic tiles...");
+    updatePhotorealisticTiles();
+  }
+  return {
+    destroy: () => {
+      log(PREFIX, "Destroying photorealistic tiles loader");
+      isDestroyed = true;
+      if (photorealisticTileset && viewer && viewer.scene && viewer.scene.primitives) {
+        viewer.scene.primitives.remove(photorealisticTileset);
+      }
+      photorealisticTileset = null;
+    }
+  };
+}
 
 // src/cesiumjs_anywidget/js/camera-sync.js
 var PREFIX2 = "CameraSync";
 function initializeCameraSync(viewer, model) {
   const Cesium = window.Cesium;
   let cameraUpdateTimeout = null;
+  let modelUpdateTimeout = null;
   let isDestroyed = false;
   let syncEnabled = model.get("camera_sync_enabled") || false;
   log(PREFIX2, "Initializing camera synchronization, sync enabled:", syncEnabled);
-  model.on("change:camera_sync_enabled", () => {
+  if (!Cesium) {
+    error(PREFIX2, "Cesium global not available");
+    throw new Error("Cesium is not loaded");
+  }
+  const handleSyncEnabledChange = () => {
     syncEnabled = model.get("camera_sync_enabled");
     log(PREFIX2, "Camera sync enabled changed:", syncEnabled);
-  });
-  function updateCameraFromModel() {
+  };
+  model.on("change:camera_sync_enabled", handleSyncEnabledChange);
+  function validateCameraParameters(lat, lon, alt) {
+    if (typeof lat !== "number" || isNaN(lat) || lat < -90 || lat > 90) {
+      warn(PREFIX2, "Invalid latitude:", lat);
+      return false;
+    }
+    if (typeof lon !== "number" || isNaN(lon)) {
+      warn(PREFIX2, "Invalid longitude:", lon);
+      return false;
+    }
+    if (typeof alt !== "number" || isNaN(alt)) {
+      warn(PREFIX2, "Invalid altitude:", alt);
+      return false;
+    }
+    return true;
+  }
+  function validateOrientationAngles(heading, pitch, roll) {
+    if (typeof heading !== "number" || isNaN(heading)) {
+      warn(PREFIX2, "Invalid heading:", heading);
+      return false;
+    }
+    if (typeof pitch !== "number" || isNaN(pitch)) {
+      warn(PREFIX2, "Invalid pitch:", pitch);
+      return false;
+    }
+    if (typeof roll !== "number" || isNaN(roll)) {
+      warn(PREFIX2, "Invalid roll:", roll);
+      return false;
+    }
+    return true;
+  }
+  function updateCameraFromModelImmediate() {
     if (isDestroyed) {
       log(PREFIX2, "Skipping updateCameraFromModel - module destroyed");
       return;
@@ -583,14 +868,38 @@ function initializeCameraSync(viewer, model) {
     const lat = model.get("latitude");
     const lon = model.get("longitude");
     const alt = model.get("altitude");
-    const heading = Cesium.Math.toRadians(model.get("heading"));
-    const pitch = Cesium.Math.toRadians(model.get("pitch"));
-    const roll = Cesium.Math.toRadians(model.get("roll"));
+    const heading = model.get("heading");
+    const pitch = model.get("pitch");
+    const roll = model.get("roll");
+    if (!validateCameraParameters(lat, lon, alt)) {
+      return;
+    }
+    if (!validateOrientationAngles(heading, pitch, roll)) {
+      return;
+    }
     log(PREFIX2, "Updating camera from model:", { lat, lon, alt });
-    viewer.camera.setView({
-      destination: Cesium.Cartesian3.fromDegrees(lon, lat, alt),
-      orientation: { heading, pitch, roll }
-    });
+    try {
+      viewer.camera.setView({
+        destination: Cesium.Cartesian3.fromDegrees(lon, lat, alt),
+        orientation: {
+          heading: Cesium.Math.toRadians(heading),
+          pitch: Cesium.Math.toRadians(pitch),
+          roll: Cesium.Math.toRadians(roll)
+        }
+      });
+    } catch (err) {
+      error(PREFIX2, "Error updating camera from model:", err);
+    }
+  }
+  function updateCameraFromModel() {
+    if (modelUpdateTimeout) {
+      clearTimeout(modelUpdateTimeout);
+    }
+    modelUpdateTimeout = setTimeout(() => {
+      if (!isDestroyed) {
+        updateCameraFromModelImmediate();
+      }
+    }, 50);
   }
   function updateModelFromCamera() {
     if (isDestroyed) {
@@ -639,7 +948,7 @@ function initializeCameraSync(viewer, model) {
       }
     }, 500);
   }
-  updateCameraFromModel();
+  updateCameraFromModelImmediate();
   viewer.camera.changed.addEventListener(handleCameraChanged);
   model.on("change:latitude", updateCameraFromModel);
   model.on("change:longitude", updateCameraFromModel);
@@ -647,19 +956,22 @@ function initializeCameraSync(viewer, model) {
   model.on("change:heading", updateCameraFromModel);
   model.on("change:pitch", updateCameraFromModel);
   model.on("change:roll", updateCameraFromModel);
-  model.on("change:camera_command", () => {
+  const handleCameraCommand = () => {
     if (isDestroyed) {
       log(PREFIX2, "Skipping camera_command - module destroyed");
       return;
     }
     const command = model.get("camera_command");
-    if (!command || !command.command || !command.timestamp)
-      return;
+    if (!command || !command.command || !command.timestamp) return;
     const cmd = command.command;
     log(PREFIX2, "Executing camera command:", cmd, command);
     try {
       switch (cmd) {
         case "flyTo":
+          if (!validateCameraParameters(command.latitude, command.longitude, command.altitude)) {
+            error(PREFIX2, "Invalid parameters for flyTo command");
+            return;
+          }
           viewer.camera.flyTo({
             destination: Cesium.Cartesian3.fromDegrees(
               command.longitude,
@@ -675,6 +987,10 @@ function initializeCameraSync(viewer, model) {
           });
           break;
         case "setView":
+          if (!validateCameraParameters(command.latitude, command.longitude, command.altitude)) {
+            error(PREFIX2, "Invalid parameters for setView command");
+            return;
+          }
           viewer.camera.setView({
             destination: Cesium.Cartesian3.fromDegrees(
               command.longitude,
@@ -687,8 +1003,35 @@ function initializeCameraSync(viewer, model) {
               roll: Cesium.Math.toRadians(command.roll || 0)
             }
           });
+          if (command.fov !== void 0 || command.aspectRatio !== void 0 || command.near !== void 0 || command.far !== void 0) {
+            const frustum = viewer.camera.frustum;
+            if (frustum instanceof Cesium.PerspectiveFrustum) {
+              if (command.fov !== void 0) {
+                frustum.fov = Cesium.Math.toRadians(command.fov);
+              }
+              if (command.aspectRatio !== void 0) {
+                frustum.aspectRatio = command.aspectRatio;
+              }
+              if (command.near !== void 0) {
+                frustum.near = command.near;
+              }
+              if (command.far !== void 0) {
+                frustum.far = command.far;
+              }
+              log(PREFIX2, "Applied frustum parameters:", {
+                fov: command.fov,
+                aspectRatio: command.aspectRatio,
+                near: command.near,
+                far: command.far
+              });
+            }
+          }
           break;
         case "lookAt":
+          if (!validateCameraParameters(command.targetLatitude, command.targetLongitude, command.targetAltitude || 0)) {
+            error(PREFIX2, "Invalid parameters for lookAt command");
+            return;
+          }
           const target = Cesium.Cartesian3.fromDegrees(
             command.targetLongitude,
             command.targetLatitude,
@@ -744,9 +1087,11 @@ function initializeCameraSync(viewer, model) {
     } catch (err) {
       error(PREFIX2, `Error executing camera command ${cmd}:`, err);
     }
-  });
+  };
+  model.on("change:camera_command", handleCameraCommand);
   return {
     updateCameraFromModel,
+    updateCameraFromModelImmediate,
     updateModelFromCamera,
     destroy: () => {
       log(PREFIX2, "Destroying camera sync module");
@@ -755,7 +1100,21 @@ function initializeCameraSync(viewer, model) {
         clearTimeout(cameraUpdateTimeout);
         cameraUpdateTimeout = null;
       }
-      viewer.camera.changed.removeEventListener(handleCameraChanged);
+      if (modelUpdateTimeout) {
+        clearTimeout(modelUpdateTimeout);
+        modelUpdateTimeout = null;
+      }
+      if (viewer && viewer.camera) {
+        viewer.camera.changed.removeEventListener(handleCameraChanged);
+      }
+      model.off("change:camera_sync_enabled", handleSyncEnabledChange);
+      model.off("change:latitude", updateCameraFromModel);
+      model.off("change:longitude", updateCameraFromModel);
+      model.off("change:altitude", updateCameraFromModel);
+      model.off("change:heading", updateCameraFromModel);
+      model.off("change:pitch", updateCameraFromModel);
+      model.off("change:roll", updateCameraFromModel);
+      model.off("change:camera_command", handleCameraCommand);
       log(PREFIX2, "Camera sync module destroyed");
     }
   };
@@ -763,6 +1122,210 @@ function initializeCameraSync(viewer, model) {
 
 // src/cesiumjs_anywidget/js/measurement-tools.js
 var PREFIX3 = "Measurements";
+var CONSTANTS2 = {
+  // UI Dimensions
+  MARKER_SIZE: 10,
+  MARKER_SIZE_HOVER: 12,
+  MARKER_SIZE_SELECTED: 15,
+  MARKER_OUTLINE_WIDTH: 2,
+  MARKER_OUTLINE_WIDTH_HOVER: 3,
+  MARKER_OUTLINE_WIDTH_SELECTED: 4,
+  // Panel Dimensions
+  PANEL_MIN_WIDTH: 250,
+  PANEL_MIN_HEIGHT: 200,
+  PANEL_MAX_WIDTH: 600,
+  PANEL_MAX_HEIGHT: 800,
+  // Measurement Thresholds
+  MAX_ADD_POINT_DISTANCE_METERS: 50,
+  AREA_UNIT_THRESHOLD: 1e6,
+  // m² to km² conversion
+  DISTANCE_UNIT_THRESHOLD: 1e3,
+  // m to km conversion
+  // Visual
+  POLYLINE_WIDTH: 3,
+  LABEL_PIXEL_OFFSET_Y: -20,
+  POLYGON_ALPHA: 0.3,
+  POLYGON_OUTLINE_WIDTH: 2
+};
+function getColors() {
+  const Cesium = window.Cesium;
+  return {
+    distance: { main: Cesium.Color.RED, button: "#e74c3c" },
+    "multi-distance": { main: Cesium.Color.BLUE, button: "#3498db" },
+    height: { main: Cesium.Color.GREEN, button: "#2ecc71" },
+    area: { main: Cesium.Color.ORANGE, button: "#e67e22" }
+  };
+}
+var TYPE_LABELS = {
+  distance: "Distance",
+  "multi-distance": "Multi-Distance",
+  height: "Height",
+  area: "Area"
+};
+function calculateGeodesicArea(positions) {
+  const Cesium = window.Cesium;
+  const polygonHierarchy = new Cesium.PolygonHierarchy(positions);
+  const geometry = Cesium.PolygonGeometry.createGeometry(
+    new Cesium.PolygonGeometry({
+      polygonHierarchy,
+      perPositionHeight: false,
+      arcType: Cesium.ArcType.GEODESIC
+    })
+  );
+  if (!geometry) return 0;
+  const positionsArray = geometry.attributes.position.values;
+  const indices = geometry.indices;
+  let area = 0;
+  for (let i = 0; i < indices.length; i += 3) {
+    const i0 = indices[i] * 3;
+    const i1 = indices[i + 1] * 3;
+    const i2 = indices[i + 2] * 3;
+    const v0 = new Cesium.Cartesian3(positionsArray[i0], positionsArray[i0 + 1], positionsArray[i0 + 2]);
+    const v1 = new Cesium.Cartesian3(positionsArray[i1], positionsArray[i1 + 1], positionsArray[i1 + 2]);
+    const v2 = new Cesium.Cartesian3(positionsArray[i2], positionsArray[i2 + 1], positionsArray[i2 + 2]);
+    const edge1 = Cesium.Cartesian3.subtract(v1, v0, new Cesium.Cartesian3());
+    const edge2 = Cesium.Cartesian3.subtract(v2, v0, new Cesium.Cartesian3());
+    const crossProduct = Cesium.Cartesian3.cross(edge1, edge2, new Cesium.Cartesian3());
+    area += Cesium.Cartesian3.magnitude(crossProduct) / 2;
+  }
+  return area;
+}
+function calculateCentroid(positions) {
+  const Cesium = window.Cesium;
+  let centroidLon = 0, centroidLat = 0;
+  positions.forEach((pos) => {
+    const carto = Cesium.Cartographic.fromCartesian(pos);
+    centroidLon += carto.longitude;
+    centroidLat += carto.latitude;
+  });
+  return new Cesium.Cartographic(centroidLon / positions.length, centroidLat / positions.length);
+}
+function formatValue(value, isArea = false) {
+  if (isArea) {
+    return value >= CONSTANTS2.AREA_UNIT_THRESHOLD ? `${(value / CONSTANTS2.AREA_UNIT_THRESHOLD).toFixed(2)} km\xB2` : `${value.toFixed(2)} m\xB2`;
+  }
+  return value >= CONSTANTS2.DISTANCE_UNIT_THRESHOLD ? `${(value / CONSTANTS2.DISTANCE_UNIT_THRESHOLD).toFixed(2)} km` : `${value.toFixed(2)} m`;
+}
+function createStyledButton(text, baseColor, activeColor = "#e74c3c") {
+  const btn = document.createElement("button");
+  btn.textContent = text;
+  btn.dataset.baseColor = baseColor;
+  btn.dataset.activeColor = activeColor;
+  btn.style.cssText = `
+    padding: 8px 12px;
+    background: ${baseColor};
+    color: white;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 12px;
+    transition: background 0.2s;
+  `;
+  return btn;
+}
+function makeDraggable(panel, handle) {
+  let isDragging = false;
+  let startX, startY, initialLeft, initialTop;
+  handle.style.cursor = "move";
+  const handleMouseDown = (e) => {
+    if (e.button !== 0 || e.target.tagName === "BUTTON" || e.target.tagName === "INPUT") return;
+    isDragging = true;
+    startX = e.clientX;
+    startY = e.clientY;
+    const rect = panel.getBoundingClientRect();
+    const parentRect = panel.parentElement.getBoundingClientRect();
+    initialLeft = rect.left - parentRect.left;
+    initialTop = rect.top - parentRect.top;
+    panel.style.right = "auto";
+    panel.style.bottom = "auto";
+    panel.style.left = initialLeft + "px";
+    panel.style.top = initialTop + "px";
+    e.preventDefault();
+  };
+  const handleMouseMove = (e) => {
+    if (!isDragging) return;
+    const deltaX = e.clientX - startX;
+    const deltaY = e.clientY - startY;
+    const parentRect = panel.parentElement.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+    let newLeft = initialLeft + deltaX;
+    let newTop = initialTop + deltaY;
+    newLeft = Math.max(0, Math.min(newLeft, parentRect.width - panelRect.width));
+    newTop = Math.max(0, Math.min(newTop, parentRect.height - panelRect.height));
+    panel.style.left = newLeft + "px";
+    panel.style.top = newTop + "px";
+  };
+  const handleMouseUp = () => {
+    isDragging = false;
+  };
+  handle.addEventListener("mousedown", handleMouseDown);
+  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mouseup", handleMouseUp);
+  return () => {
+    handle.removeEventListener("mousedown", handleMouseDown);
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+  };
+}
+function makeResizable(panel, minWidth = CONSTANTS2.PANEL_MIN_WIDTH, minHeight = CONSTANTS2.PANEL_MIN_HEIGHT, maxWidth = CONSTANTS2.PANEL_MAX_WIDTH, maxHeight = CONSTANTS2.PANEL_MAX_HEIGHT) {
+  const resizeHandle = document.createElement("div");
+  resizeHandle.style.cssText = `
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    width: 20px;
+    height: 20px;
+    cursor: nwse-resize;
+    z-index: 1002;
+  `;
+  resizeHandle.innerHTML = `
+    <svg width="20" height="20" viewBox="0 0 20 20" style="pointer-events: none;">
+      <path d="M 20 0 L 20 20 L 0 20" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
+      <path d="M 14 20 L 20 14" stroke="rgba(255,255,255,0.5)" stroke-width="2"/>
+      <path d="M 8 20 L 20 8" stroke="rgba(255,255,255,0.5)" stroke-width="2"/>
+    </svg>
+  `;
+  panel.appendChild(resizeHandle);
+  let isResizing = false;
+  let startX, startY, startWidth, startHeight;
+  const handleMouseDown = (e) => {
+    isResizing = true;
+    startX = e.clientX;
+    startY = e.clientY;
+    const rect = panel.getBoundingClientRect();
+    startWidth = rect.width;
+    startHeight = rect.height;
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleMouseMove = (e) => {
+    if (!isResizing) return;
+    const deltaX = e.clientX - startX;
+    const deltaY = e.clientY - startY;
+    let newWidth = startWidth + deltaX;
+    let newHeight = startHeight + deltaY;
+    newWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
+    newHeight = Math.max(minHeight, Math.min(newHeight, maxHeight));
+    panel.style.width = newWidth + "px";
+    panel.style.height = newHeight + "px";
+    panel.style.maxWidth = "none";
+    panel.style.maxHeight = "none";
+  };
+  const handleMouseUp = () => {
+    isResizing = false;
+  };
+  resizeHandle.addEventListener("mousedown", handleMouseDown);
+  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mouseup", handleMouseUp);
+  return () => {
+    resizeHandle.removeEventListener("mousedown", handleMouseDown);
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+    if (resizeHandle.parentNode) {
+      resizeHandle.remove();
+    }
+  };
+}
 function initializeMeasurementTools(viewer, model, container) {
   log(PREFIX3, "Initializing measurement tools");
   const Cesium = window.Cesium;
@@ -784,121 +1347,106 @@ function initializeMeasurementTools(viewer, model, container) {
     selectedEntity: null,
     dragging: false,
     measurementIndex: null,
-    pointIndex: null
+    pointIndex: null,
+    addPointMode: false
   };
-  let completedMeasurements = [];
+  const cleanupFunctions = [];
   const toolbarDiv = document.createElement("div");
   toolbarDiv.style.cssText = `
     position: absolute;
     top: 10px;
     left: 10px;
     background: rgba(42, 42, 42, 0.9);
-    padding: 10px;
+    padding: 0;
     border-radius: 5px;
     z-index: 1000;
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 0;
   `;
   container.appendChild(toolbarDiv);
-  function createMeasurementButton(text, mode) {
-    const btn = document.createElement("button");
-    btn.textContent = text;
-    btn.style.cssText = `
-      padding: 8px 12px;
-      background: #3498db;
-      color: white;
-      border: none;
-      border-radius: 3px;
-      cursor: pointer;
-      font-size: 12px;
-      transition: background 0.2s;
-    `;
+  const toolbarHeader = document.createElement("div");
+  toolbarHeader.style.cssText = `
+    padding: 8px 10px;
+    background: rgba(60, 60, 60, 0.95);
+    border-radius: 5px 5px 0 0;
+    font-family: sans-serif;
+    font-size: 11px;
+    color: #aaa;
+    border-bottom: 1px solid #555;
+    user-select: none;
+  `;
+  toolbarHeader.textContent = "\u22EE\u22EE Measurement Tools";
+  toolbarDiv.appendChild(toolbarHeader);
+  const toolbarContent = document.createElement("div");
+  toolbarContent.style.cssText = `
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  `;
+  toolbarDiv.appendChild(toolbarContent);
+  cleanupFunctions.push(makeDraggable(toolbarDiv, toolbarHeader));
+  function setupButtonHover(btn, hoverColor, getActiveState = () => false) {
+    const baseColor = btn.dataset.baseColor;
     btn.onmouseover = () => {
-      btn.style.background = "#2980b9";
+      btn.style.background = hoverColor;
     };
     btn.onmouseout = () => {
-      btn.style.background = measurementState.mode === mode ? "#e74c3c" : "#3498db";
+      btn.style.background = getActiveState() ? btn.dataset.activeColor : baseColor;
     };
+  }
+  function createMeasurementButton(text, mode) {
+    const btn = createStyledButton(text, "#3498db");
+    setupButtonHover(btn, "#2980b9", () => measurementState.mode === mode);
     btn.onclick = () => {
-      if (measurementState.mode === mode) {
-        model.set("measurement_mode", "");
-        model.save_changes();
-      } else {
-        model.set("measurement_mode", mode);
-        model.save_changes();
-      }
+      model.set("measurement_mode", measurementState.mode === mode ? "" : mode);
+      model.save_changes();
     };
     return btn;
   }
-  const distanceBtn = createMeasurementButton("\u{1F4CF} Distance", "distance");
-  const multiDistanceBtn = createMeasurementButton("\u{1F4D0} Multi Distance", "multi-distance");
-  const heightBtn = createMeasurementButton("\u{1F4CA} Height", "height");
-  const areaBtn = createMeasurementButton("\u2B1B Area", "area");
-  const clearBtn = document.createElement("button");
-  clearBtn.textContent = "\u{1F5D1}\uFE0F Clear";
-  clearBtn.style.cssText = `
-    padding: 8px 12px;
-    background: #e74c3c;
-    color: white;
-    border: none;
-    border-radius: 3px;
-    cursor: pointer;
-    font-size: 12px;
-    transition: background 0.2s;
-  `;
-  clearBtn.onmouseover = () => {
-    clearBtn.style.background = "#c0392b";
-  };
-  clearBtn.onmouseout = () => {
-    clearBtn.style.background = "#e74c3c";
+  const modeButtons = {
+    distance: createMeasurementButton("\u{1F4CF} Distance", "distance"),
+    "multi-distance": createMeasurementButton("\u{1F4D0} Multi Distance", "multi-distance"),
+    height: createMeasurementButton("\u{1F4CA} Height", "height"),
+    area: createMeasurementButton("\u2B1B Area", "area")
   };
+  const clearBtn = createStyledButton("\u{1F5D1}\uFE0F Clear", "#e74c3c");
+  setupButtonHover(clearBtn, "#c0392b");
   clearBtn.onclick = () => {
     clearAllMeasurements();
     model.set("measurement_mode", "");
     model.set("measurement_results", []);
     model.save_changes();
   };
-  toolbarDiv.appendChild(distanceBtn);
-  toolbarDiv.appendChild(multiDistanceBtn);
-  toolbarDiv.appendChild(heightBtn);
-  toolbarDiv.appendChild(areaBtn);
-  toolbarDiv.appendChild(clearBtn);
-  const editBtn = document.createElement("button");
-  editBtn.textContent = "\u270F\uFE0F Edit Points";
-  editBtn.style.cssText = `
-    padding: 8px 12px;
-    background: #9b59b6;
-    color: white;
-    border: none;
-    border-radius: 3px;
-    cursor: pointer;
-    font-size: 12px;
-    transition: background 0.2s;
-  `;
-  editBtn.onmouseover = () => {
-    editBtn.style.background = "#8e44ad";
-  };
-  editBtn.onmouseout = () => {
-    editBtn.style.background = editState.enabled ? "#e74c3c" : "#9b59b6";
-  };
+  Object.values(modeButtons).forEach((btn) => toolbarContent.appendChild(btn));
+  toolbarContent.appendChild(clearBtn);
+  const editBtn = createStyledButton("\u270F\uFE0F Edit Points", "#9b59b6");
+  setupButtonHover(editBtn, "#8e44ad", () => editState.enabled);
   editBtn.onclick = () => {
     editState.enabled = !editState.enabled;
     editBtn.style.background = editState.enabled ? "#e74c3c" : "#9b59b6";
-    if (editState.enabled) {
-      enableEditMode();
-    } else {
-      disableEditMode();
+    editState.enabled ? enableEditMode() : disableEditMode();
+  };
+  toolbarContent.appendChild(editBtn);
+  const addPointBtn = createStyledButton("\u2795 Add Point", "#16a085");
+  addPointBtn.style.display = "none";
+  setupButtonHover(addPointBtn, "#138d75", () => editState.addPointMode);
+  addPointBtn.onclick = () => {
+    editState.addPointMode = !editState.addPointMode;
+    addPointBtn.style.background = editState.addPointMode ? "#e74c3c" : "#16a085";
+    if (editState.addPointMode) {
+      deselectPoint();
     }
   };
-  toolbarDiv.appendChild(editBtn);
+  toolbarContent.appendChild(addPointBtn);
   const editorPanel = document.createElement("div");
   editorPanel.style.cssText = `
     position: absolute;
     top: 10px;
     right: 10px;
     background: rgba(42, 42, 42, 0.95);
-    padding: 15px;
+    padding: 0;
     border-radius: 5px;
     z-index: 1000;
     display: none;
@@ -907,49 +1455,108 @@ function initializeMeasurementTools(viewer, model, container) {
     font-size: 12px;
     min-width: 250px;
   `;
+  const editorHeader = document.createElement("div");
+  editorHeader.style.cssText = `
+    padding: 10px 15px;
+    background: rgba(60, 60, 60, 0.95);
+    border-radius: 5px 5px 0 0;
+    font-weight: bold;
+    border-bottom: 1px solid #555;
+    user-select: none;
+    cursor: move;
+  `;
+  editorHeader.textContent = "\u22EE\u22EE Edit Point";
+  editorPanel.appendChild(editorHeader);
+  const editorContent = document.createElement("div");
+  editorContent.style.cssText = `padding: 15px;`;
+  editorPanel.appendChild(editorContent);
   container.appendChild(editorPanel);
+  cleanupFunctions.push(makeDraggable(editorPanel, editorHeader));
   const measurementsListPanel = document.createElement("div");
   measurementsListPanel.style.cssText = `
     position: absolute;
     bottom: 10px;
     right: 10px;
     background: rgba(42, 42, 42, 0.95);
-    padding: 15px;
+    padding: 0;
     border-radius: 5px;
     z-index: 1000;
     color: white;
     font-family: sans-serif;
     font-size: 12px;
-    max-width: 350px;
-    max-height: 400px;
-    overflow-y: auto;
+    width: 350px;
+    height: 400px;
+    min-width: 250px;
+    min-height: 200px;
+    max-width: 600px;
+    max-height: 800px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    overflow: hidden;
   `;
-  measurementsListPanel.innerHTML = `
-    <div style="font-weight: bold; border-bottom: 1px solid #555; padding-bottom: 8px; margin-bottom: 10px;">
-      Measurements
-    </div>
-    <div id="measurements-list-content"></div>
+  const measurementsHeader = document.createElement("div");
+  measurementsHeader.style.cssText = `
+    padding: 10px 15px;
+    background: rgba(60, 60, 60, 0.95);
+    border-radius: 5px 5px 0 0;
+    font-weight: bold;
+    border-bottom: 1px solid #555;
+    user-select: none;
+    cursor: move;
+    flex-shrink: 0;
+    box-sizing: border-box;
   `;
+  measurementsHeader.textContent = "\u22EE\u22EE Measurements";
+  measurementsListPanel.appendChild(measurementsHeader);
+  const measurementsContent = document.createElement("div");
+  measurementsContent.className = "measurement-panel-scrollable";
+  measurementsContent.style.cssText = `
+    padding: 10px 15px 25px 15px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: 100%;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+  `;
+  measurementsContent.innerHTML = `<div id="measurements-list-content" style="width: 100%; box-sizing: border-box;"></div>`;
+  measurementsListPanel.appendChild(measurementsContent);
   container.appendChild(measurementsListPanel);
+  cleanupFunctions.push(makeDraggable(measurementsListPanel, measurementsHeader));
+  cleanupFunctions.push(makeResizable(measurementsListPanel));
   function getPosition(screenPosition) {
-    const pickedObject = viewer.scene.pick(screenPosition);
-    if (viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)) {
-      const cartesian = viewer.scene.pickPosition(screenPosition);
-      if (Cesium.defined(cartesian)) {
-        return cartesian;
+    try {
+      const pickedObject = viewer.scene.pick(screenPosition);
+      if (viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)) {
+        const cartesian = viewer.scene.pickPosition(screenPosition);
+        if (Cesium.defined(cartesian)) {
+          return cartesian;
+        }
       }
+      const ray = viewer.camera.getPickRay(screenPosition);
+      if (!ray) {
+        warn(PREFIX3, "Unable to get pick ray from camera");
+        return null;
+      }
+      return viewer.scene.globe.pick(ray, viewer.scene);
+    } catch (err) {
+      error(PREFIX3, "Error getting position:", err);
+      return null;
     }
-    const ray = viewer.camera.getPickRay(screenPosition);
-    return viewer.scene.globe.pick(ray, viewer.scene);
   }
   function addMarker(position, color = Cesium.Color.RED) {
     const marker = viewer.entities.add({
       position,
       point: {
-        pixelSize: 10,
+        pixelSize: CONSTANTS2.MARKER_SIZE,
         color,
         outlineColor: Cesium.Color.WHITE,
-        outlineWidth: 2,
+        outlineWidth: CONSTANTS2.MARKER_OUTLINE_WIDTH,
         disableDepthTestDistance: Number.POSITIVE_INFINITY
       }
     });
@@ -966,7 +1573,7 @@ function initializeMeasurementTools(viewer, model, container) {
         style: Cesium.LabelStyle.FILL_AND_OUTLINE,
         outlineWidth: 2,
         outlineColor: Cesium.Color.BLACK,
-        pixelOffset: new Cesium.Cartesian2(0, -20),
+        pixelOffset: new Cesium.Cartesian2(0, CONSTANTS2.LABEL_PIXEL_OFFSET_Y),
         showBackground: true,
         backgroundColor: Cesium.Color.fromAlpha(Cesium.Color.BLACK, 0.7),
         disableDepthTestDistance: Number.POSITIVE_INFINITY
@@ -989,6 +1596,27 @@ function initializeMeasurementTools(viewer, model, container) {
       alt: cartographic.height
     };
   }
+  function updateOrCreateMeasurement(type, value, points) {
+    const results = model.get("measurement_results") || [];
+    const lastResult = results[results.length - 1];
+    const isActiveType = lastResult && lastResult.type === type && lastResult.isActive;
+    let newResults;
+    if (isActiveType) {
+      newResults = [...results];
+      newResults[newResults.length - 1] = { ...lastResult, value, points };
+    } else {
+      const count = results.filter((r) => r.type === type).length + 1;
+      newResults = [...results, {
+        type,
+        value,
+        points,
+        isActive: type === "multi-distance" || type === "area",
+        name: `${TYPE_LABELS[type]} ${count}`
+      }];
+    }
+    model.set("measurement_results", newResults);
+    model.save_changes();
+  }
   function clearAllMeasurements() {
     log(PREFIX3, "Clearing all measurements");
     measurementState.entities.forEach((e) => viewer.entities.remove(e));
@@ -1025,19 +1653,24 @@ function initializeMeasurementTools(viewer, model, container) {
       model.set("measurement_mode", "");
       model.save_changes();
     }
+    addPointBtn.style.display = "block";
     measurementState.entities.forEach((entity) => {
       if (entity.point) {
-        entity.point.pixelSize = 12;
-        entity.point.outlineWidth = 3;
+        entity.point.pixelSize = CONSTANTS2.MARKER_SIZE_HOVER;
+        entity.point.outlineWidth = CONSTANTS2.MARKER_OUTLINE_WIDTH_HOVER;
       }
     });
     editHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
     editHandler.setInputAction((click) => {
-      const pickedObject = viewer.scene.pick(click.position);
-      if (Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id.point) {
-        selectPoint(pickedObject.id, click.position);
+      if (editState.addPointMode) {
+        handleAddPointClick(click);
       } else {
-        deselectPoint();
+        const pickedObject = viewer.scene.pick(click.position);
+        if (Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id.point) {
+          selectPoint(pickedObject.id, click.position);
+        } else {
+          deselectPoint();
+        }
       }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     editHandler.setInputAction((movement) => {
@@ -1049,7 +1682,7 @@ function initializeMeasurementTools(viewer, model, container) {
       }
     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
     editHandler.setInputAction(() => {
-      if (editState.selectedEntity) {
+      if (editState.selectedEntity && !editState.addPointMode) {
         editState.dragging = true;
         viewer.scene.screenSpaceCameraController.enableRotate = false;
       }
@@ -1067,11 +1700,14 @@ function initializeMeasurementTools(viewer, model, container) {
       editHandler.destroy();
       editHandler = null;
     }
+    addPointBtn.style.display = "none";
+    editState.addPointMode = false;
+    addPointBtn.style.background = "#16a085";
     deselectPoint();
     measurementState.entities.forEach((entity) => {
       if (entity.point) {
-        entity.point.pixelSize = 10;
-        entity.point.outlineWidth = 2;
+        entity.point.pixelSize = CONSTANTS2.MARKER_SIZE;
+        entity.point.outlineWidth = CONSTANTS2.MARKER_OUTLINE_WIDTH;
       }
     });
     viewer.scene.screenSpaceCameraController.enableRotate = true;
@@ -1096,21 +1732,20 @@ function initializeMeasurementTools(viewer, model, container) {
         break;
       }
     }
-    if (measurementIndex === -1)
-      return;
+    if (measurementIndex === -1) return;
     editState.selectedEntity = entity;
     editState.measurementIndex = measurementIndex;
     editState.pointIndex = pointIndex;
     editState.selectedPoint = entity.position.getValue(Cesium.JulianDate.now());
-    entity.point.pixelSize = 15;
-    entity.point.outlineWidth = 4;
+    entity.point.pixelSize = CONSTANTS2.MARKER_SIZE_SELECTED;
+    entity.point.outlineWidth = CONSTANTS2.MARKER_OUTLINE_WIDTH_SELECTED;
     entity.point.outlineColor = Cesium.Color.YELLOW;
     showCoordinateEditor(results[measurementIndex], pointIndex);
   }
   function deselectPoint() {
     if (editState.selectedEntity && editState.selectedEntity.point) {
-      editState.selectedEntity.point.pixelSize = 12;
-      editState.selectedEntity.point.outlineWidth = 3;
+      editState.selectedEntity.point.pixelSize = CONSTANTS2.MARKER_SIZE_HOVER;
+      editState.selectedEntity.point.outlineWidth = CONSTANTS2.MARKER_OUTLINE_WIDTH_HOVER;
       editState.selectedEntity.point.outlineColor = Cesium.Color.WHITE;
     }
     editState.selectedEntity = null;
@@ -1122,10 +1757,8 @@ function initializeMeasurementTools(viewer, model, container) {
   }
   function showCoordinateEditor(measurement, pointIndex) {
     const point = measurement.points[pointIndex];
-    editorPanel.innerHTML = `
-      <div style="margin-bottom: 10px; font-weight: bold; border-bottom: 1px solid #555; padding-bottom: 5px;">
-        Edit Point ${pointIndex + 1} (${measurement.type})
-      </div>
+    editorHeader.textContent = `\u22EE\u22EE Edit Point ${pointIndex + 1} (${measurement.type})`;
+    editorContent.innerHTML = `
       <div style="margin-bottom: 8px;">
         <label style="display: block; margin-bottom: 3px;">Longitude (\xB0):</label>
         <input type="number" id="edit-lon" value="${point.lon.toFixed(6)}" step="0.000001" 
@@ -1188,16 +1821,14 @@ function initializeMeasurementTools(viewer, model, container) {
     });
   }
   function updatePointPosition(newPosition) {
-    if (!editState.selectedEntity)
-      return;
+    if (!editState.selectedEntity) return;
     editState.selectedEntity.position = newPosition;
     editState.selectedPoint = newPosition;
     updateMeasurementVisuals();
   }
   function updateMeasurementVisuals() {
     const results = model.get("measurement_results") || [];
-    if (editState.measurementIndex === null)
-      return;
+    if (editState.measurementIndex === null) return;
     const measurement = results[editState.measurementIndex];
     let entityStartIndex = 0;
     for (let i = 0; i < editState.measurementIndex; i++) {
@@ -1218,10 +1849,10 @@ function initializeMeasurementTools(viewer, model, container) {
         const newPolygon = viewer.entities.add({
           polygon: {
             hierarchy: new Cesium.PolygonHierarchy(positions),
-            material: Cesium.Color.ORANGE.withAlpha(0.3),
+            material: Cesium.Color.ORANGE.withAlpha(CONSTANTS2.POLYGON_ALPHA),
             outline: true,
             outlineColor: Cesium.Color.ORANGE,
-            outlineWidth: 2
+            outlineWidth: CONSTANTS2.POLYGON_OUTLINE_WIDTH
           }
         });
         measurementState.polylines[polylineStartIndex] = newPolygon;
@@ -1246,10 +1877,9 @@ function initializeMeasurementTools(viewer, model, container) {
     if (type === "distance") {
       const distance = Cesium.Cartesian3.distance(positions[0], positions[1]);
       const midpoint = Cesium.Cartesian3.midpoint(positions[0], positions[1], new Cesium.Cartesian3());
-      const distanceText = distance >= 1e3 ? `${(distance / 1e3).toFixed(2)} km` : `${distance.toFixed(2)} m`;
       if (measurementState.labels[labelStartIndex]) {
         measurementState.labels[labelStartIndex].position = midpoint;
-        measurementState.labels[labelStartIndex].label.text = distanceText;
+        measurementState.labels[labelStartIndex].label.text = formatValue(distance);
       }
     } else if (type === "height") {
       const carto0 = Cesium.Cartographic.fromCartesian(positions[0]);
@@ -1257,16 +1887,14 @@ function initializeMeasurementTools(viewer, model, container) {
       const verticalDistance = Math.abs(carto1.height - carto0.height);
       const midHeight = (carto0.height + carto1.height) / 2;
       const labelPos = Cesium.Cartesian3.fromRadians(carto1.longitude, carto1.latitude, midHeight);
-      const heightText = verticalDistance >= 1e3 ? `${(verticalDistance / 1e3).toFixed(2)} km` : `${verticalDistance.toFixed(2)} m`;
       if (measurementState.labels[labelStartIndex]) {
         measurementState.labels[labelStartIndex].position = labelPos;
-        measurementState.labels[labelStartIndex].label.text = heightText;
+        measurementState.labels[labelStartIndex].label.text = formatValue(verticalDistance);
       }
     }
   }
   function finalizeMeasurementUpdate() {
-    if (editState.measurementIndex === null || editState.pointIndex === null)
-      return;
+    if (editState.measurementIndex === null || editState.pointIndex === null) return;
     const results = model.get("measurement_results") || [];
     const measurement = results[editState.measurementIndex];
     const cartographic = Cesium.Cartographic.fromCartesian(editState.selectedPoint);
@@ -1299,33 +1927,7 @@ function initializeMeasurementTools(viewer, model, container) {
       }
       measurement.value = totalDistance;
     } else if (measurement.type === "area") {
-      const polygonHierarchy = new Cesium.PolygonHierarchy(positions);
-      const geometry = Cesium.PolygonGeometry.createGeometry(
-        new Cesium.PolygonGeometry({
-          polygonHierarchy,
-          perPositionHeight: false,
-          arcType: Cesium.ArcType.GEODESIC
-        })
-      );
-      let area = 0;
-      if (geometry) {
-        const positionsArray = geometry.attributes.position.values;
-        const indices = geometry.indices;
-        for (let i = 0; i < indices.length; i += 3) {
-          const i0 = indices[i] * 3;
-          const i1 = indices[i + 1] * 3;
-          const i2 = indices[i + 2] * 3;
-          const v0 = new Cesium.Cartesian3(positionsArray[i0], positionsArray[i0 + 1], positionsArray[i0 + 2]);
-          const v1 = new Cesium.Cartesian3(positionsArray[i1], positionsArray[i1 + 1], positionsArray[i1 + 2]);
-          const v2 = new Cesium.Cartesian3(positionsArray[i2], positionsArray[i2 + 1], positionsArray[i2 + 2]);
-          const edge1 = Cesium.Cartesian3.subtract(v1, v0, new Cesium.Cartesian3());
-          const edge2 = Cesium.Cartesian3.subtract(v2, v0, new Cesium.Cartesian3());
-          const crossProduct = Cesium.Cartesian3.cross(edge1, edge2, new Cesium.Cartesian3());
-          const triangleArea = Cesium.Cartesian3.magnitude(crossProduct) / 2;
-          area += triangleArea;
-        }
-      }
-      measurement.value = area;
+      measurement.value = calculateGeodesicArea(positions);
     }
     const newResults = [...results];
     model.set("measurement_results", newResults);
@@ -1335,6 +1937,169 @@ function initializeMeasurementTools(viewer, model, container) {
       showCoordinateEditor(measurement, editState.pointIndex);
     }
   }
+  function handleAddPointClick(click) {
+    const position = getPosition(click.position);
+    if (!position) {
+      log(PREFIX3, "No valid position for add point");
+      return;
+    }
+    const results = model.get("measurement_results") || [];
+    let nearestMeasurement = null;
+    let nearestSegment = null;
+    let minDistance = Number.POSITIVE_INFINITY;
+    let insertIndex = -1;
+    for (let measIdx = 0; measIdx < results.length; measIdx++) {
+      const measurement = results[measIdx];
+      if (measurement.type !== "multi-distance" && measurement.type !== "area") {
+        continue;
+      }
+      let entityStartIndex = 0;
+      for (let i = 0; i < measIdx; i++) {
+        entityStartIndex += results[i].points.length;
+      }
+      const positions = [];
+      for (let i = 0; i < measurement.points.length; i++) {
+        const entity = measurementState.entities[entityStartIndex + i];
+        if (entity && entity.position) {
+          positions.push(entity.position.getValue(Cesium.JulianDate.now()));
+        }
+      }
+      for (let i = 0; i < positions.length - 1; i++) {
+        const p1 = positions[i];
+        const p2 = positions[i + 1];
+        const closestPoint = closestPointOnSegment(position, p1, p2);
+        const dist = Cesium.Cartesian3.distance(position, closestPoint);
+        if (dist < minDistance) {
+          minDistance = dist;
+          nearestMeasurement = measIdx;
+          nearestSegment = { start: p1, end: p2 };
+          insertIndex = i + 1;
+        }
+      }
+      if (measurement.type === "area" && positions.length > 2) {
+        const p1 = positions[positions.length - 1];
+        const p2 = positions[0];
+        const closestPoint = closestPointOnSegment(position, p1, p2);
+        const dist = Cesium.Cartesian3.distance(position, closestPoint);
+        if (dist < minDistance) {
+          minDistance = dist;
+          nearestMeasurement = measIdx;
+          nearestSegment = { start: p1, end: p2 };
+          insertIndex = positions.length;
+        }
+      }
+    }
+    if (nearestMeasurement !== null && minDistance < CONSTANTS2.MAX_ADD_POINT_DISTANCE_METERS) {
+      addPointToMeasurement(nearestMeasurement, insertIndex, position);
+    } else {
+      log(PREFIX3, "No nearby line segment found to add point (min distance:", minDistance.toFixed(2), "m)");
+    }
+  }
+  function closestPointOnSegment(point, segStart, segEnd) {
+    const segmentVector = Cesium.Cartesian3.subtract(segEnd, segStart, new Cesium.Cartesian3());
+    const pointVector = Cesium.Cartesian3.subtract(point, segStart, new Cesium.Cartesian3());
+    const segmentLength = Cesium.Cartesian3.magnitude(segmentVector);
+    if (segmentLength === 0) return segStart;
+    const normalizedSegment = Cesium.Cartesian3.normalize(segmentVector, new Cesium.Cartesian3());
+    const projection = Cesium.Cartesian3.dot(pointVector, normalizedSegment);
+    const t = Math.max(0, Math.min(segmentLength, projection));
+    const closestPoint = Cesium.Cartesian3.add(
+      segStart,
+      Cesium.Cartesian3.multiplyByScalar(normalizedSegment, t, new Cesium.Cartesian3()),
+      new Cesium.Cartesian3()
+    );
+    return closestPoint;
+  }
+  function addPointToMeasurement(measurementIndex, insertIndex, position) {
+    const results = model.get("measurement_results") || [];
+    const measurement = results[measurementIndex];
+    const cartographic = Cesium.Cartographic.fromCartesian(position);
+    const newPoint = {
+      lat: Cesium.Math.toDegrees(cartographic.latitude),
+      lon: Cesium.Math.toDegrees(cartographic.longitude),
+      alt: cartographic.height
+    };
+    measurement.points.splice(insertIndex, 0, newPoint);
+    const colors = getColors();
+    const color = colors[measurement.type]?.main || Cesium.Color.WHITE;
+    const marker = addMarker(position, color);
+    let entityInsertIndex = 0;
+    for (let i = 0; i < measurementIndex; i++) {
+      entityInsertIndex += results[i].points.length;
+    }
+    entityInsertIndex += insertIndex;
+    measurementState.entities.splice(entityInsertIndex, 0, marker);
+    const positions = [];
+    let entityStartIndex = 0;
+    for (let i = 0; i < measurementIndex; i++) {
+      entityStartIndex += results[i].points.length;
+    }
+    for (let i = 0; i < measurement.points.length; i++) {
+      const entity = measurementState.entities[entityStartIndex + i];
+      if (entity && entity.position) {
+        positions.push(entity.position.getValue(Cesium.JulianDate.now()));
+      }
+    }
+    if (measurement.type === "multi-distance") {
+      let totalDistance = 0;
+      for (let i = 0; i < positions.length - 1; i++) {
+        totalDistance += Cesium.Cartesian3.distance(positions[i], positions[i + 1]);
+      }
+      measurement.value = totalDistance;
+    } else if (measurement.type === "area") {
+      measurement.value = calculateGeodesicArea(positions);
+    }
+    updateMeasurementVisualsForIndex(measurementIndex);
+    const newResults = [...results];
+    model.set("measurement_results", newResults);
+    model.save_changes();
+    updateMeasurementsList();
+    log(PREFIX3, `Added point to ${measurement.type} measurement at index ${insertIndex}`);
+  }
+  function updateMeasurementVisualsForIndex(measurementIndex) {
+    const results = model.get("measurement_results") || [];
+    const measurement = results[measurementIndex];
+    let entityStartIndex = 0;
+    for (let i = 0; i < measurementIndex; i++) {
+      entityStartIndex += results[i].points.length;
+    }
+    const positions = [];
+    for (let i = 0; i < measurement.points.length; i++) {
+      const entity = measurementState.entities[entityStartIndex + i];
+      if (entity && entity.position) {
+        positions.push(entity.position.getValue(Cesium.JulianDate.now()));
+      }
+    }
+    const colors = getColors();
+    const color = colors[measurement.type]?.main || Cesium.Color.WHITE;
+    if (measurementState.polylines[measurementIndex]) {
+      viewer.entities.remove(measurementState.polylines[measurementIndex]);
+    }
+    if (measurement.type === "multi-distance") {
+      const polyline = viewer.entities.add({
+        polyline: {
+          positions,
+          width: CONSTANTS2.POLYLINE_WIDTH,
+          material: color,
+          clampToGround: false
+        }
+      });
+      measurementState.polylines[measurementIndex] = polyline;
+      const labelStartIndex = measurementIndex * 20;
+    } else if (measurement.type === "area") {
+      const polygon = viewer.entities.add({
+        polygon: {
+          hierarchy: new Cesium.PolygonHierarchy(positions),
+          material: Cesium.Color.fromAlpha(color, CONSTANTS2.POLYGON_ALPHA),
+          outline: true,
+          outlineColor: color,
+          outlineWidth: CONSTANTS2.POLYGON_OUTLINE_WIDTH,
+          perPositionHeight: true
+        }
+      });
+      measurementState.polylines[measurementIndex] = polygon;
+    }
+  }
   function updateMeasurementsList() {
     const results = model.get("measurement_results") || [];
     log(PREFIX3, "Updating measurements list, count:", results.length);
@@ -1358,6 +2123,11 @@ function initializeMeasurementTools(viewer, model, container) {
         cursor: pointer;
         transition: background 0.2s;
         border-left: 3px solid ${getMeasurementColor(measurement.type)};
+        box-sizing: border-box;
+        width: 100%;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        overflow: hidden;
       `;
       measurementDiv.onmouseover = () => {
         measurementDiv.style.background = "rgba(255, 255, 255, 0.15)";
@@ -1373,15 +2143,16 @@ function initializeMeasurementTools(viewer, model, container) {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        gap: 8px;
       `;
       nameDiv.innerHTML = `
-        <span style="flex: 1;">${name}</span>
-        <button id="rename-${index}" style="padding: 2px 6px; background: #3498db; color: white; border: none; border-radius: 2px; cursor: pointer; font-size: 10px;">\u270E</button>
+        <span style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">${name}</span>
+        <button id="rename-${index}" style="padding: 2px 6px; background: #3498db; color: white; border: none; border-radius: 2px; cursor: pointer; font-size: 10px; flex-shrink: 0;">\u270E</button>
       `;
       measurementDiv.appendChild(nameDiv);
       const valueDiv = document.createElement("div");
       valueDiv.style.cssText = "color: #aaa; font-size: 11px; margin-bottom: 3px;";
-      valueDiv.textContent = formatMeasurementValue(measurement);
+      valueDiv.textContent = formatValue(measurement.value, measurement.type === "area");
       measurementDiv.appendChild(valueDiv);
       const pointsDiv = document.createElement("div");
       pointsDiv.style.cssText = "color: #888; font-size: 10px;";
@@ -1405,31 +2176,10 @@ function initializeMeasurementTools(viewer, model, container) {
     });
   }
   function getMeasurementColor(type) {
-    const colors = {
-      "distance": "#e74c3c",
-      "multi-distance": "#3498db",
-      "height": "#2ecc71",
-      "area": "#e67e22"
-    };
-    return colors[type] || "#95a5a6";
+    return getColors()[type]?.button || "#95a5a6";
   }
   function getMeasurementTypeLabel(type) {
-    const labels = {
-      "distance": "Distance",
-      "multi-distance": "Multi-Distance",
-      "height": "Height",
-      "area": "Area"
-    };
-    return labels[type] || type;
-  }
-  function formatMeasurementValue(measurement) {
-    const value = measurement.value;
-    const type = measurement.type;
-    if (type === "area") {
-      return value >= 1e6 ? `${(value / 1e6).toFixed(2)} km\xB2` : `${value.toFixed(2)} m\xB2`;
-    } else {
-      return value >= 1e3 ? `${(value / 1e3).toFixed(2)} km` : `${value.toFixed(2)} m`;
-    }
+    return TYPE_LABELS[type] || type;
   }
   function renameMeasurement(index, currentName) {
     const newName = prompt("Enter new name for measurement:", currentName);
@@ -1444,11 +2194,9 @@ function initializeMeasurementTools(viewer, model, container) {
   }
   function focusOnMeasurement(index) {
     const results = model.get("measurement_results") || [];
-    if (index < 0 || index >= results.length)
-      return;
+    if (index < 0 || index >= results.length) return;
     const measurement = results[index];
-    if (!measurement.points || measurement.points.length === 0)
-      return;
+    if (!measurement.points || measurement.points.length === 0) return;
     const positions = measurement.points.map(
       (p) => Cesium.Cartesian3.fromDegrees(p.lon, p.lat, p.alt || 0)
     );
@@ -1464,8 +2212,7 @@ function initializeMeasurementTools(viewer, model, container) {
   }
   function handleDistanceClick(click) {
     const position = getPosition(click.position);
-    if (!position)
-      return;
+    if (!position) return;
     if (measurementState.points.length === 0) {
       measurementState.points.push(position);
       addMarker(position);
@@ -1477,7 +2224,7 @@ function initializeMeasurementTools(viewer, model, container) {
             }
             return measurementState.points;
           }, false),
-          width: 3,
+          width: CONSTANTS2.POLYLINE_WIDTH,
           material: Cesium.Color.YELLOW,
           depthFailMaterial: Cesium.Color.YELLOW
         }
@@ -1487,7 +2234,7 @@ function initializeMeasurementTools(viewer, model, container) {
       addMarker(position);
       const distance = calculateDistance(measurementState.points[0], measurementState.points[1]);
       const midpoint = getMidpoint(measurementState.points[0], measurementState.points[1]);
-      addLabel(midpoint, `${distance.toFixed(2)} m`);
+      addLabel(midpoint, formatValue(distance));
       if (measurementState.tempPolyline) {
         viewer.entities.remove(measurementState.tempPolyline);
         measurementState.tempPolyline = null;
@@ -1495,7 +2242,7 @@ function initializeMeasurementTools(viewer, model, container) {
       measurementState.polyline = viewer.entities.add({
         polyline: {
           positions: measurementState.points,
-          width: 3,
+          width: CONSTANTS2.POLYLINE_WIDTH,
           material: Cesium.Color.RED,
           depthFailMaterial: Cesium.Color.RED
         }
@@ -1515,15 +2262,14 @@ function initializeMeasurementTools(viewer, model, container) {
   }
   function handleMultiDistanceClick(click) {
     const position = getPosition(click.position);
-    if (!position)
-      return;
+    if (!position) return;
     measurementState.points.push(position);
     addMarker(position, Cesium.Color.BLUE);
     if (measurementState.points.length === 1) {
       measurementState.polyline = viewer.entities.add({
         polyline: {
           positions: new Cesium.CallbackProperty(() => measurementState.points, false),
-          width: 3,
+          width: CONSTANTS2.POLYLINE_WIDTH,
           material: Cesium.Color.BLUE,
           depthFailMaterial: Cesium.Color.BLUE
         }
@@ -1533,43 +2279,17 @@ function initializeMeasurementTools(viewer, model, container) {
       const p1 = measurementState.points[measurementState.points.length - 2];
       const p2 = measurementState.points[measurementState.points.length - 1];
       const distance = calculateDistance(p1, p2);
-      const midpoint = getMidpoint(p1, p2);
-      addLabel(midpoint, `${distance.toFixed(2)} m`);
+      addLabel(getMidpoint(p1, p2), formatValue(distance));
       let totalDistance = 0;
       for (let i = 0; i < measurementState.points.length - 1; i++) {
-        totalDistance += calculateDistance(
-          measurementState.points[i],
-          measurementState.points[i + 1]
-        );
-      }
-      const results = model.get("measurement_results") || [];
-      const lastResult = results[results.length - 1];
-      let newResults;
-      if (lastResult && lastResult.type === "multi-distance" && lastResult.isActive) {
-        newResults = [...results];
-        newResults[newResults.length - 1] = {
-          ...lastResult,
-          value: totalDistance,
-          points: measurementState.points.map(cartesianToLatLonAlt)
-        };
-      } else {
-        const multiDistanceCount = results.filter((r) => r.type === "multi-distance").length + 1;
-        newResults = [...results, {
-          type: "multi-distance",
-          value: totalDistance,
-          points: measurementState.points.map(cartesianToLatLonAlt),
-          isActive: true,
-          name: `Multi-Distance ${multiDistanceCount}`
-        }];
+        totalDistance += calculateDistance(measurementState.points[i], measurementState.points[i + 1]);
       }
-      model.set("measurement_results", newResults);
-      model.save_changes();
+      updateOrCreateMeasurement("multi-distance", totalDistance, measurementState.points.map(cartesianToLatLonAlt));
     }
   }
   function handleHeightClick(click) {
     const pickedPosition = getPosition(click.position);
-    if (!pickedPosition)
-      return;
+    if (!pickedPosition) return;
     const cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
     const terrainHeight = viewer.scene.globe.getHeight(cartographic) || 0;
     const pickedHeight = cartographic.height;
@@ -1584,7 +2304,7 @@ function initializeMeasurementTools(viewer, model, container) {
     const heightLine = viewer.entities.add({
       polyline: {
         positions: [groundPosition, pickedPosition],
-        width: 3,
+        width: CONSTANTS2.POLYLINE_WIDTH,
         material: Cesium.Color.GREEN,
         depthFailMaterial: Cesium.Color.GREEN
       }
@@ -1604,8 +2324,7 @@ function initializeMeasurementTools(viewer, model, container) {
   }
   function handleAreaClick(click) {
     const position = getPosition(click.position);
-    if (!position)
-      return;
+    if (!position) return;
     measurementState.points.push(position);
     addMarker(position, Cesium.Color.ORANGE);
     if (measurementState.points.length === 1) {
@@ -1614,84 +2333,27 @@ function initializeMeasurementTools(viewer, model, container) {
           hierarchy: new Cesium.CallbackProperty(() => {
             return new Cesium.PolygonHierarchy(measurementState.points);
           }, false),
-          material: Cesium.Color.ORANGE.withAlpha(0.3),
+          material: Cesium.Color.ORANGE.withAlpha(CONSTANTS2.POLYGON_ALPHA),
           outline: true,
           outlineColor: Cesium.Color.ORANGE,
-          outlineWidth: 2
+          outlineWidth: CONSTANTS2.POLYGON_OUTLINE_WIDTH
         }
       });
       measurementState.polylines.push(measurementState.polyline);
     }
     if (measurementState.points.length >= 3) {
       const positions = measurementState.points;
-      const polygonHierarchy = new Cesium.PolygonHierarchy(positions);
-      const geometry = Cesium.PolygonGeometry.createGeometry(
-        new Cesium.PolygonGeometry({
-          polygonHierarchy,
-          perPositionHeight: false,
-          arcType: Cesium.ArcType.GEODESIC
-        })
-      );
-      let area = 0;
-      if (geometry) {
-        const positionsArray = geometry.attributes.position.values;
-        const indices = geometry.indices;
-        for (let i = 0; i < indices.length; i += 3) {
-          const i0 = indices[i] * 3;
-          const i1 = indices[i + 1] * 3;
-          const i2 = indices[i + 2] * 3;
-          const v0 = new Cesium.Cartesian3(positionsArray[i0], positionsArray[i0 + 1], positionsArray[i0 + 2]);
-          const v1 = new Cesium.Cartesian3(positionsArray[i1], positionsArray[i1 + 1], positionsArray[i1 + 2]);
-          const v2 = new Cesium.Cartesian3(positionsArray[i2], positionsArray[i2 + 1], positionsArray[i2 + 2]);
-          const edge1 = Cesium.Cartesian3.subtract(v1, v0, new Cesium.Cartesian3());
-          const edge2 = Cesium.Cartesian3.subtract(v2, v0, new Cesium.Cartesian3());
-          const crossProduct = Cesium.Cartesian3.cross(edge1, edge2, new Cesium.Cartesian3());
-          const triangleArea = Cesium.Cartesian3.magnitude(crossProduct) / 2;
-          area += triangleArea;
-        }
-      }
-      let centroidLon = 0, centroidLat = 0;
-      positions.forEach((pos) => {
-        const carto = Cesium.Cartographic.fromCartesian(pos);
-        centroidLon += carto.longitude;
-        centroidLat += carto.latitude;
-      });
-      centroidLon /= positions.length;
-      centroidLat /= positions.length;
-      const areaText = area >= 1e6 ? `${(area / 1e6).toFixed(2)} km\xB2` : `${area.toFixed(2)} m\xB2`;
+      const area = calculateGeodesicArea(positions);
       const oldLabel = measurementState.labels.find((l) => l.label && l.label.text._value.includes("m\xB2") || l.label.text._value.includes("km\xB2"));
       if (oldLabel) {
         viewer.entities.remove(oldLabel);
         measurementState.labels = measurementState.labels.filter((l) => l !== oldLabel);
       }
-      const centroidCarto = new Cesium.Cartographic(centroidLon, centroidLat);
-      const promise = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [centroidCarto]);
-      promise.then(() => {
-        const centroid = Cesium.Cartographic.toCartesian(centroidCarto);
-        addLabel(centroid, areaText);
+      const centroidCarto = calculateCentroid(positions);
+      Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [centroidCarto]).then(() => {
+        addLabel(Cesium.Cartographic.toCartesian(centroidCarto), formatValue(area, true));
       });
-      const results = model.get("measurement_results") || [];
-      const lastResult = results[results.length - 1];
-      let newResults;
-      if (lastResult && lastResult.type === "area" && lastResult.isActive) {
-        newResults = [...results];
-        newResults[newResults.length - 1] = {
-          ...lastResult,
-          value: area,
-          points: measurementState.points.map(cartesianToLatLonAlt)
-        };
-      } else {
-        const areaCount = results.filter((r) => r.type === "area").length + 1;
-        newResults = [...results, {
-          type: "area",
-          value: area,
-          points: measurementState.points.map(cartesianToLatLonAlt),
-          isActive: true,
-          name: `Area ${areaCount}`
-        }];
-      }
-      model.set("measurement_results", newResults);
-      model.save_changes();
+      updateOrCreateMeasurement("area", area, measurementState.points.map(cartesianToLatLonAlt));
     }
   }
   function handleMouseMove(movement) {
@@ -1710,12 +2372,10 @@ function initializeMeasurementTools(viewer, model, container) {
     }
     clearInProgressMeasurement();
     measurementState.mode = mode;
-    distanceBtn.style.background = mode === "distance" ? "#e74c3c" : "#3498db";
-    multiDistanceBtn.style.background = mode === "multi-distance" ? "#e74c3c" : "#3498db";
-    heightBtn.style.background = mode === "height" ? "#e74c3c" : "#3498db";
-    areaBtn.style.background = mode === "area" ? "#e74c3c" : "#3498db";
-    if (!mode)
-      return;
+    Object.entries(modeButtons).forEach(([btnMode, btn]) => {
+      btn.style.background = mode === btnMode ? "#e74c3c" : "#3498db";
+    });
+    if (!mode) return;
     measurementHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
     if (mode === "distance") {
       measurementHandler.setInputAction(handleDistanceClick, Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -1757,12 +2417,10 @@ function initializeMeasurementTools(viewer, model, container) {
     }
   }
   function loadAndDisplayMeasurements(measurements) {
-    if (!Array.isArray(measurements))
-      return;
+    if (!Array.isArray(measurements)) return;
     measurements.forEach((measurement) => {
       const { type, points } = measurement;
-      if (!type || !Array.isArray(points) || points.length < 2)
-        return;
+      if (!type || !Array.isArray(points) || points.length < 2) return;
       const positions = points.map((point) => {
         const [lon, lat, alt] = point;
         return Cesium.Cartesian3.fromDegrees(lon, lat, alt || 0);
@@ -1783,22 +2441,21 @@ function initializeMeasurementTools(viewer, model, container) {
     const line = viewer.entities.add({
       polyline: {
         positions,
-        width: 3,
+        width: CONSTANTS2.POLYLINE_WIDTH,
         material: Cesium.Color.RED
       }
     });
     measurementState.polylines.push(line);
     const distance = Cesium.Cartesian3.distance(positions[0], positions[1]);
     const midpoint = Cesium.Cartesian3.midpoint(positions[0], positions[1], new Cesium.Cartesian3());
-    const distanceText = distance >= 1e3 ? `${(distance / 1e3).toFixed(2)} km` : `${distance.toFixed(2)} m`;
-    addLabel(midpoint, distanceText);
+    addLabel(midpoint, formatValue(distance));
   }
   function displayMultiDistance(positions) {
     positions.forEach((pos) => addMarker(pos, Cesium.Color.BLUE));
     const line = viewer.entities.add({
       polyline: {
         positions,
-        width: 3,
+        width: CONSTANTS2.POLYLINE_WIDTH,
         material: Cesium.Color.BLUE
       }
     });
@@ -1808,12 +2465,9 @@ function initializeMeasurementTools(viewer, model, container) {
       const segmentDistance = Cesium.Cartesian3.distance(positions[i], positions[i + 1]);
       totalDistance += segmentDistance;
       const midpoint = Cesium.Cartesian3.midpoint(positions[i], positions[i + 1], new Cesium.Cartesian3());
-      const segmentText = segmentDistance >= 1e3 ? `${(segmentDistance / 1e3).toFixed(2)} km` : `${segmentDistance.toFixed(2)} m`;
-      addLabel(midpoint, segmentText);
+      addLabel(midpoint, formatValue(segmentDistance));
     }
-    const lastPos = positions[positions.length - 1];
-    const totalText = totalDistance >= 1e3 ? `Total: ${(totalDistance / 1e3).toFixed(2)} km` : `Total: ${totalDistance.toFixed(2)} m`;
-    addLabel(lastPos, totalText);
+    addLabel(positions[positions.length - 1], `Total: ${formatValue(totalDistance)}`);
   }
   function displayHeight(positions) {
     positions.forEach((pos) => addMarker(pos, Cesium.Color.GREEN));
@@ -1827,68 +2481,31 @@ function initializeMeasurementTools(viewer, model, container) {
           Cesium.Cartesian3.fromRadians(carto1.longitude, carto1.latitude, carto0.height),
           positions[1]
         ],
-        width: 3,
+        width: CONSTANTS2.POLYLINE_WIDTH,
         material: Cesium.Color.GREEN
       }
     });
     measurementState.polylines.push(line);
     const midHeight = (carto0.height + carto1.height) / 2;
     const labelPos = Cesium.Cartesian3.fromRadians(carto1.longitude, carto1.latitude, midHeight);
-    const heightText = verticalDistance >= 1e3 ? `${(verticalDistance / 1e3).toFixed(2)} km` : `${verticalDistance.toFixed(2)} m`;
-    addLabel(labelPos, heightText);
+    addLabel(labelPos, formatValue(verticalDistance));
   }
   function displayArea(positions) {
     positions.forEach((pos) => addMarker(pos, Cesium.Color.ORANGE));
     const polygon = viewer.entities.add({
       polygon: {
         hierarchy: new Cesium.PolygonHierarchy(positions),
-        material: Cesium.Color.ORANGE.withAlpha(0.3),
+        material: Cesium.Color.ORANGE.withAlpha(CONSTANTS2.POLYGON_ALPHA),
         outline: true,
         outlineColor: Cesium.Color.ORANGE,
-        outlineWidth: 2
+        outlineWidth: CONSTANTS2.POLYGON_OUTLINE_WIDTH
       }
     });
     measurementState.polylines.push(polygon);
-    const polygonHierarchy = new Cesium.PolygonHierarchy(positions);
-    const geometry = Cesium.PolygonGeometry.createGeometry(
-      new Cesium.PolygonGeometry({
-        polygonHierarchy,
-        perPositionHeight: false,
-        arcType: Cesium.ArcType.GEODESIC
-      })
-    );
-    let area = 0;
-    if (geometry) {
-      const positionsArray = geometry.attributes.position.values;
-      const indices = geometry.indices;
-      for (let i = 0; i < indices.length; i += 3) {
-        const i0 = indices[i] * 3;
-        const i1 = indices[i + 1] * 3;
-        const i2 = indices[i + 2] * 3;
-        const v0 = new Cesium.Cartesian3(positionsArray[i0], positionsArray[i0 + 1], positionsArray[i0 + 2]);
-        const v1 = new Cesium.Cartesian3(positionsArray[i1], positionsArray[i1 + 1], positionsArray[i1 + 2]);
-        const v2 = new Cesium.Cartesian3(positionsArray[i2], positionsArray[i2 + 1], positionsArray[i2 + 2]);
-        const edge1 = Cesium.Cartesian3.subtract(v1, v0, new Cesium.Cartesian3());
-        const edge2 = Cesium.Cartesian3.subtract(v2, v0, new Cesium.Cartesian3());
-        const crossProduct = Cesium.Cartesian3.cross(edge1, edge2, new Cesium.Cartesian3());
-        const triangleArea = Cesium.Cartesian3.magnitude(crossProduct) / 2;
-        area += triangleArea;
-      }
-    }
-    let centroidLon = 0, centroidLat = 0;
-    positions.forEach((pos) => {
-      const carto = Cesium.Cartographic.fromCartesian(pos);
-      centroidLon += carto.longitude;
-      centroidLat += carto.latitude;
-    });
-    centroidLon /= positions.length;
-    centroidLat /= positions.length;
-    const areaText = area >= 1e6 ? `${(area / 1e6).toFixed(2)} km\xB2` : `${area.toFixed(2)} m\xB2`;
-    const centroidCarto = new Cesium.Cartographic(centroidLon, centroidLat);
-    const promise = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [centroidCarto]);
-    promise.then(() => {
-      const centroid = Cesium.Cartographic.toCartesian(centroidCarto);
-      addLabel(centroid, areaText);
+    const area = calculateGeodesicArea(positions);
+    const centroidCarto = calculateCentroid(positions);
+    Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [centroidCarto]).then(() => {
+      addLabel(Cesium.Cartographic.toCartesian(centroidCarto), formatValue(area, true));
     });
   }
   model.on("change:measurement_mode", () => {
@@ -1913,8 +2530,7 @@ function initializeMeasurementTools(viewer, model, container) {
     updateMeasurementsList();
   });
   model.on("change:load_measurements_trigger", () => {
-    if (isDestroyed)
-      return;
+    if (isDestroyed) return;
     const triggerData = model.get("load_measurements_trigger");
     log(PREFIX3, "Load measurements trigger:", triggerData);
     if (triggerData && triggerData.measurements) {
@@ -1923,8 +2539,7 @@ function initializeMeasurementTools(viewer, model, container) {
     }
   });
   model.on("change:focus_measurement_trigger", () => {
-    if (isDestroyed)
-      return;
+    if (isDestroyed) return;
     const triggerData = model.get("focus_measurement_trigger");
     log(PREFIX3, "Focus measurement trigger:", triggerData);
     if (triggerData && typeof triggerData.index === "number") {
@@ -1932,8 +2547,7 @@ function initializeMeasurementTools(viewer, model, container) {
     }
   });
   model.on("change:show_measurement_tools", () => {
-    if (isDestroyed)
-      return;
+    if (isDestroyed) return;
     const show = model.get("show_measurement_tools");
     log(PREFIX3, "Show measurement tools:", show);
     toolbarDiv.style.display = show ? "flex" : "none";
@@ -1944,8 +2558,7 @@ function initializeMeasurementTools(viewer, model, container) {
     }
   });
   model.on("change:show_measurements_list", () => {
-    if (isDestroyed)
-      return;
+    if (isDestroyed) return;
     const show = model.get("show_measurements_list");
     log(PREFIX3, "Show measurements list:", show);
     measurementsListPanel.style.display = show ? "block" : "none";
@@ -1961,18 +2574,302 @@ function initializeMeasurementTools(viewer, model, container) {
       isDestroyed = true;
       if (measurementHandler) {
         measurementHandler.destroy();
+        measurementHandler = null;
+      }
+      if (editHandler) {
+        editHandler.destroy();
+        editHandler = null;
       }
+      cleanupFunctions.forEach((cleanup) => {
+        try {
+          cleanup();
+        } catch (err) {
+          warn(PREFIX3, "Error during cleanup:", err);
+        }
+      });
+      cleanupFunctions.length = 0;
       clearAllMeasurements();
       if (toolbarDiv.parentNode) {
         toolbarDiv.remove();
       }
+      if (editorPanel.parentNode) {
+        editorPanel.remove();
+      }
+      if (measurementsListPanel.parentNode) {
+        measurementsListPanel.remove();
+      }
       log(PREFIX3, "Measurement tools destroyed");
     }
   };
 }
 
+// src/cesiumjs_anywidget/js/point-picking.js
+var PREFIX4 = "PointPicking";
+function initializePointPicking(viewer, model, container) {
+  const Cesium = window.Cesium;
+  let handler = null;
+  let pickedPointEntities = [];
+  let isPickingMode = false;
+  let pickingPanel = null;
+  let statusText = null;
+  function createPickingPanel() {
+    pickingPanel = document.createElement("div");
+    pickingPanel.id = "point-picking-panel";
+    pickingPanel.style.cssText = `
+      position: absolute;
+      top: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.8);
+      color: white;
+      padding: 10px 20px;
+      border-radius: 5px;
+      font-family: sans-serif;
+      font-size: 14px;
+      z-index: 1000;
+      display: none;
+      pointer-events: none;
+      text-align: center;
+    `;
+    statusText = document.createElement("span");
+    statusText.textContent = "\u{1F3AF} Point Picking Mode - Click on the scene to pick a point";
+    pickingPanel.appendChild(statusText);
+    container.appendChild(pickingPanel);
+  }
+  function setPickingPanelVisible(visible) {
+    if (pickingPanel) {
+      pickingPanel.style.display = visible ? "block" : "none";
+    }
+  }
+  function updateStatus(text) {
+    if (statusText) {
+      statusText.textContent = text;
+    }
+  }
+  function getPositionFromScreen(screenPosition) {
+    const pickedObject = viewer.scene.pick(screenPosition);
+    if (viewer.scene.pickPositionSupported && Cesium.defined(pickedObject)) {
+      const cartesian = viewer.scene.pickPosition(screenPosition);
+      if (Cesium.defined(cartesian)) {
+        return cartesian;
+      }
+    }
+    const ray = viewer.camera.getPickRay(screenPosition);
+    if (ray) {
+      return viewer.scene.globe.pick(ray, viewer.scene);
+    }
+    return null;
+  }
+  function cartesianToLatLonAlt(cartesian) {
+    const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+    return {
+      latitude: Cesium.Math.toDegrees(cartographic.latitude),
+      longitude: Cesium.Math.toDegrees(cartographic.longitude),
+      altitude_wgs84: cartographic.height
+    };
+  }
+  async function getAltitudeMSL(latitude, longitude, altitude_wgs84) {
+    try {
+      const positions = [Cesium.Cartographic.fromDegrees(longitude, latitude)];
+      const terrainProvider = viewer.terrainProvider;
+      if (terrainProvider && terrainProvider.availability) {
+        const sampledPositions = await Cesium.sampleTerrainMostDetailed(terrainProvider, positions);
+        const terrainHeight = sampledPositions[0].height || 0;
+        return altitude_wgs84;
+      }
+    } catch (e) {
+      warn(PREFIX4, "Could not sample terrain for MSL conversion:", e);
+    }
+    return altitude_wgs84;
+  }
+  function addPointMarker(position, config) {
+    const color = config.color || [255, 0, 0, 255];
+    const label = config.label || config.point_id || "";
+    const pointId = config.point_id || `point_${Date.now()}`;
+    const cesiumColor = new Cesium.Color(
+      color[0] / 255,
+      color[1] / 255,
+      color[2] / 255,
+      color[3] / 255
+    );
+    const entity = viewer.entities.add({
+      id: `picked_point_${pointId}`,
+      position,
+      point: {
+        pixelSize: 12,
+        color: cesiumColor,
+        outlineColor: Cesium.Color.WHITE,
+        outlineWidth: 2,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY
+      },
+      label: {
+        text: label,
+        font: "12pt sans-serif",
+        fillColor: cesiumColor,
+        outlineColor: Cesium.Color.BLACK,
+        outlineWidth: 2,
+        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+        pixelOffset: new Cesium.Cartesian2(15, 0),
+        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY
+      }
+    });
+    pickedPointEntities.push(entity);
+    return entity;
+  }
+  function clearPointMarkers() {
+    for (const entity of pickedPointEntities) {
+      viewer.entities.remove(entity);
+    }
+    pickedPointEntities = [];
+    log(PREFIX4, "Cleared all point markers");
+  }
+  function removePointMarker(pointId) {
+    const entityId = `picked_point_${pointId}`;
+    const entity = viewer.entities.getById(entityId);
+    if (entity) {
+      viewer.entities.remove(entity);
+      pickedPointEntities = pickedPointEntities.filter((e) => e.id !== entityId);
+      log(PREFIX4, `Removed point marker: ${pointId}`);
+    }
+  }
+  async function handleClick(click) {
+    if (!isPickingMode) return;
+    const position = getPositionFromScreen(click.position);
+    if (!position) {
+      warn(PREFIX4, "Could not determine click position");
+      updateStatus("\u26A0\uFE0F Could not pick point at this location. Try clicking on visible terrain or 3D tiles.");
+      return;
+    }
+    const coords = cartesianToLatLonAlt(position);
+    const altitude_msl = await getAltitudeMSL(coords.latitude, coords.longitude, coords.altitude_wgs84);
+    const config = model.get("point_picking_config") || {};
+    const currentPoints = model.get("picked_points") || [];
+    const pointNumber = currentPoints.length + 1;
+    const labelPrefix = config.label_prefix || "GCP";
+    const pointIdPrefix = config.point_id_prefix || labelPrefix;
+    const pointId = `${pointIdPrefix}_${pointNumber}`;
+    const label = `${labelPrefix}_${pointNumber}`;
+    addPointMarker(position, {
+      ...config,
+      point_id: pointId,
+      label
+    });
+    const pointData = {
+      id: pointId,
+      latitude: coords.latitude,
+      longitude: coords.longitude,
+      altitude_wgs84: coords.altitude_wgs84,
+      altitude_msl,
+      color: config.color || [255, 0, 0, 255],
+      label,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    log(PREFIX4, "Picked point:", pointData);
+    model.set("picked_points", [...currentPoints, pointData]);
+    model.save_changes();
+    model.set("point_picking_event", pointData);
+    model.save_changes();
+    updateStatus(`\u2705 Picked ${label} at (${coords.latitude.toFixed(6)}\xB0, ${coords.longitude.toFixed(6)}\xB0, ${altitude_msl.toFixed(1)}m) - Click for next point`);
+    const continuous = config.continuous !== false;
+    if (!continuous) {
+      isPickingMode = false;
+      model.set("point_picking_mode", false);
+      model.save_changes();
+      setPickingPanelVisible(false);
+      log(PREFIX4, "Single-point mode: picking stopped after one point");
+    }
+  }
+  function startPickingMode() {
+    if (handler) {
+      handler.destroy();
+    }
+    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction(handleClick, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    isPickingMode = true;
+    setPickingPanelVisible(true);
+    const config = model.get("point_picking_config") || {};
+    const currentPoints = model.get("picked_points") || [];
+    const nextNumber = currentPoints.length + 1;
+    const labelPrefix = config.label_prefix || "GCP";
+    const continuous = config.continuous !== false;
+    if (continuous) {
+      updateStatus(`\u{1F3AF} Point Picking Mode (continuous) - Click to pick ${labelPrefix}_${nextNumber}`);
+    } else {
+      updateStatus(`\u{1F3AF} Point Picking Mode (single) - Click to pick ${labelPrefix}_${nextNumber}`);
+    }
+    log(PREFIX4, "Started point picking mode", { continuous, labelPrefix });
+  }
+  function stopPickingMode() {
+    if (handler) {
+      handler.destroy();
+      handler = null;
+    }
+    isPickingMode = false;
+    setPickingPanelVisible(false);
+    log(PREFIX4, "Stopped point picking mode");
+  }
+  createPickingPanel();
+  model.on("change:point_picking_mode", () => {
+    const enabled = model.get("point_picking_mode");
+    if (enabled) {
+      startPickingMode();
+    } else {
+      stopPickingMode();
+    }
+  });
+  model.on("change:point_picking_config", () => {
+    if (isPickingMode) {
+      const config = model.get("point_picking_config") || {};
+      const currentPoints = model.get("picked_points") || [];
+      const nextNumber = currentPoints.length + 1;
+      const labelPrefix = config.label_prefix || "GCP";
+      updateStatus(`\u{1F3AF} Ready to pick ${labelPrefix}_${nextNumber} - Click on scene`);
+    }
+  });
+  model.on("change:picked_points", () => {
+    const points = model.get("picked_points") || [];
+    if (points.length === 0 && pickedPointEntities.length > 0) {
+      clearPointMarkers();
+    }
+    const currentIds = new Set(pickedPointEntities.map((e) => e.id.replace("picked_point_", "")));
+    const newIds = new Set(points.map((p) => p.id));
+    for (const id of currentIds) {
+      if (!newIds.has(id)) {
+        removePointMarker(id);
+      }
+    }
+  });
+  if (model.get("point_picking_mode")) {
+    startPickingMode();
+  }
+  const existingPoints = model.get("picked_points") || [];
+  for (const point of existingPoints) {
+    const cartesian = Cesium.Cartesian3.fromDegrees(
+      point.longitude,
+      point.latitude,
+      point.altitude_wgs84
+    );
+    addPointMarker(cartesian, {
+      point_id: point.id,
+      color: point.color,
+      label: point.label
+    });
+  }
+  return {
+    destroy: () => {
+      stopPickingMode();
+      clearPointMarkers();
+      if (pickingPanel && pickingPanel.parentNode) {
+        pickingPanel.remove();
+      }
+      log(PREFIX4, "Point picking module destroyed");
+    }
+  };
+}
+
 // src/cesiumjs_anywidget/js/index.js
-window.CESIUM_BASE_URL = "https://cesium.com/downloads/cesiumjs/releases/1.135/Build/Cesium/";
+window.CESIUM_BASE_URL = "https://cesium.com/downloads/cesiumjs/releases/1.137/Build/Cesium/";
 async function render({ model, el }) {
   setDebugMode(model.get("debug_mode") || false);
   model.on("change:debug_mode", () => {
@@ -1999,8 +2896,11 @@ async function render({ model, el }) {
   let viewer = null;
   let cameraSync = null;
   let measurementTools = null;
+  let pointPicking = null;
+  let photoProjection = null;
   let geoJsonLoader = null;
   let czmlLoader = null;
+  let photorealisticTiles = null;
   (async () => {
     try {
       log("Main", "Creating Cesium Viewer...");
@@ -2015,6 +2915,9 @@ async function render({ model, el }) {
       log("Main", "Initializing measurement tools...");
       measurementTools = initializeMeasurementTools(viewer, model, container);
       log("Main", "Measurement tools initialized");
+      log("Main", "Initializing point picking...");
+      pointPicking = initializePointPicking(viewer, model, container);
+      log("Main", "Point picking initialized");
       log("Main", "Setting up viewer listeners...");
       setupViewerListeners(viewer, model, container, Cesium);
       log("Main", "Viewer listeners set up");
@@ -2024,6 +2927,16 @@ async function render({ model, el }) {
       log("Main", "Setting up CZML loader...");
       czmlLoader = setupCZMLLoader(viewer, model, Cesium);
       log("Main", "CZML loader set up");
+      log("Main", "Setting up Photorealistic 3D Tiles...");
+      photorealisticTiles = setupPhotorealisticTiles(viewer, model, Cesium);
+      log("Main", "Photorealistic 3D Tiles set up");
+      model.on("change:camera_command", () => {
+        const command = model.get("camera_command");
+        if (command && command.command === "projectPhoto" && photoProjection) {
+          log("Main", "Handling projectPhoto command");
+          photoProjection.projectPhoto(command);
+        }
+      });
       log("Main", "Initialization complete");
     } catch (err) {
       error("Main", "Error initializing CesiumJS viewer:", err);
@@ -2041,6 +2954,14 @@ async function render({ model, el }) {
       log("Main", "Destroying measurement tools...");
       measurementTools.destroy();
     }
+    if (photoProjection) {
+      log("Main", "Destroying photo projection...");
+      photoProjection.destroy();
+    }
+    if (pointPicking) {
+      log("Main", "Destroying point picking...");
+      pointPicking.destroy();
+    }
     if (geoJsonLoader) {
       log("Main", "Destroying GeoJSON loader...");
       geoJsonLoader.destroy();
@@ -2049,6 +2970,10 @@ async function render({ model, el }) {
       log("Main", "Destroying CZML loader...");
       czmlLoader.destroy();
     }
+    if (photorealisticTiles) {
+      log("Main", "Destroying photorealistic tiles...");
+      photorealisticTiles.destroy();
+    }
     if (viewer) {
       log("Main", "Destroying viewer...");
       viewer.destroy();
@@ -2056,7 +2981,7 @@ async function render({ model, el }) {
     log("Main", "Cleanup complete");
   };
 }
-var js_default = { render };
+var index_default = { render };
 export {
-  js_default as default
+  index_default as default
 };