Added location sharing

AndresKasekamp · Dec 21, 2023 · d75116f · d75116f
1 parent 26a6239
commit d75116f
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 37 deletions.
diff --git a/app.js b/app.js
@@ -28,7 +28,7 @@ require([
   "./modules/memoryTest.js",
   "./modules/legend.js",
   "./modules/elevation.js",
-  "esri/geometry/Point",
+
   "./modules/goToLocation.js",
 ], (
   Conversion,
@@ -52,7 +52,6 @@ require([
   initMemoryTest,
   initLegend,
   initELevation,
-  Point,
   goToLocation
 ) => {
   /************************************************************
@@ -77,36 +76,20 @@ require([
 
   const scene = initScene.setupWebScene(graphicsLayer, ortofotoWMS);
 
-  // TODO ilmselt uurida kas center ka töötab
   const view = initScene.setupWebView(scene);
 
   /**************************************
    * Adding a layer group, expand
    **************************************/
-
   view.when(() => {
     // Going to specified location at runtime
-    //const [locationX, locationY, locationZ] = goToLocation.getLocation();
     const locationArray = goToLocation.getLocation();
 
     if (locationArray !== null) {
-      const [locationX, locationY, locationZ] = locationArray;
-      const point = new Point({
-        x: locationX,
-        y: locationY,
-        z: locationZ,
-        spatialReference: {
-          wkid: 3301,
-        },
-      });
-
-      view.goTo(point);
+      const viewpoint = goToLocation.setupViewPoint(locationArray);
+      view.goTo(viewpoint);
     }
 
-    // TODO nupp mis jagab, meetodid, mis korjavad stseentilt, funktsioon, mis parsib ja funktsioon, mis suhtleb koordinaati tööriistaga (temast sõltub)
-    // TODO algus on siit ilmselt
-    // TODO kaameranurk ja muu selline ka...
-
     //console.log(view.viewpoint)
 
     const { title, description, thumbnailUrl, avgRating } = scene.portalItem;
@@ -166,9 +149,13 @@ require([
         view.ui.add(daylight, "top-right");
       }
 
-      if (nextWidget === "information") {
+      if (nextWidget === "share") {
         const sharedLocation = goToLocation.createURL(view);
         goToLocation.copyTextToClipboard(sharedLocation);
+
+        // Displaying popup
+        const shareMapAlert = document.getElementById("share-map-alert");
+        shareMapAlert.open = "true";
       }
     };
 

diff --git a/index.html b/index.html
@@ -32,26 +32,41 @@ <h2 id="header-title">
         </div>
 
 
-        
+
 
 
         <calcite-shell-panel slot="panel-start" display-mode="float">
 
             <calcite-action-bar slot="action-bar">
-                <calcite-action data-action-id="layers" icon="layers" text="Layers"></calcite-action>
-                <calcite-action data-action-id="basemaps" icon="layer-basemap" text="Basemaps"></calcite-action>
-                <calcite-action data-action-id="elevation" icon="sky-plot" text="Elevation"></calcite-action>
-                <calcite-action data-action-id="lineOfSight" icon="line-of-sight" text="Line of Sight"></calcite-action>
-                <calcite-action data-action-id="daylight" icon="date-time" text="Daylight"></calcite-action>
-                <calcite-action data-action-id="elevationProfile" icon="altitude" text="Elevation profile">
+                <calcite-action data-action-id="layers" icon="layers" text="Layers" scale="l"></calcite-action>
+                <calcite-action data-action-id="basemaps" icon="layer-basemap" text="Basemaps" scale="l">
+                </calcite-action>
+                <calcite-action data-action-id="elevation" icon="sky-plot" text="Elevation" scale="l"></calcite-action>
+                <calcite-action data-action-id="lineOfSight" icon="line-of-sight" text="Line of Sight" scale="l">
+                </calcite-action>
+                <calcite-action data-action-id="daylight" icon="date-time" text="Daylight" scale="l"></calcite-action>
+                <calcite-action data-action-id="elevationProfile" icon="altitude" text="Elevation profile" scale="l">
+                </calcite-action>
+                <calcite-action data-action-id="measurement" icon="measure" text="Measurements" scale="l">
+                </calcite-action>
+                <calcite-action data-action-id="shadowCast" icon="measure-building-height-shadow" text="Shadow cast"
+                    scale="l">
                 </calcite-action>
-                <calcite-action data-action-id="measurement" icon="measure" text="Measurements"></calcite-action>
-                <calcite-action data-action-id="shadowCast" icon="measure-building-height-shadow" text="Shadow cast">
+                <calcite-action data-action-id="slicing" icon="slice" text="Slicing" scale="l"></calcite-action>
+                <calcite-action data-action-id="information" icon="information" text="Information" scale="l">
                 </calcite-action>
-                <calcite-action data-action-id="slicing" icon="slice" text="Slicing"></calcite-action>
-                <calcite-action data-action-id="information" icon="information" text="Information"></calcite-action>
+                <calcite-action id="share-tooltip" data-action-id="share" icon="share" text="Share" scale="l">
+                </calcite-action>
+                <calcite-tooltip reference-element="share-tooltip">
+                    <span>Share a map</span>
+                </calcite-tooltip>
+
             </calcite-action-bar>
 
+            <calcite-alert id="share-map-alert" auto-close auto-close-duration="fast" kind="success">
+                <div slot="message">Copied map location to the clipboard</div>
+            </calcite-alert>
+
             <!-- Map-specific panels (each one provides a div for ArcGIS Maps SDK for JavaScript widgets) -->
             <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
                 <div id="layers-container"></div>
@@ -117,6 +132,9 @@ <h2 id="header-title">
                 </div>
             </calcite-panel>
 
+            <calcite-panel height-scale="l" data-panel-id="share" hidden closed>
+            </calcite-panel>
+
 
         </calcite-shell-panel>
         <div id="viewDiv" class="esri-widget">

diff --git a/modules/goToLocation.js b/modules/goToLocation.js
@@ -1,4 +1,8 @@
-define([], () => ({
+define(["esri/Viewpoint", "esri/Camera", "esri/geometry/Point"], (
+  Viewpoint,
+  Camera,
+  Point
+) => ({
   getLocation: () => {
     // Sample URL with parameters
     const urlString = window.location.href;
@@ -11,14 +15,28 @@ define([], () => ({
 
     // Split the viewpoint parameter to extract x, y, and z values
     if (viewpointParam) {
-      const [x, y, z] = viewpointParam.split(":")[1].split(",");
+      const [x, y, z, heading, tilt, rotation, scale] = viewpointParam
+        .split(":")[1]
+        .split(",");
 
       // Convert strings to numbers if needed
       const parsedX = parseFloat(x);
       const parsedY = parseFloat(y);
       const parsedZ = parseFloat(z);
+      const parsedHeading = parseFloat(heading);
+      const parsedTilt = parseFloat(tilt);
+      const parsedRotation = parseFloat(rotation);
+      const parsedScale = parseFloat(scale);
 
-      return [parsedX, parsedY, parsedZ];
+      return [
+        parsedX,
+        parsedY,
+        parsedZ,
+        parsedHeading,
+        parsedTilt,
+        parsedRotation,
+        parsedScale,
+      ];
     }
     return null;
   },
@@ -41,9 +59,41 @@ define([], () => ({
     // Remove parameters from the URL
     const urlWithoutParams = currentURL.split("?")[0];
 
-    const { x, y, z } = view.viewpoint.targetGeometry;
+    const viewpoint = view.viewpoint;
+    const { rotation, scale } = viewpoint;
+    const { heading, tilt } = viewpoint.camera;
+    const { x, y, z } = viewpoint.camera.position;
     const viewPointParameter = "?viewpoint=cam:";
-    const sharedLocation = `${urlWithoutParams}${viewPointParameter}${x}${x},${y},${z}`;
+    const sharedLocation = `${urlWithoutParams}${viewPointParameter}${x}${x},${y},${z},${heading},${tilt},${rotation},${scale}`;
     return sharedLocation;
   },
+
+  setupViewPoint: (locationArray) => {
+    const [
+      locationX,
+      locationY,
+      locationZ,
+      locationHeading,
+      locationTilt,
+      locationRotate,
+      locationScale,
+    ] = locationArray;
+    const viewpoint = new Viewpoint({
+      camera: new Camera({
+        position: new Point({
+          x: locationX,
+          y: locationY,
+          z: locationZ,
+          spatialReference: {
+            wkid: 3301,
+          },
+        }),
+        heading: locationHeading,
+        tilt: locationTilt,
+      }),
+      rotation: locationRotate,
+      scale: locationScale,
+    });
+    return viewpoint;
+  },
 }));