basic map set up

agiledev-students-fall2023 · Oct 30, 2023 · f1f4aed · f1f4aed
1 parent e250eac
commit f1f4aed
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 18 deletions.
diff --git a/front-end/GoodOldMap/index.html b/front-end/GoodOldMap/index.html
@@ -6,6 +6,12 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""/>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GoodOldMap</title>
   </head>

diff --git a/front-end/GoodOldMap/package-lock.json b/front-end/GoodOldMap/package-lock.json
diff --git a/front-end/GoodOldMap/package.json b/front-end/GoodOldMap/package.json
@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.17.0"
   },
   "devDependencies": {

diff --git a/front-end/GoodOldMap/src/App.jsx b/front-end/GoodOldMap/src/App.jsx
@@ -6,17 +6,20 @@ import Login from './pages/Authenticate/Login';
 import Register from './pages/Authenticate/Register';
 import Error from './pages/Error/Error';
 import InfoDetail from './pages/InfoDetail/InfoDetail';
+import Favorite from './pages/FavoriteList/Favorite';
 import AuthLayout from './pages/Authenticate/AuthLayout';
 import AccountLayout from './pages/Account/AccountLayout';
-import Favorite from './pages/FavoriteList/Favorite';
-
+import MapLayout from './pages/MainMap/MapLayout';
 const App = () => {
 
   return (
     <>
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<MainMap />} />
+
+          <Route element={<MapLayout />}>
+            <Route path="/" element={<MainMap />} />
+          </Route>
           <Route element={<AuthLayout />}>
             <Route path="/login" element={<Login />} />
             <Route path="/register" element={<Register />} />
@@ -25,11 +28,10 @@ const App = () => {
           {/* TODO: add params: /info/:pieceInfo */}
           <Route path="/info" element={<InfoDetail/>}/>
 
-          <Route element={<AccountLayout />}>
-            <Route path="/account" element={<Account />}>
-              <Route path="favorite" element={<Favorite />}/>
-              <Route path="edit" element={<AccountEdit />} />
-            </Route>
+          <Route path="/account" element={<AccountLayout />}>
+            <Route path="" element={<Account />} />
+            <Route path="favorite" element={<Favorite />}/>
+            <Route path="edit" element={<AccountEdit />} />
           </Route>
 
         </Routes>

diff --git a/front-end/GoodOldMap/src/components/form/formInput.jsx b/front-end/GoodOldMap/src/components/form/formInput.jsx
@@ -3,7 +3,7 @@ const FormInput = (props) => {
   // optional: type
   return (
     <div className="w-full py-1">
-      <input className="w-full py-2 text-center
+      <input className="w-full py-2 px-3
         border-solid border-2 border-navyBlue rounded-lg
         placeholder:text-center placeholder:text-gray-400"
       type={props?.type ?? "text"} id={props?.id} placeholder={props?.placeholder}/>

diff --git a/front-end/GoodOldMap/src/components/popup/popupContent.jsx b/front-end/GoodOldMap/src/components/popup/popupContent.jsx
@@ -6,8 +6,8 @@ function PopupContent(props){
   return (
     // dark background
     <div 
-      className="fixed top-0 left-0 z-50 w-full h-full bg-black bg-opacity-50 flex items-center justify-center" 
-      onClick={() => {props.handleClick()}}>   
+      className="popupBackground fixed top-0 left-0 z-50 w-full h-full bg-black bg-opacity-50 flex items-center justify-center" 
+      onClick={props.handleClick}>
       {/* white popup container: */}
       <div className="bg-white rounded-lg shadow-xl w-[80%]">
         <div className="p-8">

diff --git a/front-end/GoodOldMap/src/index.css b/front-end/GoodOldMap/src/index.css
@@ -24,5 +24,4 @@
 }
 
 @layer utilities {
-
 }
diff --git a/front-end/GoodOldMap/src/pages/Account/Account.jsx b/front-end/GoodOldMap/src/pages/Account/Account.jsx
@@ -13,19 +13,19 @@ const Account = () => {
   return(
     <div>    
       <div className="min-h-screen flex flex-col items-center justify-center">
-        <Link to="/ChangeProfilePic">
+        <Link to="changeProfilePic">
           <img className="w-32 h-32 rounded-full object-cover cursor-pointer" src={props.pic} alt="profile picture" />
           </Link>
 
         <h1 className="text-2xl font-bold mt-4">{props.username}</h1>
         <p className="text-gray-500">{props.email}</p>
         {/* Add a button that redirects to another place */}
-        <Link to="/edit">
+        <Link to="edit">
           <button className="bg-white-500 text-black font-bold py-2 px-4 rounded mt-4">
           Edit Account
           </button>
         </Link>
-        <Link to="/Favorite">
+        <Link to="favorite">
           <button className="bg-white-500 text-black font-bold py-2 px-4 rounded mt-4">
           My Fav
           </button>

diff --git a/front-end/GoodOldMap/src/pages/AccountEdit/AccountEdit.jsx b/front-end/GoodOldMap/src/pages/AccountEdit/AccountEdit.jsx
@@ -92,6 +92,10 @@ const AccountEdit = () => {
       console.error(error)
     }
   };
+  const handleClose = (evt) => {
+    evt.stopPropagation()
+    if(evt.target.classList.contains("popupBackground")) setCurrentActionData(null)
+  }
 
   //Return the AccountEdit component
   return (
@@ -106,7 +110,7 @@ const AccountEdit = () => {
             title={currentActionData.title}
             inputs={currentActionData.inputs}
             buttons={currentActionData.buttons}
-            handleClick = {() => {setCurrentActionData(null)}}
+            handleClick = {handleClose}
           />}
 
     </div>

diff --git a/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx b/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx
@@ -1,8 +1,19 @@
+import { MapContainer, TileLayer, useMap } from 'react-leaflet'
+
 const MainMap = () => {
   return(
     <>
-    main map page
-      <div id="map" />
+      <MapContainer className='h-full' center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {/* <Marker position={[51.505, -0.09]}>
+          <Popup>
+            A pretty CSS3 popup. <br /> Easily customizable.
+          </Popup>
+        </Marker> */}
+      </MapContainer>
     </>
   )
 }

diff --git a/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx b/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx
@@ -0,0 +1,20 @@
+import { Outlet } from "react-router-dom";
+import FormInput from "../../components/form/formInput";
+
+const MapLayout = () => {
+  return (
+    <>
+    <div className="h-screen flex flex-col">
+      <nav className="py-[2vh] px-[5%] w-full bg-white flex flex-row justify-between">
+        <FormInput placeholder="search for city"/>
+        {/* TODO: timeline goes here */}
+      </nav>
+      <div className='w-full h-full'>
+        <Outlet />
+      </div>
+    </div>
+    </>
+  );
+};
+
+export default MapLayout;