feat(map geolocation error ): showing error when geolocation disabled

src/components/ErrorGeoLocation.jsx

@@ -0,0 +1,25 @@
+import { MdError } from "react-icons/md";
+import { Button, Text, VStack } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+export default function LoadingPage() {
+  const router = useRouter();
+
+  return (
+    <VStack
+      justifyContent="center"
+      alignItems="center"
+      height="100vh"
+      width="100vw"
+      bg="gray.100"
+    >
+      <MdError color="purple.500" size="50%" />
+      <Text color="purple.500" fontSize="2xl" fontWeight="bold">
+        Veillez à autoriser la géolocalisation
+      </Text>
+      <Button colorScheme={"purple"} onClick={() => router.push("/")}>
+        Page d'accueuil
+      </Button>
+    </VStack>
+  );
+}

src/components/layout/map/MapComponent.tsx

@@ -10,7 +10,7 @@ import "leaflet/dist/leaflet.css";
 export default function MapComponent(props: any) {
   const { location, listBars } = props;
 
-  const toast = useToast({ position: "top" });
+  const toast = useToast({ position: "bottom" });
 
   const idToastError = "error_location";
 
@@ -43,6 +43,7 @@ export default function MapComponent(props: any) {
             center={location}
             zoom={13}
             minZoom={8}
+            zoomControl={false}
             style={{
               width: "100vw",
               height: "100vw",

src/pages/map.tsx

@@ -7,6 +7,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 
 import LoadingPage from "@/components/LoadingPage";
 import ErrorPage from "@/components/ErrorPage";
+import ErrorGeolocation from "@/components/ErrorGeolocation";
 import Navbar from "@/components/Navbar";
 
 export default function Map() {
@@ -14,6 +15,8 @@ export default function Map() {
     null as unknown as number,
     null as unknown as number,
   ]);
+
+  const [geolocationError, setGeolocationError] = useState(false);
   const toast = useToast({ position: "bottom" });
   const idSaveToast = "saved_location";
   const { data: session, status } = useSession();
@@ -101,16 +104,34 @@ export default function Map() {
     },
   });
 
+  const geolocationOptions = {
+    enableHighAccuracy: true,
+    timeout: 5000,
+    maximumAge: 0,
+  };
+
   useEffect(() => {
-    navigator.geolocation.getCurrentPosition((position) => {
-      setLocation([position.coords.latitude, position.coords.longitude]);
-      if (!loggedUser) return;
-      userSetLocation.mutate(
-        `${position.coords.latitude},${position.coords.longitude}`
-      );
-    });
+    navigator.geolocation.getCurrentPosition(
+      successPosition,
+      errorPosition,
+      geolocationOptions
+    );
   }, [loggedUser]);
 
+  function successPosition(position: GeolocationPosition) {
+    setLocation([position.coords.latitude, position.coords.longitude]);
+    setGeolocationError(false);
+
+    if (!loggedUser) return;
+    userSetLocation.mutate(
+      `${position.coords.latitude},${position.coords.longitude}`
+    );
+  }
+
+  function errorPosition(error: GeolocationPositionError) {
+    setGeolocationError(true);
+  }
+
   const MapWithNoSSR = dynamic(
     () => import("../components/layout/map/MapComponent"),
     {
@@ -120,10 +141,12 @@ export default function Map() {
 
   return (
     <>
-      {isLoading || isLoadingListBars ? (
-        <LoadingPage />
+      {geolocationError ? (
+        <ErrorGeolocation />
       ) : isError || isErrorListBars ? (
         <ErrorPage />
+      ) : isLoading || isLoadingListBars ? (
+        <LoadingPage />
       ) : (
         <>
           <Navbar />