WIP: Save position in URL, load initial position from URL if present

src/js/views/maps/CesiumWidgetView.js

@@ -192,8 +192,22 @@ define([
           // Render the layers
           view.addLayers();
 
-          // Go to the home position, if one is set.
-          view.flyHome(0);
+          const url = new URL(location.href);
+          const searchParams = new URLSearchParams(url.searchParams);
+          const lat = searchParams.get('lat');
+          const long = searchParams.get('lng');
+          const height = searchParams.get('h');
+          console.log("try fly to query params", url);
+          if (lat != null && long != null && height != null) {
+            console.log("try fly to query params");
+            // Go to position specified in query params.
+            view.flyTo({
+              destination: Cesium.Cartesian3.fromDegrees(long, lat, height)
+            });
+          } else {
+            // Go to the home position, if one is set.
+            view.flyHome(0);
+          }
 
           // Set the map up so that selected features may be highlighted
           view.setUpSilhouettes();
@@ -452,13 +466,13 @@ define([
           // Remove any previously set camera listeners
           view.removeCameraListeners();
           // Amount camera must change before firing 'changed' event.
-          camera.percentChanged = 0.1;
+          camera.percentageChanged = 0.01;
 
           // Functions to run for each Cesium camera event
           const cameraEvents = {
             moveEnd: [],
             moveStart: [],
-            changed: ["updateScale", "updateViewExtent"],
+            changed: ["updateScale", "updateViewExtent", "updateQueryParams"],
           };
           // add a listener that triggers the same event on the interactions
           // model, and runs any functions configured above.
@@ -517,6 +531,17 @@ define([
         });
       },
 
+      updateQueryParams() {
+        const carto = this.scene.camera.positionCartographic;
+        const url = new URL(location.href);
+
+        url.searchParams.set('lat', Cesium.Math.toDegrees(carto.latitude));
+        url.searchParams.set('lng', Cesium.Math.toDegrees(carto.longitude));
+        url.searchParams.set('h', carto.height);
+
+        history.pushState(null, '', url);
+      },
+
       /**
        * When the mouse is moved over the map, update the interactions model
        * with the current mouse position.
@@ -653,6 +678,8 @@ define([
         this.zoomTarget = target;
         this.zoomOptions = options;
         this.requestRender();
+
+        this.updateQueryParams();
       },
 
       /**
@@ -815,7 +842,7 @@ define([
               // Search for the entity again in case it was removed and
               // re-added to the data source display.
               entity = view.getEntityById(entity.id, entity.entityCollection);
-              if(!entity) {
+              if (!entity) {
                 clearInterval(interval);
                 reject("Failed to get bounding sphere for entity, entity not found.");
               }
@@ -1134,8 +1161,8 @@ define([
         } catch (error) {
           console.log(
             "There was an error finding the edge points in a CesiumWidgetView" +
-              ". Error details: " +
-              error
+            ". Error details: " +
+            error
           );
         }
       },
@@ -1176,8 +1203,8 @@ define([
         } catch (error) {
           console.log(
             "There was an error finding a midpoint in a CesiumWidgetView" +
-              ". Error details: " +
-              error
+            ". Error details: " +
+            error
           );
         }
       },
@@ -1329,8 +1356,8 @@ define([
         } catch (error) {
           console.log(
             "Failed to get a pixel to meters measurement in a CesiumWidgetView" +
-              ". Error details: " +
-              error
+            ". Error details: " +
+            error
           );
           return false;
         }
@@ -1512,9 +1539,9 @@ define([
       sortImagery: function () {
         const imageryInMap = this.scene.imageryLayers;
         const imageryModels = _.reduce(this.model.getLayerGroups(), (models, layers) => {
-            models.push(...layers.getAll("CesiumImagery"));
-            return models;
-          }, []);
+          models.push(...layers.getAll("CesiumImagery"));
+          return models;
+        }, []);
 
         // If there are no imagery layers, or just one, return
         if (
@@ -1560,8 +1587,8 @@ define([
           if (!color || typeof color !== "string" || !color.startsWith("#")) {
             console.log(
               `${color} is an invalid color for imagery grid. ` +
-                `Must be a hex color starting with '#'. ` +
-                `Setting color to white: '#ffffff'`
+              `Must be a hex color starting with '#'. ` +
+              `Setting color to white: '#ffffff'`
             );
             color = "#ffffff";
           }
@@ -1574,7 +1601,7 @@ define([
           if (availableTS.indexOf(tilingScheme) == -1) {
             console.log(
               `${tilingScheme} is not a valid tiling scheme ` +
-                `for the imagery grid. Using WebMercatorTilingScheme`
+              `for the imagery grid. Using WebMercatorTilingScheme`
             );
             tilingScheme = "WebMercatorTilingScheme";
           }
@@ -1594,8 +1621,8 @@ define([
         } catch (error) {
           console.log(
             "There was an error showing the imagery grid in a CesiumWidgetView" +
-              ". Error details: " +
-              error
+            ". Error details: " +
+            error
           );
         }
       },

src/js/views/portals/PortalView.js

@@ -615,6 +615,11 @@ define(["jquery",
             newPathName += "/" + this.activeSection.uniqueSectionLabel;
           }
 
+          const queryString = new URL(window.location.href).search;
+          if (queryString) {
+            newPathName += queryString;
+          }
+
           // Update the window location
           MetacatUI.uiRouter.navigate(newPathName, { trigger: false });