Updated czml_viewer to get obs_id from URL

tomaszmrugalski · tomaszmrugalski · commit 27e6f58bb1dc · 2021-03-09T22:49:50.000+01:00
diff --git a/cesium/index.html b/cesium/index.html
@@ -39,8 +39,11 @@
 
 <body>
     <div id="buttonContainer" style="position:absolute; left: 0px; z-index:1;">
-        <button class="cesium-button button-czml-load" data-file="http://localhost:8080/czml/obs/1276">Observation 1276</button>
-        <button class="cesium-button button-clear-all">Clear</button>
+        <!-- The following buttons can be used for debugging CZML observation loading.
+            <button class="cesium-button button-czml-load" data-file="http://localhost:8080/czml/obs/1276">Observation 1276</button>
+            <button class="cesium-button" id="clear">Clear</button> -->
+        <input class="cesium" value="Observation id" type="number" id="obs-id"></input>
+        <button class="cesium-button" id="load-obs">Load observation</button>
         <button class="cesium-button button-frame-selector" data-names="Inertial (ECI),Fixed (ECEF)">Reference frame:Fixed (ECEF)</button>
     </div>
     <div id="cesiumContainer">
diff --git a/cesium/src/utils/czml_viewer.ts b/cesium/src/utils/czml_viewer.ts
@@ -9,23 +9,44 @@
 
 import * as Cesium from "cesium";
 
+const CZML_URL = 'http://localhost:8080/czml/obs/';
+
 export function czmlViewer(viewer: Cesium.Viewer) {
 
-    // This updates constellation buttons
+    // This updates the CZML load buttons
     const czmlButtons = [...document.querySelectorAll(".button-czml-load")] as HTMLButtonElement[];
     czmlButtons.forEach(btn => {
         const f = btn.dataset["file"] as string;
 
         btn.onclick = () => loadCzml(viewer, f);
     });
 
-    // Find all clear-all buttons
-    const clearButtons = [...document.querySelectorAll(".button-clear-all")] as HTMLButtonElement[];
-    clearButtons.forEach(btn => {
-        btn.onclick = () => {
+    // This adds load observation onclick callback to Show observation
+    const czmlLoad = document.getElementById("load-obs") as HTMLButtonElement;
+    czmlLoad.onclick = () => {
+        let obs_id = (document.getElementById("obs-id") as HTMLInputElement).value;
+        loadCzml(viewer, CZML_URL + obs_id);
+    };
+
+    // Find the clear button and set the callback to clear all datasources (remove all loaded observations)
+    const clearButton = document.getElementById("clear") as HTMLButtonElement;
+    if (clearButton) {
+        clearButton.onclick = () => {
             viewer.dataSources.removeAll();
-        }
-    })
+        };
+    }
+
+    // Find if there's observation number passed in URL. If there is, load the CZML file.
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    if (urlParams.has('obs_id')) {
+        console.log("Loading observation " + urlParams.get('obs_id'));
+        loadCzml(viewer, CZML_URL + urlParams.get('obs_id'));
+
+        // Also set up the input field to the observation id we just loaded.
+        const obs_id = document.getElementById("obs-id") as HTMLInputElement;
+        obs_id.value = urlParams.get('obs_id') as string;
+    }
 }
 
 function loadCzml(viewer: Cesium.Viewer, czml: string) {
