From cfd4fe026d91ecb585c70cdb97e4f3b6a5b5d587 Mon Sep 17 00:00:00 2001
From: Rhymlore <bakirci.alperen@gmail.com>
Date: Thu, 19 Oct 2023 17:02:22 -0500
Subject: [PATCH] Added top navbar with search box and centering button,
 imported all the institute names to search box so that it can move to the
 location on the globe.

---
 package-lock.json         | 35 ++++++++++++++++-------------------
 package.json              |  1 +
 src/components/mapbox.tsx |  4 ++--
 tsconfig.json             |  1 +
 4 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 55face8..1495eef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,6 @@
         "@mui/icons-material": "^5.14.14",
         "@mui/material": "^5.14.14",
         "@popperjs/core": "^2.11.8",
-        "bootstrap": "^5.3.2",
         "mapbox-gl": "^2.15.0",
         "next": "13.5.4",
         "react": "^18",
@@ -22,6 +21,7 @@
       },
       "devDependencies": {
         "@types/bootstrap": "^5.2.7",
+        "@types/mapbox-gl": "^2.7.17",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -1089,12 +1089,27 @@
         "@popperjs/core": "^2.9.2"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.12",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.12.tgz",
+      "integrity": "sha512-uK2z1ZHJyC0nQRbuovXFt4mzXDwf27vQeUWNhfKGwRcWW429GOhP8HxUHlM6TLH4bzmlv/HlEjpvJh3JfmGsAA==",
+      "dev": true
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/mapbox-gl": {
+      "version": "2.7.17",
+      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-2.7.17.tgz",
+      "integrity": "sha512-5lDO2W6glPCqiRuqKh0a7MPOwnVt1/KWcYnxsL3z5rmjuOcFdHEa+KzUwCzqsAlbAegIIhgQiREZzJ9o1ze1gQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.8.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.5.tgz",
@@ -1590,24 +1605,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/bootstrap": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
-      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "peerDependencies": {
-        "@popperjs/core": "^2.11.8"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 12f35b9..5ec222f 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@types/bootstrap": "^5.2.7",
+    "@types/mapbox-gl": "^2.7.17",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/src/components/mapbox.tsx b/src/components/mapbox.tsx
index 7433518..9f762bb 100644
--- a/src/components/mapbox.tsx
+++ b/src/components/mapbox.tsx
@@ -1,6 +1,5 @@
 import Head from "next/head";
 import { useEffect, useState, useRef } from "react";
-import mapboxgl from 'mapbox-gl';
 import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
@@ -11,6 +10,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import '../app/globals.css';
 import { ThemeProvider, createTheme} from '@mui/material/styles';
+import * as mapboxgl from 'mapbox-gl';
 
 interface Institution {
     name: string;
@@ -33,7 +33,7 @@ interface Institution {
 export const GlobeComponent = () => {
     const [anchorEl, setAnchorEl] = useState<Element | null>(null);
     const [popoverContent, setPopoverContent] = useState<string>('');
-    const mapRef = useRef<mapboxgl.Map | null>(null);
+    const mapRef = useRef<mapboxgl.Map | null>(null as any);
     const [institutionData, setInstitutionData] = useState<Institution[]>([]);
 
     const theme = createTheme({
diff --git a/tsconfig.json b/tsconfig.json
index cb73c4a..d8318fd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["mapbox-gl"],
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "typeRoots": ["./types", "node_modules/@types"],