added markers indicator when clicked

src/components/Map/Map.jsx

@@ -1,9 +1,11 @@
-import { useState, useRef, useMemo, useContext } from "react";
+import { useState, useRef, useMemo, useContext, useEffect } from "react";
 // import { useMapEvents } from "react-leaflet/hooks";
 // import mapuser from "../../assets/logos/mapuser.svg";
 import "./Map.css";
 
 import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
 import { othersDrag, flyImg, iconsMap } from "./MapIcons";
 import {
   MapContainer,
@@ -12,6 +14,7 @@ import {
   Popup,
   useMap,
   Rectangle,
+  Circle,
 } from "react-leaflet";
 import { useDisclosure } from "@chakra-ui/react";
 import InfoModal from "../InfoModal/InfoModal";
@@ -41,6 +44,9 @@ export default function Map({
   const { data, setLoading } = useContext(DataContext);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [itemData, setItemData] = useState({});
+  const [showDonut, setShowDonut] = useState(false);
+  console.log(showDonut);
+  console.log(focusLocation);
   const allowedBounds = [
     [33.656487295651, -117.85412222020983],
     [33.65580858123096, -117.82236486775658],
@@ -49,6 +55,24 @@ export default function Map({
   ];
   const bounds = L.latLngBounds(allowedBounds);
 
+  const handleMarkerSelect = async () => {
+    setShowDonut(true);
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    setShowDonut(false);
+  };
+
+  useEffect(() => {
+    const handleFocus = async () => {
+      await handleMarkerSelect();
+      setFocusLocation(undefined);
+    };
+
+    if (focusLocation) {
+      handleFocus();
+    }
+  }, [focusLocation]);
+
   const allMarkers = data
     .filter((item) => {
       return (
@@ -63,28 +87,26 @@ export default function Map({
           (findFilter.isYourPosts && item.email === user.email))
       );
     })
-    .map((item) => (
-      <Marker
-        position={item.location}
-        eventHandlers={{
-          click: () => {
-            onOpen();
-            setItemData(item);
-            setFocusLocation(item.location);
-          },
-          mouseover: (event) => !isEdit && event.target.openPopup(),
-        }}
-        icon={(iconsMap[item.type] || iconsMap["others"])[item.islost]}
-      >
-        <Popup>{item.name}</Popup>
-      </Marker>
-    ));
+    .map((item) => {
+      return (
+        <Marker
+          position={item.location}
+          eventHandlers={{
+            click: () => {
+              onOpen();
+              setItemData(item);
+              setFocusLocation(item.location);
+            },
+          }}
+          icon={(iconsMap[item.type] || iconsMap["others"])[item.islost]}
+        ></Marker>
+      );
+    });
 
   function Test({ location }) {
     const map = useMap();
     if (location) {
       map.flyTo(location, 18);
-      setFocusLocation(undefined);
     }
 
     return location ? (
@@ -213,6 +235,17 @@ export default function Map({
             </Popup>
           </Marker>
         )}
+        {showDonut && focusLocation && (
+          <>
+            <Circle
+              center={focusLocation}
+              radius={20}
+              color="red"
+              weight={3}
+              fillColor="yellow"
+            />
+          </>
+        )}
         <SetBoundsRectangles />
       </MapContainer>
       {isOpen && (

src/components/Map/MapIcons.js

@@ -1,75 +1,75 @@
 import L from "leaflet";
-import headphone_red from "../../assets/logos/headphone_red.svg";
-import headphone_green from "../../assets/logos/headphone_green.svg";
+import headphone_lost from "../../assets/logos/Headphones_lost.png";
+import headphone_found from "../../assets/logos/Headphones_found.png";
 
-import phone_green from "../../assets/logos/phone_green.svg";
-import phone_red from "../../assets/logos/phone_red.svg";
+import phone_found from "../../assets/logos/Phone_found.png";
+import phone_lost from "../../assets/logos/Phone_lost.png";
 
-import wallet_green from "../../assets/logos/wallet_green.svg";
-import wallet_red from "../../assets/logos/wallet_red.svg";
+import wallet_found from "../../assets/logos/Wallet_found.png";
+import wallet_lost from "../../assets/logos/Wallet_lost.png";
 
-import key_green from "../../assets/logos/key_green.svg";
-import key_red from "../../assets/logos/key_red.svg";
+import key_found from "../../assets/logos/Key_found.png";
+import key_lost from "../../assets/logos/Key_lost.png";
 
-import others_red from "../../assets/logos/others_red.svg";
-import others_green from "../../assets/logos/others_green.svg";
+import others_lost from "../../assets/logos/Others_lost.png";
+import others_found from "../../assets/logos/Others_found.png";
 import others_black from "../../assets/logos/others_black.svg";
 
 import fly_img from "../../assets/images/fly_img.png";
 
 const headphoneLost = L.icon({
-  iconUrl: headphone_red,
-  iconSize: [40, 40],
+  iconUrl: headphone_lost,
+  iconSize: [60, 60],
 });
 
 const headphoneFound = L.icon({
-  iconUrl: headphone_green,
-  iconSize: [40, 40],
+  iconUrl: headphone_found,
+  iconSize: [60, 60],
 });
 
 const phoneLost = L.icon({
-  iconUrl: phone_red,
-  iconSize: [40, 40],
+  iconUrl: phone_lost,
+  iconSize: [60, 60],
 });
 
 const phoneFound = L.icon({
-  iconUrl: phone_green,
-  iconSize: [40, 40],
+  iconUrl: phone_found,
+  iconSize: [60, 60],
 });
 
 const keyLost = L.icon({
-  iconUrl: key_red,
-  iconSize: [40, 40],
+  iconUrl: key_lost,
+  iconSize: [60, 60],
 });
 
 const keyFound = L.icon({
-  iconUrl: key_green,
-  iconSize: [40, 40],
+  iconUrl: key_found,
+  iconSize: [60, 60],
 });
 
 const walletLost = L.icon({
-  iconUrl: wallet_red,
-  iconSize: [40, 40],
+  iconUrl: wallet_lost,
+  iconSize: [60, 60],
 });
 
 const walletFound = L.icon({
-  iconUrl: wallet_green,
-  iconSize: [40, 40],
+  iconUrl: wallet_found,
+  iconSize: [60, 60],
 });
 
 const othersLost = L.icon({
-  iconUrl: others_red,
-  iconSize: [40, 40],
+  iconUrl: others_lost,
+  iconSize: [60, 60],
 });
 
 const othersFound = L.icon({
-  iconUrl: others_green,
-  iconSize: [40, 40],
+  iconUrl: others_found,
+  iconSize: [60, 60],
 });
 
 export const othersDrag = L.icon({
   iconUrl: others_black,
-  iconSize: [40, 40],
+  iconSize: [60, 70],
 });
 
 export const flyImg = L.icon({