campus bar added.

UCF · Jun 6, 2024 · ff3b604 · ff3b604
1 parent 230ad53
commit ff3b604
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 22 deletions.
diff --git a/public/data/campuses.json b/public/data/campuses.json
@@ -1,24 +1,28 @@
 {
     "campuses": [
         {
-                "name": "University of Central Florida",
-                "Latitude": "28.6024321",
-                "Longitude": "-81.2026402"
+                "name": "Main Campus",
+                "latitude": "28.602368",
+                "longitude": "-81.200142",
+                "zoom": "15"
         },
         {
-                "name": "UCF College of Medicine",
-                "Latitude": "28.3680993",
-                "Longitude": "-81.2811666"
+                "name": "College of Medicine",
+                "latitude": "28.3680993",
+                "longitude": "-81.2811666",
+                "zoom":"17"
         },
         {
-                "name": "UCF Downtown",
-                "Latitude": "28.5462775",
-                "Longitude": "-81.3872291"
+                "name": "Downtown",
+                "latitude": "28.5462775",
+                "longitude": "-81.3872291",
+                "zoom": "17"
         },   
         {
-                "name": "Rosen College of Hospitality Management",
-                "Latitude": "28.42829",
-                "Longitude": "-81.4419018"
+                "name": "Rosen College",
+                "latitude": "28.42829",
+                "longitude": "-81.4419018",
+                "zoom": "17"
 
         }
     ]

diff --git a/src/App.tsx b/src/App.tsx
@@ -77,8 +77,9 @@ function App() {
   // Campuses 
   interface CampusesDataType {
     name: string,
-    Latitude: string,
-    Longitude: string,
+    latitude: string,
+    longitude: string,
+    zoom: string
   }
   const [campusesData, setCampusesData] = useState<CampusesDataType[]>([]);
 
@@ -137,6 +138,19 @@ function App() {
     });
   };
 
+  const campusHandler = (latitude: string, longitude: string, zoom: string) => {
+    const lat = Number(latitude)
+    const lon = Number(longitude)
+    const mapZoom = Number(zoom);
+    mapRef.current!.flyTo({
+      center: [
+        lon!,
+        lat!
+      ],
+      zoom: mapZoom
+    })
+  }
+
   useMemo(() => {
     fetch('/data/geojson/new/buildingPoints.geojson')
       .then((responseText) => responseText.json())
@@ -406,7 +420,7 @@ function App() {
         </Map>
       </div>
       <div>
-      <Campuses campusesData={campusesData} />
+      <Campuses campusesData={campusesData} campusHandler={campusHandler} />
       </div>
       <footer className='footer pt-3'>
           <div className="d-flex justify-content-center">

diff --git a/src/components/Campuses.scss b/src/components/Campuses.scss
@@ -0,0 +1,7 @@
+.campus-bar {
+    font-size: 0.8rem;
+}
+
+.campus-bar a:hover {
+    background-color: transparent;
+}
diff --git a/src/components/Campuses.tsx b/src/components/Campuses.tsx
@@ -1,21 +1,23 @@
+import './Campuses.scss';
 
 interface Campus {
   name: string;
-  Latitude: string;
-  Longitude: string;
+  latitude: string;
+  longitude: string;
+  zoom: string;
 }
 interface CampusesProps {
   campusesData: Campus[];
+  campusHandler: (latitude: string, longitude: string, zoom: string) => void;
 }
 
-const Campuses = ({ campusesData }: CampusesProps) => {
-
+const Campuses = ({ campusesData, campusHandler }: CampusesProps) => {
   return (
-    <ul>
+    <div className="campus-bar d-flex flex-wrap justify-content-center py-1 bg-secondary">
     { campusesData.map((campusData, index) => (
-        <li key={index}>{campusData.name}</li>
+        <a key={index} onClick={()=> campusHandler(campusData.latitude, campusData.longitude, campusData.zoom)} role="button" className="link-underline-light link-offset-2 link-underline-opacity-100 link-underline-opacity-0-hover ms-3 ms-md-5 text-white">{campusData.name}</a>
       ))}
-  </ul>
+  </div>
   );
 };