return of the globe

peterbull · Jan 11, 2025 · f025990 · f025990
1 parent c5de713
commit f025990
Show file tree

Hide file tree

Showing 15 changed files with 427 additions and 5 deletions.
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -15,6 +15,7 @@
     "@tanstack/react-router": "^1.95.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-globe.gl": "^2.29.4",
     "react-query-devtools": "^2.6.3",
     "zustand": "^5.0.3"
   },

diff --git a/frontend/app/pnpm-lock.yaml b/frontend/app/pnpm-lock.yaml
diff --git a/frontend/app/src/components/GlobeView.tsx b/frontend/app/src/components/GlobeView.tsx
@@ -0,0 +1,14 @@
+import Globe, { GlobeMethods } from "react-globe.gl";
+import globeImageUrl from "../img/earth-blue-marble.jpg";
+
+export function GlobeView() {
+    return (
+          <Globe
+            // ref={globeEl}
+            // height={globeSize.height}
+            globeImageUrl={globeImageUrl}
+            backgroundColor="rgb(15 23 42)"
+            // onGlobeClick={handleGlobeClick}
+          />
+    )
+}
diff --git a/frontend/app/src/components/SpotSelector.tsx b/frontend/app/src/components/SpotSelector.tsx
@@ -1,9 +1,11 @@
+import { GlobeView } from "./GlobeView";
 import { SpotList } from "./SpotList";
 
 export function SpotSelector() {
   return (
     <>
       <p>test</p>
+      <GlobeView />
       <SpotList />
     </>
   );

diff --git a/frontend/app/src/img/circle.png b/frontend/app/src/img/circle.png
diff --git a/frontend/app/src/img/earth-blue-marble.jpg b/frontend/app/src/img/earth-blue-marble.jpg
diff --git a/frontend/app/src/img/earth-dark.jpg b/frontend/app/src/img/earth-dark.jpg
diff --git a/frontend/app/src/img/earth-topology.png b/frontend/app/src/img/earth-topology.png
diff --git a/frontend/app/src/img/earth-water.png b/frontend/app/src/img/earth-water.png
diff --git a/frontend/app/src/img/earthSpecular.jpg b/frontend/app/src/img/earthSpecular.jpg
diff --git a/frontend/app/src/img/gebco_bathy.5400x2700_8bit.jpg b/frontend/app/src/img/gebco_bathy.5400x2700_8bit.jpg
diff --git a/frontend/app/src/img/night-sky.png b/frontend/app/src/img/night-sky.png
diff --git a/frontend/app/src/img/worldColour.5400x2700.jpg b/frontend/app/src/img/worldColour.5400x2700.jpg
diff --git a/frontend/app/src/index.css b/frontend/app/src/index.css
@@ -9,7 +9,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #1f2937;
+  background-color: #0F172A;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

diff --git a/frontend/my-app/src/components/GlobeSpots.tsx b/frontend/my-app/src/components/GlobeSpots.tsx
@@ -35,7 +35,7 @@ const GlobeSpots: React.FC<any> = ({
   const filteredSpots = nearbySpots.filter(
     (spot) =>
       spot.spot_name.toLowerCase().includes(query.toLowerCase()) ||
-      spot.street_address.toLowerCase().includes(query.toLowerCase()),
+      spot.street_address.toLowerCase().includes(query.toLowerCase())
   );
 
   // Defining initial perspective and controls for globe component
@@ -57,7 +57,7 @@ const GlobeSpots: React.FC<any> = ({
     const fetchNearbySpots = async () => {
       try {
         const res = await fetch(
-          `${process.env.REACT_APP_BACKEND_URL ?? "http://localhost:8000"}/spots`,
+          `${process.env.REACT_APP_BACKEND_URL ?? "http://localhost:8000"}/spots`
         );
         const data: Spot[] = await res.json();
         setNearbySpots(data);
@@ -80,7 +80,7 @@ const GlobeSpots: React.FC<any> = ({
           lng: data.longitude,
           altitude: altitude,
         },
-        ms,
+        ms
       );
       setCurrentSpot(data);
       setTimeout(() => {
@@ -107,7 +107,7 @@ const GlobeSpots: React.FC<any> = ({
           lng: spotClick[1],
           altitude: 0.2,
         },
-        2500,
+        2500
       );
       setTimeout(() => {
         setCurrentComponent("AddSpot");