Merge pull request agiledev-students-fall2023#82 from agiledev-studen…

…ts-fall2023/user-story/18/task/57/map-api User story/18/task/57/map api
Ceiceiceii · Oct 31, 2023 · cd05b7f · cd05b7f
2 parents c3a78e3 + 3b6e8f0
commit cd05b7f
Show file tree

Hide file tree

Showing 5 changed files with 286 additions and 4 deletions.
diff --git a/front-end/GoodOldMap/src/components/popup/popupSearch.jsx b/front-end/GoodOldMap/src/components/popup/popupSearch.jsx
@@ -0,0 +1,12 @@
+const PopupSearch = (props) => {
+  // arttitle, artimg, musicTitle, musicImg
+  return(
+    <>
+      <div className="fixed z-[2000] rounded-lg bottom-0 w-full h-[60%] bg-white p-8">
+
+      </div>
+    </>
+  )
+}
+
+export default PopupSearch
diff --git a/front-end/GoodOldMap/src/main.jsx b/front-end/GoodOldMap/src/main.jsx
@@ -11,7 +11,7 @@ const LOOP = true;
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-      <EmblaCarousel loop={LOOP} />
-    <div className='content-center ml-10 mt-16'><TimelineBar></TimelineBar></div>
+      {/* <EmblaCarousel loop={LOOP} />
+    <div className='content-center ml-10 mt-16'><TimelineBar></TimelineBar></div> */}
   </React.StrictMode>
 )
diff --git a/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx b/front-end/GoodOldMap/src/pages/MainMap/MainMap.jsx
@@ -1,12 +1,18 @@
 import { useState } from 'react'
-import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents, GeoJSON } from 'react-leaflet'
 import { Icon } from 'leaflet';
 import InfoCard from '../../components/common/InfoCard';
-
+// import countries from '../../util/data/countries.json'
 
 const MainMap = () => {
   const [position, setPosition] = useState([51.505, -0.09])
 
+  // const countryStyle = {
+  //   color: "black",
+  //   weight: 0.3,
+  //   opacity: 1,
+  // };
+
   return(
     <>
     <div className="flex justify-center items-center">
@@ -20,6 +26,7 @@ const MainMap = () => {
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
         <LocationMarker position={position} setPosition={setPosition}/>
+        {/* <GeoJSON data={countries} style={countryStyle} /> */}
       </MapContainer>
     </>
   )

diff --git a/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx b/front-end/GoodOldMap/src/pages/MainMap/MapLayout.jsx
@@ -3,6 +3,7 @@ import { useLocation } from "react-router-dom";
 import { useEffect, useState } from "react";
 import usePreventZoom from '../../util/hooks/usePreventZoom';
 import ProfilePic from "../../components/account/profilePic";
+import PopupSearch from "../../components/popup/popupSearch";
 
 const MapLayout = () => {
   usePreventZoom()
@@ -49,6 +50,7 @@ const MapLayout = () => {
 
   return (
     <>
+      <PopupSearch />
     <div className="h-screen flex flex-col ">
       <nav className="py-[2vh] px-[10%] w-full bg-beige1 flex flex-row justify-between">
         <div className="relative w-full my-1">

diff --git a/front-end/GoodOldMap/src/util/data/countries.json b/front-end/GoodOldMap/src/util/data/countries.json