3d Mapbox

.github/workflows/build-and-deploy.yml

@@ -60,6 +60,7 @@ jobs:
           VITE_REACT_APP_AWS_BACKEND_URL: ${{  secrets.VITE_REACT_APP_AWS_BACKEND_URL }}
           VITE_REACT_APP_MAPBOX_DARK_URL: ${{  secrets.VITE_REACT_APP_MAPBOX_DARK_URL }}
           VITE_REACT_APP_MAPBOX_LIGHT_URL: ${{  secrets.VITE_REACT_APP_MAPBOX_LIGHT_URL }}
+          VITE_REACT_APP_MAPBOX_ACCESS_TOKEN: ${{  secrets.VITE_REACT_APP_MAPBOX_ACCESS_TOKEN }}
           EMAIL: ${{  secrets.EMAIL }}
           REFRESH_TOKEN: ${{  secrets.REFRESH_TOKEN }}
           CLIENT_SECRET: ${{  secrets.CLIENT_SECRET }}

packages/web/package.json

@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/mapbox-gl": "^3.4.1",
     "@vitejs/plugin-react": "^4.2.1",
     "axios": "^1.4.0",
     "browser-image-compression": "^2.0.2",
@@ -21,6 +22,7 @@
     "fuse.js": "^7.0.0",
     "ionicons": "^7.1.2",
     "leaflet": "^1.9.4",
+    "mapbox-gl": "^3.12.0",
     "react": "^18.2.0",
     "react-calendar": "^4.6.0",
     "react-dom": "^18.2.0",

packages/web/src/components/CreateMarkerConfirmModal/CreateMarkerConfirmModal.jsx

@@ -0,0 +1,52 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  Text,
+  VStack,
+  useColorModeValue,
+} from "@chakra-ui/react";
+
+export default function CreateMarkerConfirmModal({ isOpen, onClose, onConfirm, position }) {
+  const bgColor = useColorModeValue("white", "gray.800");
+  const textColor = useColorModeValue("gray.800", "white");
+
+  const lat = position?.lat ? position.lat.toFixed(6) : "N/A";
+  const lng = position?.lng ? position.lng.toFixed(6) : "N/A";
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent bg={bgColor} color={textColor}>
+        <ModalHeader>Confirm Location</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <VStack spacing={4} align="stretch">
+            <Text>
+              Are you sure you want to create a marker at these coordinates?
+            </Text>
+            <Text fontSize="sm" color={useColorModeValue("gray.600", "gray.400")}>
+              Latitude: {lat}
+              <br />
+              Longitude: {lng}
+            </Text>
+          </VStack>
+        </ModalBody>
+
+        <ModalFooter gap={3}>
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button colorScheme="blue" onClick={onConfirm}>
+            Confirm Location
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

packages/web/src/components/Home/MapSection.jsx

@@ -5,7 +5,7 @@ import ListItemButton from "./ListItemButton";
 import FeedbackButtonMobile from "./NavBar/FeedbackButtonMobile";
 import ResultsBar from "../ResultsBar/ResultsBar";
 import CreateModal from "../CreateModal/CreateModal";
-import { AddIcon } from "@chakra-ui/icons";
+import { AddIcon, CloseIcon } from "@chakra-ui/icons";
 
 const MapSection = ({
   isOpenCreateModal,
@@ -33,6 +33,22 @@ const MapSection = ({
   setLeaderboard,
 }) => {
   const { colorMode } = useColorMode();
+
+  const handleCancel = () => {
+    setIsEdit(false);
+    setNewAddedItem({
+      image: "",
+      type: "",
+      islost: true,
+      name: "",
+      description: "",
+      itemdate: "",
+      isresolved: false,
+      ishelped: null,
+    });
+    setUploadImg("");
+  };
+
   return (
     <>
       <Flex
@@ -44,21 +60,21 @@ const MapSection = ({
           position="absolute"
           bottom={4}
           right={4}
-          colorScheme="blue"
+          colorScheme={isEdit ? "red" : "blue"}
           height={75}
           width={75}
-          backgroundColor="#74a2fa"
+          backgroundColor={isEdit ? "#E53E3E" : "#74a2fa"}
           color="white"
           borderRadius="50%"
           padding={0}
           _hover={{
-            background: "#365fad",
+            background: isEdit ? "#C53030" : "#365fad",
           }}
           fontSize="30px"
-          onClick={handleListItemButtonClick}
+          onClick={isEdit ? handleCancel : handleListItemButtonClick}
           zIndex={1000}
         >
-          <AddIcon boxSize={8} />
+          {isEdit ? <CloseIcon boxSize={8} /> : <AddIcon boxSize={8} />}
         </Button>
         <Flex
           zIndex={1000}

packages/web/src/components/Map/Map.css

@@ -9,6 +9,23 @@
   z-index: 0;
 }
 
+.marker {
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.marker:hover {
+  transform: scale(1.1);
+}
+
+.edit-marker {
+  width: 40px;
+  height: 40px;
+  background-image: url("path-to-your-drag-marker-icon");
+  background-size: cover;
+  cursor: move;
+}
+
 @media only screen and (max-width: 600px) {
   .map-container {
     border-radius: 0;
@@ -21,4 +38,4 @@
 .custom-cluster-icon {
   background: none;
   border: none;
-}
+}