show lat,long, elevation in location label in geopanel

If no location then "Click to set location"
3DStreet · Jun 3, 2024 · 663eed2 · 663eed2
1 parent 953cac8
commit 663eed2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/editor/components/components/GeoPanel/GeoPanel.component.jsx b/src/editor/components/components/GeoPanel/GeoPanel.component.jsx
@@ -10,11 +10,21 @@ import Events from '../../../lib/Events';
  */
 const GeoPanel = () => {
   const onClick = () => Events.emit('opengeomodal');
+  const metadata = AFRAME.scenes[0].getAttribute('metadata');
+  let coordinateInfo;
+  if (metadata && metadata['coord']) {
+    const coord = metadata['coord'];
+    coordinateInfo = `Latitude: ${coord.latitude}, longitude: ${coord.longitude}, elevation: ${coord.elevation}`;
+  }
 
   return (
     <div className={styles.geo}>
       <img src={GeoImg} onClick={onClick} alt="geo" />
-      <p>San Francisco, California at Market and Van Ness Streets</p>
+      {coordinateInfo ? (
+        <p>{coordinateInfo}</p>
+      ) : (
+        <a onClick={onClick}>Click to set location</a>
+      )}
     </div>
   );
 };

diff --git a/src/editor/components/components/GeoPanel/GeoPanel.module.scss b/src/editor/components/components/GeoPanel/GeoPanel.module.scss
@@ -11,12 +11,18 @@
     cursor: pointer;
   }
 
-  & > p {
+  & > p, & > a {
     margin-top: 8px;
     font-size: 16px !important;
     max-width: 80vw;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
   }
+  & > a {
+    filter: brightness(90%);
+  }  
+  & > a:hover {
+    filter: brightness(100%);
+  }
 }