Added top navbar with search box and centering button, imported all t…

…he institute names to search box so that it can move to the location on the globe.

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",

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({

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["mapbox-gl"],
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "typeRoots": ["./types", "node_modules/@types"],