Feature/gasht rahdari cartable

src/core/components/MapInfoOneMarker.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { Marker, useMapEvents } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import L from "leaflet";
-import { Box, Button, Typography } from "@mui/material";
+import { Alert, Box, Button, Stack, Typography, Zoom } from "@mui/material";
 import dynamic from "next/dynamic";
 import MapLoading from "@/core/components/MapLayer/Loading";
 import HereIcon from "@/assets/images/examine_marker_active.png";
@@ -40,9 +40,11 @@ const createCustomIcon = (size, iconUrl, labelText) => {
         popupAnchor: [0, -size[1]],
     });
 };
+const MAX_ZOOM_FOR_MARKER = 13;
 
 const MapInteraction = ({ setValue, startLat, startLng }) => {
     const [isMarkerLocked, setIsMarkerLocked] = useState(!!(startLat && startLng)); // وضعیت قفل مارکر
+    const [enableSend, setEnableSend] = useState(false);
     const [markerPosition, setMarkerPosition] = useState(
         startLat && startLng ? { lat: startLat, lng: startLng } : null
     );
@@ -50,11 +52,13 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
 
     const map = useMapEvents({
         move(e) {
+            setEnableSend(e.target.getZoom() > MAX_ZOOM_FOR_MARKER);
             if (!isMarkerLocked && markerRef.current) {
                 markerRef.current.setLatLng(e.target.getCenter());
             }
         },
         zoom(e) {
+            setEnableSend(e.target.getZoom() > MAX_ZOOM_FOR_MARKER);
             if (!isMarkerLocked && markerRef.current) {
                 markerRef.current.setLatLng(e.target.getCenter());
             }
@@ -69,6 +73,7 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
     }, [startLat, startLng, map]);
 
     const handleMarkerClick = () => {
+        if (!enableSend) return;
         if (!isMarkerLocked) {
             const center = map.getCenter();
             setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
@@ -93,6 +98,23 @@ const MapInteraction = ({ setValue, startLat, startLng }) => {
                     click: handleMarkerClick,
                 }}
             />
+            <Stack
+                direction={"row"}
+                justifyContent={"center"}
+                sx={{
+                    zIndex: "400",
+                    width: "100%",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                }}
+            >
+                <Zoom in={!enableSend}>
+                    <Alert sx={{ mt: 1, py: 0.5, px: 2, borderRadius: 2, border: 1 }} icon={false} color={"warning"}>
+                        برای ثبت محل فعالیت، لطفاً نقشه را بیشتر زوم کنید.
+                    </Alert>
+                </Zoom>
+            </Stack>
             {isMarkerLocked && (
                 <Box
                     sx={{